Wix Studio | Webinar: Add motion and depth to your sites with scroll, animations and interactions
Vložit
- čas přidán 17. 09. 2023
- Get inspired and add character to your site designs with the latest motion and effects features. We'll show you how to achieve engaging experiences with extra whimsy and unpredictability to your site interactions using entrance and loop animations, and scroll per element for unique Scrollytelling experiences.
-
Learn more about Wix Studio:
www.wix.com/studio
Want to take a closer look at the end-to-end process of building responsive sites with Wix Studio? Check out the Wix Studio Essentials course:
wix.to/gT8VY7c
Join the Wix Studio Community forum to connect, collaborate and learn from other professionals:
forum.wixstudio.com
-
About Wix Studio:
Introducing Wix Studio-an end-to-end web creation platform for agencies and freelancers. Create tailored web experiences for any client in a hyper-efficient way with advanced design features, custom dev capabilities and multi-project workspaces.
Subscribe to our channel for more knowledge and inspiration:
www.youtube.com/@WixStudio/ab...
-
Stay tuned:
Instagram: / wixstudio
Facebook: / wixstudio
Twitter: / wixstudio
TikTok: / wixstudio - Věda a technologie
This is pretty impressive. Wix is starting to feel more like Adobe Flash.
We need more tutorials on basic horizontal scroll. I've been looking everywhere for the simple answers.
1. Which way is best to build the scroll. Container flexi boxes etc.
2. How to add to the scroll.
3. Purpose of trigger animations.
4. Benefits and use of vh vw or percentages.
Thanks.
Thanks, Keith! Our team is dedicated to providing users with guides to help them create their best sites. Your feedback is incredibly valuable to us and is shared with our colleagues. Having said that, we invite you to explore our Wix Studio academy and learn more about how to create a horizontal scroll effect here > wix.to/U6SCh2Z
Nice, @wixstudios do you all have any presets for Loading Animations or would consider adding some to the animation library?
Wow mind-blowing
Thanks for the informative video! I'm curious about adding an additional section on the left side of the page. In the example you provided for the 'MOVEMENT' page, there's a year list on the left side that isn't visible in the editor mode. Could you please demonstrate how to achieve this specific layout?
Hi Christina. This was achieved with a CSS grid, divided into 3 columns.
Each of these columns is 100vh height, and within this first column we have the container with advance sizing mode set with 100vh height, and 200vw width.
All the elements are then set inside this container.
How did you get the horizontal scroll section? Didn't really elaborate on how to achieve it
Hello. The horizontal scroll section is a container with 200 vw (viewport width) width and 100 vh (viewport height) height. To reach this result, add a container, turn on the advanced sizing, and set up the width and height.
Can guys make a quick tutorial on this?@@WixStudio
It says "Section width is always set to auto" I can only change the height @@WixStudio
@@WixStudio I have a question about horizontal scroll. I've made everything same with the video but when i scroll down my sticky section ends and scrolls down.
p.s every container&css grid values is correct.
Do you have any horizontal scroll templates?
Impressive ❤
Couldn't agree more
would’ve been such a good video if you could teach
does Wix have this page for us to try out without the effects? I want to go through each section with the webinar.
Hi there, yes! All of the lesson's resources can be found under the "in This Lesson" tab > www.wix.com/studio/academy/courses/wix-studio-essentials-course
Hello, is it normal that on a smartphone when we zoom out in the header we see a large white stripe on the side because the rocket container is appearing lower? Thank You
Hello, and thanks for reaching out. For assistance with your Wix Studio account, we provide support through a variety of different resources.
These include our Wix Studio Academy > www.wix.com/studio/academy, our dedicated communities > wix.to/SiperLT or by submitting a ticket to our customer care team at wix.com/contact
Where do find your different images you layered?
Hey Kelly, could you please clarify what feature you are referring to?
@Wix Studio I follow your instructions to do the horizontal scroll but it's not working so well. My animated object - as the rocket - doesn't go the right place ; and when I finish scrolling horizontally, all my elements - that are sticky - move to the left diagonally and left the screen. How can I fix it?
Hey Victorine, don't be so harsh on yourself! Make sure all of your animations are adjusted to the right property under animation path control and the adjust angle, distance and animation area. Please follow the following instructions for the rocket:
1. Animation path: to its design
2. Select move preset, go to adjust and set the angle to 70 deg
3. Set the distance of 90vw and animation area 0-100
How much do these animations affect the load speed of the site?
Hi. You can test it by split testing. Make one page with animations, while other without. Then run Speed Page Test and see the difference
Are these type of images available within Studio. I'm guessing they are transparent but are these free within the studio package like the Balloons/Train/Bike. Thanks
Hey Keith, we have several sources that offer visuals to implement on your site and even provide you with the option to create your own image using our AI image creator. You may include free media from Wix, Unsplash images or create your own visuals using our AI creator. Check out the guide here > support.wix.com/en/adding-and-managing-your-media
Thanks but that is not really answering the question which was about these images in the video not to be directed to another platform which would take hours to find the answers. AI image is good but I can't see that it will produce a transparent image. @@WixStudio
hi, could you let me know where can I find the slideshow container instead of slideshow repeater? I just want different design in each slideshows but currently no where I can find in Wix studio but Wix or Editor X yes I can.
Hey Kenny, we're here for you. Transitioning between platforms takes adjustments and we're always working to create a smooth transition for our users. We noticed that you brought this topic up to a discussion in our dedicated Wix Studio community and commented on several videos regarding this concern. To prevent miscommunication, our experts will follow up with you in the community here > forum.wixstudio.com/t/is-there-normal-slideshow-container-than-the-repeater/57289/10 and feel free to submit a support request to reach out to our team via email or a callback at any time.
@@WixStudio Thank you. I am willing to join it to acheive what I imagine for a site.
Hi guys,
followed every step 100% accurately, but I can just move the container 63 vw maximum...not 100 vw?!
Does someone have a fix?
Thanks
Thanks @Sebastianhahn4929, we'd be happy to look into this for you. If you could kindly get in touch with our customer care and provide your domain name, we'll be able to go through the steps, together.
How would slide look on phone
Hello. There are adjustments made to the mobile site design throughout the session. Each section can be adjusted on smaller breakpoints as you wish, and the design/layout changes can be made on smaller breakpoints without affecting higher breakpoints. Ultimately, the mobile design is entirely up to you and your preferences.
Im kind of getting a vibe that these dudes hate each other and have a competitive friendship 😂😂
website do brasil
these tutorials are unsufferable. horrible production
where i can see this website? @wix
I want to see this website live
Hello. This is a template website that you can check out for yourself here >> www.wix.com/website-template/view/html/3319