Animate staggerTo children at the same time

[Charlie Stevenson 1 Likes (Newbie)]

Hi all,

 

How would I get the below animation to stagger all lines, but run each box's animation at the same time?

 

I'm unable to create separate id's or classes for the '.artist-name' elements (or any parents) since it's dynamically pulling from a cms.

 

Thanks in advance.

 

Charlie

 

[mvaneijgen 2,518 Likes (Superhero)]

TweenMax. is really old, everything got reduced to just using gsap.. If you have more code like that, see the below migration guide

 

You are splitting all the lines when the page loads and that gets converted to an array which you then animate with a stagger. But what you want is a list of lines per .box element and animate that, so that is what I did. Changed your forEach loop to loop over all the boxes on the page, then in there do a splitText for each .artist-name and added that to the timeline. I've also changed some of your logic around, the elements are already at the position to you want them, so a .from() is much easier in that case and you don't need any CSS.

 

When using percentage values it's better to use yPercent or xPercent instead of y or x

 

I've also set their initial value to visibility: hidden and then have a .set() which makes them visible again as soon as the Javascript loads. These are some best practices when using GSAP, read more here :

 

See the Pen OJZKbWd by mvaneijgen (@mvaneijgen) on CodePen

 

[Charlie Stevenson 1 Likes (Newbie)]

Godsend. Thanks for the swift reply and pointers too

[Shrug ¯\_(ツ)_/¯ 962 Likes (Leader)]

Hi @Charlie Stevenson,

 

I'm glad @mvaneijgen was able to help you sort your question. 👍

 

I removed both pens, due to them referencing paid Club plugins in the HTML section. This would give free access to those plug-ins to others. Please instead start with the GSAP (mininal-demo) 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 (read more about it here) which includes access to the paid plugins for use only on CodePen.

 

Thanks for your understanding. 😉

[Charlie Stevenson 1 Likes (Newbie)]

I'll keep that in mind for next time. Thanks