Jump to content
Search Community

How do I nest a Greensock timeline in multiple Greensock timelines?

Wryte test
Moderator Tag

Go to solution Solved by GreenSock,

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

I'm trying to have a timeline be part of multiple timelines in greensock. I guess the what I need to happen is one element needs to animate in both cases but only on or the other needs to animate in each case.

 

Check out the codepen to see what I mean

 

Thanks in advance

See the Pen yJNprY by Wryte (@Wryte) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. It's not entirely clear to me what the end goal is, but a timeline can only have 1 parent.

That means that timeline1 can not be in both timeline2 and timeline3 at the same time.

 

timeline2 and timeline3 can both have similar tweens that animate #two, but if you try running them at the same time you may have some conflicts.

 

In cases like this it is sometimes best just to create the timelines when they are needed instead of making them all when the page loads. 

If we can understand better how these animations are supposed to run and whether or not they respond to human interaction, it will better help us provide a solution.

  • Like 1
Link to comment
Share on other sites

Okay so I've updated the codepen to better match what I am trying to do. I've also made a little progress on the problem based on your suggestion to create the time lines as needed. The problem now is the more I open the popups the more janky the animation.

Link to comment
Share on other sites

  • Solution

It looks to me like a logic issue in the code and the fact that you're using "from()" tweens. Remember, those will always use the CURRENT value (when the tween starts) as the DESTINATION value. In your case, after the first click (well, after you close the popup), the opacity is 0. So the next time you try to do a from() tween, it's animating from opacity:0 (the current value) to opacity:0 (what you passed into the tween). See the problem? But since you're using clearProps at the end, it removes those inline styles and POOF, the element becomes visible because the default opacity is 1. So it seems like it's not animating anything even though GSAP is doing exactly what it's supposed to. 

 

You could just use fromTo() tweens so that you can define both the start and and values. 

//OLD:
  tl.from(shade, 0.5, { opacity: 0, clearProps: "opacity" });
  tl.from(block, 0.5, { opacity: 0, y: -75, clearProps: "opacity,y" });

//NEW: 
  tl.fromTo(shade, 0.5, { opacity: 0}, {opacity:1});
  tl.fromTo(block, 0.5, { opacity: 0, y:-75}, {opacity:1, y: 0 });

You could add the clearProps into the "new" ones above if you want but I'm not sure what the value would be. 

  • Like 3
Link to comment
Share on other sites

It looks to me like a logic issue in the code and the fact that you're using "from()" tweens. Remember, those will always use the CURRENT value (when the tween starts) as the DESTINATION value. In your case, after the first click (well, after you close the popup), the opacity is 0. So the next time you try to do a from() tween, it's animating from opacity:0 (the current value) to opacity:0 (what you passed into the tween). See the problem? But since you're using clearProps at the end, it removes those inline styles and POOF, the element becomes visible because the default opacity is 1. So it seems like it's not animating anything even though GSAP is doing exactly what it's supposed to. 

 

You could just use fromTo() tweens so that you can define both the start and and values. 

//OLD:
  tl.from(shade, 0.5, { opacity: 0, clearProps: "opacity" });
  tl.from(block, 0.5, { opacity: 0, y: -75, clearProps: "opacity,y" });

//NEW: 
  tl.fromTo(shade, 0.5, { opacity: 0}, {opacity:1});
  tl.fromTo(block, 0.5, { opacity: 0, y:-75}, {opacity:1, y: 0 });

You could add the clearProps into the "new" ones above if you want but I'm not sure what the value would be. 

 

I guess I was expecting clearProps to clear the props in both the forward and reverse complete scenarios but this works

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