Simultaneous hover trigger for multiple stacked animations (with delays, etc)

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:

  1. “Icon-FLAT” - Flat color background that cycles through hues and loops seamlessly back to the first color after 5 secs
  2. “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)
  3. “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:

  1. Icon-FLAT (the background) fades in and begins an infinite loop
  2. On top of Icon-FLAT, Icon-LINE_Start plays its full animation (animating in the line art) and then stops
  3. 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

Live link: https://floaty-animated-icon-test.webflow.io/

See the GIF below for a visual of what I intend the final animation to look like, because otherwise this might be hard to visualize :smiley:

_Demo_Comp_2

Upon hover, this is what I want to happen (loop ad infinitum) - but the anatomy of it is broken into the three json files itemized above.

Upon the same hover trigger:
- The flat BG json fades in and begins its eternal loop (changing color and floating)
- The START lineart json animates the line art in with trim paths
- Once the START line art json completes its animation, the LOOP line art json appears/replaces it and loops forever n ever