Jump to content
Search Community

Animate staggerTo children at the same time

Charlie Stevenson test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

  • Charlie Stevenson changed the title to Animate staggerTo children at the same time
  • Solution

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

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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. 😉

  • Like 2
  • Thanks 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...