Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Timeline added to master, not in sequence

Recommended Posts

Hi folks, 


I'v been going around in circles for a while now, so thought I'd better ask for some help.


Okay, so I'm using opacity to fade in and out various child elements of an SVG and thusly animate a stickman. I have several timelines nested inside a master timeline and for now a mouseenter event listener to play the sequence. It's been working mostly as I've anticipated but for some strange behaviour relating to the fourth and last timelines. 




1. The forth timeline animates through 'frames' of a morphing shadow, but for some reason the first frame ('.shadow-morph-1') appears at the very start of the master timeline. For some reason I was able to remedy this by putting a delay of .001 as a default on the child timeline, but I'm sure this isn't ideal. 


2. The last timeline seems to have the same issue, its first 'frame' (stickman-r-1) is visible at the start of the parent timeline, and also when it completes stickman-9 remains visible when this timeline should have set its opacity to 0. 


I can see in the chrome inspector that these elements have their opacity set inline, to 1 when the page loads (stylesheet shows 0 for opacity), but I have checked the element in the code editor (VSCode) and there is no style attribute, so this must be being set in the timeline.




First Timeline

name: taDa()

desc: 'Hands on hips' through to 'pointing at bag'

stickman-1 through to stickman-9 (and shadow-1 to shadow-9 )


Fourth Timeline

name: shadowMorph() 

desc: shadow becomes a circle

selectors: shadow-9 to shadow-morph-1 through to shadow-morph-4


Last Timeline:

name: toRest() 

desc: 'Pointing at bag' through to 'hands on hips'

stickman-9 to stickman-r-1 and stickman-r-2, to stickman-1


I'm sorry the it's a bit of a complex animation. I've been trying to shorten it and make it simpler, but I think that will just make it more confusing. That said any suggestions on how I can make it easier to follow are very welcome.


Thanks in advance for any offerings. 




See the Pen mdXdVOd?editors=0010 by saulnewbury (@saulnewbury) on CodePen

Link to comment
Share on other sites

If the above is a bit much, I think this gets to the heart of it...

So, I've added, back in, the delay for the first tween  (0.1 this time) of the shadowMorph timeline (which sets the opacity of the current shadow [shadow-9] to 0, before setting opacity to 1 for the proceeding element), so now you can see it working properly. And I've done the same for the last timeline which has fixed that one too. 


I'm just not sure why this has worked. I thought a delay on the first tween of a timeline would be unnecessary since you can determine its position from the master timeline?

Link to comment
Share on other sites

Hi @Vivodionisio


Welcome to the forum.


There is just far too much to look at there. If you're having trouble with just the shadow morph timeline, trim everything down to just that piece. Eliminating the extra pieces in the SVG would be very helpful too. We just need a minimal demo to see the issure.


That being said, I'd recommend .set() over the zero duration tweens.



Instead of a delay on some of the tweens in the timelines, you'd benefit by looking at the position parameter.

I'm not sure as I can't dive too deeply into all that code, but you may also want to look at immediateRender.


If you can trim it down to just the necessary bits, I'm confident we can point you in the right direction.


Happy tweening and welcome aboard.



  • Like 4
Link to comment
Share on other sites

Hi @PointC,


Thank's for you response! I've done some culling of the unnecessary stuff, including elements inside the SVG.  A good sleep helped!

I tried taking the bag away too, but it changed the symptoms so I've left it in. Also I have left the delay of 0.1 on the first tween of both the shadowMorph() and toRest() timelines, so currently the animation works properly. But if you take away these delay properties the symptom for each appear.   


I've been trying to work with position on the master, but didn't consider it for the child timelines for some reason, so I'll have a look at that and read through the timeline tip, and I'll check out the other links too. Thanks!

Link to comment
Share on other sites

Thanks for the reduced demo. I can see what's happening now. As I mentioned in my first reply, this may be an immediateRender situation and that is indeed the case. You're using a whole bunch of zero duration tweens so you can eliminate the delay on the first tween in each timeline by adding this to your defaults.


function taDa() {
  const tl = gsap.timeline({
    defaults: { duration: 0, immediateRender:false }

I forked your pen and made a couple modifications to the taDa() function to give you another option for this animation. In that function, stickman and shadow 2-8 are identical so those tweens are created in a loop and everything comes from the defaults so we don't even need anything in the vars for those. I used a tiny duration and took advantage of yoyo since you're flipping opacity to 1 and then right back to 0.


The cool thing about doing it this way is the repeatDelay in the defaults. I set it to 0.1, but you can increase or decrease that for a different feel to the animation. Changing it to 0.2 creates an old school flip-book style look. Changing it to something around 0.05 will create a much more fluid animation.


I commented out the additional child timelines on the master and had the animation restart on hover. 


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


I think you can take advantage of some loops in the other functions too. You can also use a yoyo tween for the bag wiggle.


Hopefully that helps. Happy tweening.


  • Like 3
Link to comment
Share on other sites

Hi @PointC,


Setting immediate render to false has worked a treat. But I’m confused... in the docs (https://greensock.com/docs/v3/GSAP/Tween) it says the default for to() tweens is already false. Is this something that was changed recently, or have I missed something?


I really appreciate your hints and the demo. I’ll definitely implement these.


Thank you so much! :) 

Link to comment
Share on other sites

20 minutes ago, Vivodionisio said:

Setting immediate render to false has worked a treat. But I’m confused... in the docs (https://greensock.com/docs/v3/GSAP/Tween) it says the default for to() tweens is already false


It is, but you have a bunch of weird stuff going on in your pen. Like using a 0 duration tween .to() when it would be better to use  .set().



And the first 0 duration tween in a timeline, i.e. the first .set() is going to render immediately.


  • Like 2
Link to comment
Share on other sites

Hi @OSUblake, thanks for taking a look. It'll be great to get this working optimally, so really glad for the feedback!

Link to comment
Share on other sites

  • 3 weeks later...

Hi @PointC, @OSUblake ,


I’ve finally been able to come back to the stickman. I’ve been trying to implement your suggestions and have a couple of versions, one where I have swapped out ‘to’ tweens for ‘set’ and used the position parameter instead of delay, and this all works perfectly. And one where I've tried using a loop for identical tweens, but for some reason it’s causing a flicker midway through the animation. It happens a bit randomly, sometimes rarely and sometimes often which isn't very helpful for demo purposes. But I wondered if there might be an obvious reason for it, even if you don't happen to see it? 


Also I was wondering: if a ‘set’ tween has no duration or delay, as in the case of tweens for stickman 4 to 8 in the first implementation (with no loop), how is it these tweens don’t just happen simultaneously?


Thanks in advance for any feedback.


See the Pen GRQMxwr by saulnewbury (@saulnewbury) on CodePen






Link to comment
Share on other sites

6 hours ago, Vivodionisio said:

was wondering: if a ‘set’ tween has no duration or delay, as in the case of tweens for stickman 4 to 8 in the first implementation (with no loop)

Correct - a .set() is just a zero-duration tween. So if you have a bunch of .set() calls in a row and you're not spacing them out using the position parameter, they will all happen at the same spot on the timeline. 


If you need more help, it would definitely be good to simplify your demo as much as you possibly can to only show the absolutely essential parts to demonstrate the issue. A few colored <div> elements should be adequate. 

  • Like 2
Link to comment
Share on other sites

Jack beat me to it, but yeah - those sets are firing at the same time. They may not seem like it since you have that 0.3 delay on the timeline and some other position parameters on the timeline with all the sets. 


As far as flicker goes, I didn't see any. 🤷‍♂️


Good luck.



  • Like 2
Link to comment
Share on other sites

Hi @PointC and @GreenSock,


I'm going to live with the occasional flicker. Many thanks for taking a look and the clarification!



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.