Jump to content
Search Community

How to properly time the tweens in the timeline..

Elindo test
Moderator Tag

Recommended Posts

Ok, this might sound silly, but I haven't been able to time the tweens properly.


What would be the values to activate some tweens at the START,  and some tweens at the END from the first tween in the timeline?  The first tween has a duration of 4 seconds from start to end.


I have an example below of 11 tweens. all which should be timed in relation to the start and and the end of the very first tween which has a duration of 4 seconds.... 

tweens 2,3,4, should activate at the same time as the START of tween 1

tweens 5, 6, 7 should activate at the same time as the END of tween 1 

tweens 8,9,10,11 should activate at the START of tween 1 (These are items I want to keep OFF, but are included in this timeline because they might have been activated from previous timelines)



var retract = gsap.timeline({paused:true, overwrite: true});
retract.to(cylrod, {x:0, duration:4, ease: "none"});
retract.to(solb, {opacity:1}, "-=4");
retract.to(bline1, {opacity:1},"-=4");
retract.to(rvarrow, {y:0, ease: "none", duration: 0.1}, "-=4");
retract.to(bline1, {opacity:0}, "+=4");
retract.to(bline2, {opacity:1}, "-=4");
retract.to(rvarrow, {y:-14, ease: "none", duration: 0.1}, "=4");
retract.to (pline1, {opacity:0}, "-=4");
retract.to(aline1, {opacity:0}, "-=4");
retract.to(aline2, {opacity:0}, "-=4");
retract.to(sola, {opacity:0}, "-=4");







See the Pen xxrbWyY by Elindo586 (@Elindo586) on CodePen

Link to comment
Share on other sites



Is there a way to tied the timeline to the START and the END of the first tween?


If I use the fromTo method it seems as if cylrod jumps to the from position regardless of where he might be located.


If I use the the to method and cylrod starts from a ramdon position, then the rest of tweens fall behind thinking cylrod is always starting from the begining.


The "<" is good the start motions in relation to the first tween... but it doesn't do anything to tell the rest of the tweens that the first tween already reached his finished point.. 

var extend = gsap.timeline({paused: true, overwrite:true});
extend.fromTo(cylrod, {x:0, duration:5, ease: "none"}, {x:200, duration:5, ease: "none"}); 
extend.to(pline1, {opacity:0, ease: "none"}, "<");
extend.to(rvarrow, {y:0, duration: 0.1, ease: "none"}, "<");
extend.to(sola, {opacity:1, ease: "none"}, "<");
extend.to(aline1, {opacity:1, ease: "none"}, "<");
extend.to(aline2, {opacity:0, ease: "none"}, "<");
extend.to(aline1, {opacity:0, ease: "none"}, "+=0.1");
extend.to(rvarrow, {y:-14, duration: 0.1, ease: "none"}, "<");
extend.to(aline2, {opacity:1, ease: "none"}, "<");
extend.to(sola, {opacity:0, ease: "none"}, "+=1");
extend.to(aline2, {opacity:0, ease: "none"}, "<");
extend.to (pline1, {opacity:1}, "<");
extend.to (bline1, {opacity:0}, "-=5");
extend.to (bline2, {opacity:0}, "-=5");
extend.to (solb, {opacity:0}, "-=5");



Link to comment
Share on other sites

I read your question a few times and I'm lost. Sorry :)


You'll significantly improve your chances of getting a good answer if you isolate things as much as possible in a minimal demo. You shouldn't need 100 lines of JS just to show the challenge you're struggling with. Just a couple of <div> elements and a timeline or two with minimal tweens is ideal, just to show the concept. Strip out everything you possibly can. 


You also might want to look at this (although since I don't understand your question it may not be relevant here): 


By the way, there's no such thing as overwrite: true on a timeline. That's a tween special property. You can set defaults on a timeline, though, that get passed to all the child tweens.

gsap.timeline({defaults: {overwrite: "auto", ease: "none"}})

That can save you some typing.

  • Like 2
Link to comment
Share on other sites

I was looking at this reference link here:


// Set overwrite on a tween
gsap.to(".line", { x: 200, overwrite: true });

// Set overwrite globally for all tweens
gsap.defaults({ overwrite: true });

// Set overwrite for all tweens in a timeline
const tl = gsap.timeline({ defaults: { overwrite: true } });

Maybe I need to set the overwrite in a difference place than a the begining of the tween. 



Basically seems like the timelines are conflicting each other, and not terminating the movements of the previous timeline.


There are other problems , but it is better to keep them in a separate thread.





Link to comment
Share on other sites

As Jack mentioned, a minimal demo will be best. One div and two buttons should be enough to demonstrate the problem so we can give you the best advice. As I mentioned in your other thread, you may want to look at .fromTo() tweens since you have so many timelines targeting the same elements. 


But really, a simplified demo will be a big help here. Thanks.

  • Like 1
Link to comment
Share on other sites

I tried the fromTo options, but it made the item (cylrod)  jump to x:0 position regardless of what position it would be.  I don't want the cylrod to go to x0  postion everytime the timeline is activated.  I want cylrod to go to x:200 regardless of the initial position.


The timelines are pretty long.  I can try to do a different demo just to deal with the section in question..  but that is going to take me a few days to do that since I will be out,  plus coding time.. 


The short version if we ignore the length of the sequences is...


var extend = gsap.timeline   is controlled by btna.onclick = () => { extend.play(); .....

var retract = gsap.timeline  is controlled by btnb.onclick = () => {retract.play(); ....


When var extend is activated it should stop all the movements of var retract,  the buttons are not really stopping any actions of previous timelines.


The same problem is happening with all the buttons.  They activating their actions, but not stopping the actions of the other timelines. 


btna.onclick = () => {

btnb.onclick = () => {




Link to comment
Share on other sites

I'm still pretty fuzzy on what you're asking here, but here are a few comments in case they're helpful: 

  1. When you set overwrite: true on a tween, that overwriting logic only runs ONCE, immediately when you create the tween. It basically says "find all other tweens of the same target and kill them right now." With overwrite: "auto", it runs once the first time the animation renders and it finds only other active tweens of the same target(s) and kills only the individual conflicting properties. It would be very very bad for performance if it tried to run the overwrite logic every single time that animation rendered/played. We obsess about performance around here because animation is the most performance-sensitive part of UX. It sounds like maybe you're expecting that every time you .play() one timeline, it will kill any other timelines but that is NOT true. 
  2. When something is overwritten, it's dead. Gone. It doesn't come back later. 
  3. The first time a tween renders, it records the start/end values so that it can very quickly interpolate between them. Again, that happens ONCE. It sounds like you might be expecting that to happen every time you play() a timeline. So, for example, if box.x is 0 and then you have a .to(box, {x: 100}) in a timeline, the first time it renders it will record "okay, we're going from 0 to 100. Lock that in". So now every time that timeline plays again, it ALWAYS goes from 0 to 100. However, let's say you set box.x to 200 somewhere else in your code and then you .play() this timeline again - you shouldn't expect it to animate from 200 to 100 (instead of 0 to 100) because it already locked in the starting value of 100. You can .invalidate() a tween/timeline to force it to flush any pre-recorded values and then it'll re-record them the next time it renders. 
  4. If you have multiple timelines that affect the same properties of the same targets, you can easily prevent them from conflicting by calling .pause() on the ones that shouldn't be playing, and .play() the one that should. Again, if you want them to flush any recorded starting values, just call .invalidate(). 

I cannot imagine why it would take days to set up a minimal demo - all we need is the most basic possible illustration. Hopefully that wouldn't take more than 10 minutes. Maybe 2 buttons and 2 timelines with a couple of tweens in each that affect a single <div> or something(?)


We're eager to help and I'm sure that minimal demo will go a long way to allowing us to get you the answer you're looking for. 

  • Like 2
Link to comment
Share on other sites

Yes, I understand about the minimum demo.  I am just getting ready on a trip and won't be near a computer where I can work for a few days.


When I get back I'll read and try to incorporate the .invalidate() option somewhere see how that works. 


I am also using the .pause() option to see if the buttons can pause the action of other timelines while activating their main timeline.. so far it doesn't seem to work for me... surely I must be implementing it wrong since it seems such simple thing to do...


Right now I have 2 problems in this one scratching my head:


1. conflicting timelines on multiple items, as the buttons are not pausing each other actions.

2. The timelines aren't recognizing the random starting position of the main first object to move.. so the timeline always think it is starting for an initial fixed position and that is not always the case.


Bonus problem:

3.  the buttons only seem to work once.


Anyway... these are headaches for some time next week....   I'll try to read some of the .invalidate information.... and I'll also see if I can set up the buttons using javascript......   yes... rewatching some of the Udemy courses if I can :P



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