Animate Multiple Elements based on Specific Data from Arrays (Svelte implementation)

[Colourblue]

I would like to animate a series of SVG circles from a set of coordinates in one array to a set in another.

 

I have created this repo that lays them out and does one of two animations / tweens (animationRed, animationGreen) based on their class based on a scrolltrigger.  That works fine.  Each circle has an id which the tween can use to identify them.

 

What I'd like to do is add to those tweens, moving from the coordinates in circles to the ones in circles2 and then back again when scrolling back, based on the scrolltrigger.  I'm keen to keep the two components separated as that makes the larger use case easier to manage.

 

https://svelte.dev/repl/33ff20f203854e949518253d35147952?version=4.2.7

 

Many thanks in advance.

[Rodrigo]

Hi,

 

Just create an array for each group of circles, make each animation a GSAP Timeline and using the position parameter add the animation for the position at the start of the timeline (if you want that) and using function based values, loop through the target values. Something like this:

https://svelte.dev/repl/a97f666ce709488b8a32024949912587?version=4.2.7

 

Hopefully this helps.

Happy Tweening!

[Colourblue]

Perfect, thanks Rodrigo