ScrollTrigger end position and pinning elements

[classicdocs]

Hi all,

 

I have started working with GSAP library and especially ScrollTrigger plugin and it's amazing. I have some requirements for animating text, but I'm struggling with it for few weeks and now I need help.

 

In minimal demo you can see that I have 2 sections. Basically what I need is to animate title, text and button.

The flow should be like this:

1. Title1, Text1 and StaticButton from section1 should come on screen in the same time.

2. When the user scrolls down, Text 2 should replace Text1, but Title1 and static button should remain in its place.

3. All content from section1 should be gone when section2 enters.

 

The main problem I have is that I don't understand how should I pin elements for some amount of hight (like the animation is visible for 200vh) and still to have synchronized animations ?

 

Here is the little demo how should it looks:

https://drive.google.com/file/d/1qK53e4rurrNUAdT5pyoOWzHOGmAWVLTr/view?usp=sharing

 

See the Pen JjvbaoO by classicdocs98 (@classicdocs98) on CodePen

[Cassie]

Hi there!

 

So the best way to approach this is to leave ScrollTrigger aside for now and just create the animation on a timeline.

 

Position all your elements absolutely using CSS and then work on getting them to fade and move in and out. When it looks right, you can hook it up to scrollTrigger. I'll happily guide you as you go through the process.

 

First up - a timeline! Where are you with your GSAP knowledge? Do you know about timelines and the position parameter?

[classicdocs]

Hi Cassie,

 

Thanks on reply.

I didn't know that I can use timeline here. I was stuck with ScrollTrigger...  

Here is a new demo with timeline: 

See the Pen BaxpzWx by classicdocs98 (@classicdocs98) on CodePen

 

What should be the next steps ? I need to have title presented through whole section and subtitles with various heights (Ex: subtitle1: 100vh, subtitle2: 400vh, subtitle3: 200vh)

[Cassie]

Great job!

So then you can add a scrollTrigger to that timeline. Something like this?

See the Pen MWGJVVN?editors=1010 by GreenSock (@GreenSock) on CodePen

[classicdocs]

That is what I need. Thanks