Jump to content
Search Community

Help with adding tweens back to timeline

Guest jasonjustice
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

Guest jasonjustice

First off, to the creators and participants of this product and forum. Thank you. I've used GSAP for a bunch of small projects. My current project is pushing my current knowledge of the library and I'm learning some awesome techniques.

 

Here's my problem:

 

I've got a timeline that zooms through series of images. I have a loop that adds tweens to to the timeline so descriptive content related to the different sections of the timeline will fade in and out in time. Also, if you click the corresponding button, the timeline will scan ahead to that particular point. All of this works except, after clicking to scan ahead, I need to re-add the tweens that fade the content in and out.

 

Right now I am calling the function on complete that adds the tweens to timeline, but what happens is that the contents quickly cycle through as the tweens catch up with the timeline. I just want them added so that way as the animation progresses they appear in time. 

 

Please forgive the repeat js throughout my pen. I'm just trying to get my desired animation behavior locked down before cleaning things up.

See the Pen MvLgjb by jason-justice (@jason-justice) on CodePen

Link to comment
Share on other sites

Sorry, I don't really understand the problem or the code.  There are over 100 lines and no comments.

 

Right now I am calling the function on complete that adds the tweens to timeline, but what happens is that the contents quickly cycle through as the tweens catch up with the timeline. I just want them added so that way as the animation progresses they appear in time. 

 

I've read this a few times and I'm just not understanding it.

 

It would really help if you could isolate the issue in a clean, and reduced demo that clearly illustrates what you are trying to do. It doesn't even have to look anything like the project you are building. In fact it may help to remove all the code that zooms the images. 

 

It looks like a few people have read this post and I'm assuming they had similar concerns. 

As I said in the other post, I really  like the zoom effect. Just not sure what you need to happen with the details or why tweens need to be re-added to a timeline.

  • Like 1
Link to comment
Share on other sites

Guest jasonjustice

@Carl thanks for taking the time to try and help. 

i cleaned things up slightly and forked the pen.

See the Pen wqNPZP by jason-justice (@jason-justice) on CodePen

First look at this version. Let it play through the loop once. You will see in the black area at the bottom. Text fades in and out at certain times.

Now after letting it loop, click one of the section buttons. It will fast forward the timeline to a specific spot in the zoom. However you also see the text fade in and out since its on the same timeline.

 

With this fork, I kill all the tweens on the text. So they are not visible when fast forwarding.

https://codepen.io/jason-justice/pen/EvrbGB

 

But now the problem is they are gone and they need to be added back so as you continue to watch the animation they fade in and out at the appropriate time again.

 

Does this make sense now?

 

Link to comment
Share on other sites

Yeah, those extra details and the new demos helped a lot. Thanks!

 

I'm not a big fan of removing tweens from timelines and adding them back. There isn't anything necessarily wrong with it, I just find it a bit cumbersome.

 

Since the animations of the details only happen under certain circumstances (the timeline is playing on its without user interaction) I prefer to keep those animations out of the timeline. The solution I like for this is to create a function that hides and shows the details. I'll call() that function at certain points in time in the timeline BUT the function will ONLY perform its details-showing tasks if the timeline is NOT jumping around via user interaction.

 

I use a simple boolean I named allowEvents which I switch around at the necessary times. Basically, whenever the user clicks a button I set allowEvents to false, the animation tweens to the proper label, when that is done I set allowEvents back to true and I resume playing the timeline.

 

I think this holds up well in my simplified demo below.

 

  1. Run the demo
  2. Watch animation play
  3. Notice a word like green, red, blue, orange appears as each colored box begins animating
  4. Wait until the orange box is done playing
  5. click the "green" button
  6. watch the animation play super fast in reverse and no text appears until the timeline resumes playing forward

 

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

 

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