These are all animation that use to be featured on webflow’s homepage, but aren’t used anymore. I’ve contacted webflow’s support for help and they told me to look for help here in the forum, so I hope some of you guys can help me recreate the same animation with new images
Thanks for your time and help! I look forward to your suggestions.
Hi @shroomers88 Welcome to the community and sorry no one answered.
Maybe your question was too wide and not that precise.
Don’t get me wrong but if you’re new to Webflow I would not suggest starting with learning animation like this but we’re all different in how we learn and how quickly we learn so maybe you want to dive right in to the advanced stuff
In the videos there’s actually many interactions going on at once. For me to give more precise help are you able to break down each animation one by one you want to achieve.
For example if you want an element to stick once it reach the top or similar. Something like that is pretty easy and fast for me to make a project and maybe a video as well or send you to right learning material on the University.
Maybe this is helpful, Nelson made live stream about the old home page design.
Thanks for your help! Here’s the breakdown of the animation from my perspective:
Animation 1:
Words switch: how to have the words switch "business sites, e-commerce stores, etc.) in the animation?
Image distortion: how can I have the image distorted/at an angle?
Images sliding from side to side: how to have the images sliding? I’ve had a look at the video you’ve sent but it doesn’t go into much details.
Images height perspective and shadows: how to have the images “elevate” from the background and then disappear?
Animation 2:
Words fading and sliding: where should I look at in the dashboard?
Image sliding and then sticking: how can I have the images moving from a place to another and then stick depending on-page location? Also how can I control the direction in which they go?
Animation 3:
How can I have the background colors switch from one color to another this smoothly?
If you can send me to the right learning material on the University that’d so much appreciated!
Thanks for clarifications @shroomers88 . Here are my answers
Animation 1:
Words switch: how to have the words switch "business sites, e-commerce stores, etc.) in the animation? Does this help? http://webflow-typer-demo.webflow.io/
Images sliding from side to side: how to have the images sliding? I’ve had a look at the video you’ve sent but it doesn’t go into much details. Is this post and tutorial helpful? Horizontal move on Vertical Scroll - #6 by maartin
Images height perspective and shadows: how to have the images “elevate” from the background and then disappear? Look at the intro to 3D article above. You basically move elements on the z-axis and then use interactions with opacity.
Image sliding and then sticking: how can I have the images moving from a place to another and then stick depending on-page location? Also how can I control the direction in which they go? I’m sharing two projects I’ve made a while back helping on the forum. Maybe not exactly what you want but could be helpful while learning. Look at the preview and try to learn. http://floating-div-scroll.webflow.io/ Preview http://sidebar-scroll.webflow.io/ Preview
Animation 3:
How can I have the background colors switch from one color to another this smoothly? This is again made with interactions and if you learn the basics this is fairly simple. But for the sake of it I’ve made project for you to look at. https://change-background-color-on-scroll.webflow.io/ Preview