Trying interaction 2.0 for the first time and loving it. Lost to learn but in true fashion I am in the deep end with a live job. I have a timed animation on load but i’d Like to loop some of the parts once the come to their dj al resting place. Do I have to create a separate load interaction set to loop for each item I want to remain animating? Or is that something I can use the animate once he page has loaded in the same sequence?
Post your read-only link so we can view the page. However, page load can be reused. Inside the panel you will see the list of created animations for page load. You don’t have to create a new each time. You will need to make the elements or replace elements is set properly.
Basically, one element would have two interaction: one that stages it, and a looping one for its idle state. Take your element and wrap it into 2 extra divs. The outer div will be affected the stage (first) animation. If it’s a timed animation, it’s cool, just remember the total time of the anim. Let’s say 2200ms.
Then affect the idle looping animation to the div inside it, the inner wrapping div. For example a rotation. Set il like you want, then add a delay equal to the length of the stage anim. 2200ms as we imagine above.
Now it will play as you want it to: stage anim will animate the outer div with the inner + your element inside, then when the anim finishes, the idle looping anim will take over.
You can then fine tune to blend the two interaction nicely, make them overlap a bit.
A lot of my anims have the idle animation working while the staging anim runs, it adds ganularity to the movements. Look at the submarine here, it always has an idle up and down animation, that adds to the main moving anims. http://lebathyscaphe.com/
So the globe image is a set of layered svgs - earth, mesh x2 and dots. Aiming to loop the meshes rotating at different speeds (front and behind). I had previously got them rotating 360 at approx 120sec. Achieved the look but, of course, ended up stopping.
I like the flexibility of having two divs and applying separate interactions and fine tuning them to appear seamless. I have noticed the replace elements feature but couldn’t make sense of it (admittedly not yet experimented) but intrigued as to what it does/doesn’t…
It’s for reusing the interaction. Say you make an interaction that affect an element called “box” and another element called “Box parent”, you can reuse that on another thing and specify for each element what it now affect (the box one will target another element called ‘header’ for example, and so on.
I really recommend you to watch the videos Webflow made, they outdone themselves, the videos are short, efficient, very funny and the voice over is delightful.
Yes I had a period of watching all the videos and not doing. Then doing and not watching. Now I am juggling both and getting there. I didn’t remember the ‘replace element’ getting a mention but could have well missed it at the time.
Agreed, the videos are first rate.
Thanks for your help. I have a feeling we may chat again soon!
Agreed! Without the videos, I believe WF would be literally too complicated and would frustrate most. 90% of people don’t know anything about how site building works. WF educational process is top-notch! Even non-coders like me, can learn quickly, it makes all the difference - THEY CARE! I love learning from their dev team. It’s the best online for sure.