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
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
thank you very much Jeff!