Jump to content
GreenSock

Michael Barsotti

Remove timeline label delays

Recommended Posts

I have a request to build this timeline animation to play once, then allow the viewer to manually control with a next/back button. We're in the habit of using

.add("frame1","+=4")

to hold on a frame of the timeline allowing a person to read the text. 

I can get manual control OK, but, I think, when clicking the next/back buttons this += delay time is playing. I can't figure out how to remove, or change it to zero, when we enter manual mode.

I'm sure I'm not describing my problem very well, please ask any questions.

Any suggestions are appreciated. 

See the Pen ExyRQvO#code-area by cmbarsotti (@cmbarsotti) on CodePen

Link to comment
Share on other sites

Hey Michael. First a couple of notes:

  • We don't recommend animating left/top. Instead animate x/y. Visually it will be the same but it will perform much better. 
  • I notice you have the same duration in every tween. We recommend that you use GSAP's defaults so that you can leave that out! 0.5 is actually the default duration for GSAP tweens so you can leave it out completely.

Regarding your issue, I would set things up differently. Instead of forcing that empty space, I'd actually pause your timeline. That way you can skip it later on:

See the Pen ZEORozb?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Nice, that was a lazy pen. usually durations vary and we do use x and y for the reason you stated. I just wanted to get a pen up.

I'll use call that's a great idea, thank you.

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