Jump to content
Search Community

Dynamic time line - beginner question

JacquieS test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Dear GSAP experts,

 

I have not used GSAP before. I was wondering whether you could advice me whether GSAP would be able to do a time line as follows (no need to tell me how to do it, I can read the manual to learn more - I just wanted to quickly get an opinion about whether it is at all possible before starting to go through tutorials):

I want to have a square on the screen that moves to the right (by e.g. 10 vh) every time a user presses a button. I have tried with CSS animations, but the tricky thing is that I want the animation to take 0.5s. So e.g. if a user presses the button three times in quick succession, I want a timeline that grows to accommodate three animations that then play one after the other (translating 30vh in total). And if the user presses a key a fourth time while the animation is already running (e.g. while it is in the process of doing the 2nd movement), I want to append this to the timeline while it is running (so that the square moves 40 vh in total). 

 

Would this be possible with GSAP?

Many thanks

Jacquie

Link to comment
Share on other sites

Hi @JacquieS :)

 

Welcome to the forum.

 

You said you don't want us to tell you how to do it so I won't show you a demo, but the answer to your question is yes. It's quite easy with GSAP. I'll let you go through the docs to figure it out, but if you get stuck, we're here to help. 

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Great job on finding all the info and getting this started. Thanks for the demo too.

 

You can use kill() if you want, but in this case I'd probably just clear() the timeline.

 

See the Pen MBZjpW by PointC (@PointC) on CodePen

 

The only error I saw in your pen was using parentheses on your resetTimeLine() function. That will call that function immediately. For an onComplete callback you just use the function name without parentheses.

 

// change this
tl.add(TweenMax.to($('#redSquare'),1,{y:0,onComplete:resetTimeLine()}));

// to this
tl.to('#redSquare', 1, {y:0, onComplete:resetTimeLine});

 

You can also shorten up your tweens a bit by not using the add() method or the jQuery selector.

 

// this can be shortened
tl.add(TweenMax.to($('#redSquare'),1,{y:'+='+ toPX(2)}));

// to this
tl.to('#redSquare', 1, {y:'+='+ toPX(2)});

 

Not that what you did was wrong. It works perfectly fine. I'm just trying to save you some typing. :)

 

In your if/else statement you are adding the tween back to y:0. With rapid clicks/presses that will add multiple duplicate child tweens to that timeline. In this case it won't matter since the first one added will trigger the onComplete function and clear() the timeline, but you could add some logic to prevent those duplicate tweens from being added if you like.

 

Hopefully this info helps. Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Hi Jaquie,

 

Welcome to the forums. I commend you for wanting to try to figure this out for yourself.

This definitely is a little bit of an advanced challenge for a beginner, especially with the viewport units, but you did a fantastic job.

 

As always, wonderful assist by @PointC.

 

  • Like 3
Link to comment
Share on other sites

2 minutes ago, Carl said:

I commend you for wanting to try to figure this out for yourself.

 

Agreed. That's awesome and a great way to learn. ?

 

I nearly fell out of my chair when I read that you didn't want to have the answer given to you right away. :D

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

Thank you so much, this is really helpful!

Also, love GSAP and the forum!! - I'd spent a day getting the animations just right with CSS animations only and it just didn't work; and it's so easy with GSAP. [I'm using this for a research study; experimental psychology]

 

I have one more question; I don't quite understand what you're saying here about the problem with the if/else statements and rapid button presses. Do you mean that I could be adding too many tweens somehow if the person presses the button before an animation has finished? (It looks like it's running ok - what is the best way to see what I have in my timeline after a few button presses? I've tried 'tl' in the console, but there is a lot of information, i can't quite figure out where the timeline elements are?)

18 hours ago, PointC said:

In your if/else statement you are adding the tween back to y:0. With rapid clicks/presses that will add multiple duplicate child tweens to that timeline. In this case it won't matter since the first one added will trigger the onComplete function and clear() the timeline, but you could add some logic to prevent those duplicate tweens from being added if you like.

 

Hopefully this info helps. Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

Good question. I'll see if I can better explain it. 

 

On the first two presses we add the 2vh vertical tweens and on press 3 the tween back to y:0 is added. But with rapid presses, the else statement continues to fire because the condition of (buttonPresses<3) is still falsy. So what happens is this tween

tl.to('#redSquare', 1, {y:0, onComplete:resetTimeLine});

 is added to the timeline as many times as you press and release a key. It's a duplicate tween so no animation will occur and the onComplete will fire and clear() the timeline when the first one completes thus clearing the duplicates. That's why everything works fine. Here's another fork of your demo with a getChildren() count. Try pressing rapidly during the animation and watch the timeline's child count go up.

 

See the Pen OwdPZo by PointC (@PointC) on CodePen

Does that make sense?

 

How would you prevent the duplicates? That depends on your actual project. If you have a specific limit on the presses count, you could simply add an else if() to your statement. You could also set some sort of toggle that prevents additional tweens from being added.

 

Hopefully that helps. Happy tweening.

:)

 

  • 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.
×
×
  • Create New...