Hey everyone -
I’m experimenting with layering animations, but need a little help getting it all to work out… I have three simple .jsons stacked one on top of the other to form one ghost icon:
- “Icon-FLAT” - Flat color background that cycles through hues and loops seamlessly back to the first color after 5 secs
- “Icon-LINE_Start” - The “staging” animation, which has the line art drawing on from nothing and “landing” into a basic blinking loop (after 5 secs)
- “Icon-LINE_Loop” - Picks up where the last layer left off and performs blinking loop in 5 sec intervals
On cursor hover, I’m trying to make the following happen:
- Icon-FLAT (the background) fades in and begins an infinite loop
- On top of Icon-FLAT, Icon-LINE_Start plays its full animation (animating in the line art) and then stops
- As soon as Icon-LINE_Start finishes, Icon-LINE_Loop begins to play and begins an infinite loop
Basically, I was able to get every one of these animations working perfectly in preview - the only issue is that getting everything to play nice together upon the mouse-over trigger is… notttt easy. Can anyone provide guidance on how they would tackle this?
My current project has most of my initial animations scrapped because they were based on old json files, so that is mainly there for you to be able to mess with the elements themselves and see what you come up with.
I am brand new (about a week in) to Webflow, but an animator by trade - messing around with complex interactions just to learn and apply to future client projects, because this stuff is fascinating!
THANKS!
Read only share link: https://preview.webflow.com/preview/floaty-animated-icon-test?utm_medium=preview_link&utm_source=dashboard&utm_content=floaty-animated-icon-test&preview=3e04c888e9b36a743d314d6f60341073&mode=preview