Jump to content


timeline labels animation click and not click.

Recommended Posts

So I'm working in labelsArray and I couldn't understand properly how it works but what this what I expect. 
First I thought "tl.labels()" is somehow called as an array which basically make it right (but it is an object array) so I was thinking if I do that my animation timeline would be easier to animated each item...because what I want to happen is that. If I click the box of an specific box. It will play the animation...that directly in tl.labels() and things that wasn't click will reversed() but don't mind this I can make this reversed() work out for myself. It is just my understand in tl.labels() was wrong.. I already used to the tl.currentlabel(`label${i}`).play() as for specific array index of timeline...just check it in my codepen so you can see it. It supposed to play the specific item in the timeline but it plays all the item not the specific one. Can anyone tell how does this work? cause I feel working with tl.labels() would be faster than just calling it one by one.

See the Pen LYQwvqe by yowyow3322 (@yowyow3322) on CodePen

Link to comment
Share on other sites

I'm having a difficult understanding what you are asking, but let me try to offer a few comments/suggestions: 

  1. You can shorten this:
    // long
    tl.add(gsap.to(elem, {...}),`label${i}`);
    // short
    tl.to(elem, {...},`label${i}`);


    // long
    const staplers = document.querySelectorAll('.stapler');
    // short 
    const staplers = gsap.utils.toArray('.stapler');


  2. Usually it's best to animate transforms (x/y) rather than top/left because those are cheaper for the browser to render (transforms don't affect layout).
  3. It sounds like an engineering problem - there's no need to put all your animations into one timeline if your goal is to be able to independently control them. By doing so, you'll make everything linear rather than dynamic. 

I assume you wanted something more like this: 

See the Pen bGvbGYY?editors=0110 by GreenSock (@GreenSock) on CodePen


Based on what it looks like you're trying to do, you may want to look into Flip plugin because that might make your life much easier for a case like this. You could just capture the state, set the new one, and then let Flip do all the work for you of transitioning between them. 



Good luck!

  • Like 2
Link to comment
Share on other sites

Here's a version that uses Flip plugin. Notice how much easier it is! And you could just change the ".active" class to make styling changes: 

See the Pen LYdPVoa?editors=0110 by GreenSock (@GreenSock) on CodePen

  • Like 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.