How to create consecutive pins with different timelines

[GRITz]

I am creating an animation where the viewpoint moves deeper as you scroll.

 

However, there is a white margin while scrolling until the timeline pin is disabled, and the next timeline pin is enabled.

Can I move the next timeline to the top of the page the moment the pin is disabled to make it appear as if it is continuously moving backward?

 

Also, if you click on the "TIMELINE2" link after clicking on the "TIMELINE3" link, the content disappears.

 

I would appreciate it if you could advise me on how to resolve this issue.

See the Pen NWodxEe by gritzweb (@gritzweb) on CodePen

[mvaneijgen]

Hi @GRITz welcome to the forum!

 

Your pen seems really complicated for what is going on. You're mixing ScrollTrigger (which is for animating things on scroll), but you also have the Observer plugin active to negate everything that ScrollTrigger is doing. I would pick one or the other, but not try to combine them. 

• ScrollTrigger is for animating something based on the scroll position 
• The Observer plugin is to watch for specific events (eg scroll) and do logic based on that. 

These are two different things and I would pick the one that suits your project. 

 

Everthing in the GSAP eco system is based on animations, so before doing anything fancy I would focus on that. I would just build one timeline and hook that up to your desired scroll position. Your current solution has ScrollTriggers up on ScrollTriggers, which will be really hard to manage (or even figure out what is going on), you hardly need more than one ScrollTrigger everything for what I can see in your demo can all be done with one ScrollTrigger (or Oberser plugin)  and one timeline.

 

I think you want the Observer plugin, seeing that you are disabling everything that has to do with scroll in your CSS. Check out the demo below (here also the scroll is disabled, but on user input scroll the animation goes to the next slide, this does something fancy by creating the animation on scroll, but you could easily add labels to your timeline and then just tween to the next or previous labels.

 

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

 

I was trying to add your door animation to just one timeline, but I can't figure out where they are or how they work 🙃, but that is how I would go about this project, just create the animation at first, don't worry about anything scroll related and when that animation is perfect I would pick one of the scroll solutions (again I think you want the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/) and then let that tool control your one timeline. 

 

Hope it helps and happy tweening! 

 

See the Pen xxMgVaY?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

[GRITz]

Hi @mvaneijgen,
Your prompt advice made me very happy, and I really appreciate it!

 

I found a problem when using the ScrollTrigger and Observer plugins together, so I attempted to use the Observer plugin to manipulate a single timeline.

 

I have uploaded a new demo to CodePen:

See the Pen bGzgQgp by gritzweb (@gritzweb) on CodePen

 

I've added "addLabel("endAnime1")" to "addLabel("endAnime4")" in the timeline. My intention is to "timeline.pause()" at this point and scroll forward to the next section.

 

However, it seems that "timeline.seek('endOpening1')" and "timeline.play()" are not behaving as expected.

 

Could you please advise me on how to control the timeline? Your assistance would be greatly appreciated.

[mvaneijgen]

Hi @GRITz Thanks this is a much more easy to digest demo. 

 

I've restructured your HTML and CSS to how I would build it. I've stacked all your sections right on top of each other with CSS. I've removed fixed elements from your CSS because I find it easer to let GSAP handle that if needed. I've copied your numbers and add them to each section. 

 

And then I just focused on the animation at hand. I've changed some of your .fromTo() to .from() or .to(), because GSAP is smart and it will just tween to the browses default if you do a .from() 

 

See the Pen LYqxMgR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Then I've changed the Observer plugin to tween to the next or previous label in the the timeline. Hope it helps and happy tweening! 

 

See the Pen GRzrPPy?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[GRITz]

Hi @mvaneijgen

Thank you for your clear and detailed answer!
You are a lifesaver for teaching me so kindly!

 

I am amazed at the awesomeness of GSAP, which allows me to implement what I want to do so simply!

 

I will continue to use this wonderful animation library!