Add Animations & Interactions with Wix Studio
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- Learn to add animations and interactions to your sections, and how to customize them to achieve a specific effect on each breakpoint.
In this lesson, you’ll learn how to create dynamic experiences by applying entrance, hover, click, scroll and loop interactions with customized settings across different breakpoints.
Complete the Course Challenges Here:
www.wix.com/studio/academy/co...
--
0:00 - Intro
0:35 - Add an entrance Animation
1:45 - Add a hover Interaction
3:15 - Add a click interaction
4:26 - Add a scroll effect
6:07 - Add a loop Animation
6:45 - Create a custom Interaction
-
Learn more about Wix Studio:
www.wix.com/studio
Get started with our Essentials course:
wix.to/gT8VY7c
Join the Wix Studio Community:
forum.wixstudio.com
Follow us on social media:
➔ Instagram: / wixstudio
➔ X: / wixstudio
➔ TikTok: / wixstudio
➔ Facebook: / wixstudio
About Wix Studio:
The end-to-end platform for agencies and enterprises to create and manage exceptional sites with extreme efficiency. Smart design features, flexible dev tools and streamlined management capabilities mean you can do more, at scale.
Subscribe to our channel:
➔ www.youtube.com/@WixStudio?su... - วิทยาศาสตร์และเทคโนโลยี
Pretty cool 😮
We couldn't agree more! 🙌
Loving the new tutorials. What about interactions that increase the width of the first image and decrease the width of the other two. Then, apply that same logic to the other images. Is that possible?
Hi there. Using interactions you can apply the expand animation on the image you want to expand and add shrink animation for the other two images. You can do the same steps on the other images as well- add expand for the animated image and shrink to the rest.
@@WixStudio This doesn't work. After applying the expand animation on 'Image 1' and shrink animation on 'Image 2' and 'Image 3', I'm unable to repeat the same steps on 'Image 2'. It says 'this element already has an animation'. Is there any other way to do this?
Im having trouble with the container shrink scroll effect at 4:26
I get the scroll effect but the containers dont stack and they have my background as outline.
Ty
I have the same problem, can explain pls?
Hey,
we set different heights for each container, the first container is the highest and it descends down. You can also stretch the containers and set different paddings at the top. The most important thing to make sure of is that each container has different heights.
Having problem with scroll effect at 4:26 only one section stacks up and the rest does not. Can you help pls?
Hey,
we set different heights for each container, the first container is the highest and it descends down. You can also stretch the containers and set different paddings at the top. The most important thing to make sure of is that each container has different heights.
Why I can't find Breath effect (nor Loop) - I only get standard effect as glide in..etc
Hi there. We would need our customer care team to take a closer look to determine what may be preventing you from accessing this effect. Please contact the team here >> wix.to/iZTuzNF, or through our Wix Studio communities > wix.to/SiperLT
@@WixStudio I just realized that Wix Editor (my site builder) is different from Wix Studio :( and no migration is possible, i'm sad
the stacking containers part is not fully shown...anyone that tries to recreate this has issues...
Hey there, thanks for bringing this to our attention. If you're referring to building the part of the containers card that scrolls one on the other, create 3 sections with a container that contains the content, where each section has a different top padding (the first has a low value, the second has a larger value and the third has a larger value than the second). Then, define each section as sticky, and finally, add the animations that appear in the video on each container.