Streaming live at 10am (PST)

¿How can I create these animations?

Hi! I’m new in webflow and I would like to understand if this kinf of animations present in this website https://www.yoursalesengine.com/ are part of a template of it’s possible to create them from zero? I refer specifically in home, section " the engine behind your business" the bulb, signs and othe stuff that moves around the guy with a mug in his hand. Thank in advance!

Hello Rodrigo,

So this website has a lot of things going on - all of which I’m confident can be done in Webflow.

The part specifically you’re asking about (the guy with the coffee) - I can think of two ways you could accomplish this - the super-easy way and the slightly harder way :wink:

So - the super-easy way to accomplish this would be by using either vectors or png (for the images like the light bulb and stuff) and use a page interaction so when they come into view, they start an animation (that you would have on loop) - the animation would give them the bouncy effect.

The slightly harder way to accomplish this would be by creating a Lottie animation that would do the same thing - the downside is if you’re not familiar with after effects, there can be a bit of a learning curve to making Lottie, the upside is you can control a Lottie with much more ease, it scales more easily between different device sices and since Lottie animation uses vectors - it’s super lightweight.

Some things that can help you decide what is better for you:

Webflow University - Interactions and Animation (also touches on Lottie): Interactions & animations course | Webflow University

-Also-

To get an idea of how the easier way of going about it works, there’s a template I’ve used that has kind of a similar idea 1-clonable-membership-template - Webflow

if you go to that link and click the link that says “Open in Webflow” - it will open a copy of the site in your Webflow designer - if you click the live button (the eye in the top left) you’ll see that the main image on the website on the top right has a kind of “sliding border” that’s using a similar idea with a “looped interaction animation” - I think this will give you a good idea of how something like this would work.

Hope this helps!

Best,

Jeff Wagar

1 Like

thank you very much Jeff!

1 Like