Streaming live at 10am (PST)

Recreate 3 webflow animation

Hi to everyone!

I’m new to webflow forum - I’m new to webflow at all - and would like to improve my learning curve with your help.

So here are the 3 things I’d like to create (or recreate):

animation 1: https://www.screencast.com/t/D09bBjQ7rv5
animation 2: https://www.screencast.com/t/rUWwUjTN
animation 3: https://www.screencast.com/t/raPHLpYP

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 :slight_smile:

Thanks for your time and help! I look forward to your suggestions.


Hi @jorn !

Still no reply to my post. Can you please help?

Thanks!

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 :sweat_smile:

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.

Hi @jorn

Thanks for your help! Here’s the breakdown of the animation from my perspective:

  1. 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?
  1. 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?
  1. 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! :slight_smile:

Thanks for you time and help!

Mark

Thanks for clarifications @shroomers88 . Here are my answers :grinning:

  1. 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/
  • Image distortion: how can I have the image distorted/at an angle?
    I would start here: https://university.webflow.com/article/intro-to-3d
  • 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
  • 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.
  1. Animation 2:
  1. Animation 3:

Let me know if this was helpful or not.

Wow @jorn! This surely help! Thanks! :slight_smile:

1 Like