Is it possible to set the start of a timeline to end of other timeline

[zuppa]

So, I have a timeline, and the only thing I want to do is to set the start to "top (ENDOFOTHERTIMELINE)",

then the timeline will trigger when the other one finishes

[GreenSock]

I'm a bit confused by your question because initially I thought you were just talking about normal playback of timelines, but you mention start: "top (ENDOFOTHERTIMELINE)" which makes it sound like you're trying to set up ScrollTriggers back-to-back. Can you please provide a minimal demo, like a CodePen that illustrates the issue? Almost anything is possible, but it's very difficult to answer your question in a very generic sense without any context or clarity. 

[zuppa]

Sorry,
Basically, all i want is to trigger one timeline at the end of another, 
The element that triggers my second timeline, is already on top top of window, because it has top:-100%; so it will fade in above the effect of the previous timeline, I want them to be separated because the first timeline may or may not exist

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[zuppa]

when the element1 exists, i want the trigger of the timeline2 for element2 to be the end of timeline1 

See the Pen oNdrMmX by msmzuppa (@msmzuppa) on CodePen

 

[Rodrigo]

Hi,

 

I'm not completely sure about what you want to do. Hopefully this example is what you need:

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

 

Basically there are a few issues in your setup. The red section has an absolute position and also you set a top and left positions in it, which puts the element above the blue one and also throws off the calculations ScrollTrigger does.

 

Finally there are a few things related with some function calls in jQuery that I also removed because there are not needed to create the ScrollTrigger animations.

 

Let us know if you have more questions.

 

Happy Tweening!