[ScrollTrigger end position and pinning elements]

That is what I need. Thanks  

[ScrollTrigger end position and pinning elements]

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)

[ScrollTrigger end position and pinning elements]

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