Pin Elements in pinned horizontally Scrolling

[DK7]

Hi,

I'm still new to the great topic of GSAP and am currently trying out the options a bit.

I don't quite understand the topic with the pins and hope you can help me.

 

In an example I have the horizontal scrolling. That also works wonderfully. But now I want to place a text element with several words in the 2nd slide. When entering the slide, only the first word should be legible. If you scroll further, the next word should be displayed for each new slide.

The text element must therefore be fixed from slide 2 and remain in place and expand across all other slides.

 

Is that even possible? I've been trying everything I can think of for a week now. Change parameters, CSS and JS code but it just doesn't work.

 

Thank you very much for help   

See the Pen zYRqeYo by dkx (@dkx) on CodePen

[akapowl]

Hello @DK7 - welcome to the GreenSock forums.

 

As the docs state wih regard to containerAnimation, pinning things in this scenario will not be possible

 

containerAnimation

Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling [...] Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger.

 

 

However what you could do as a workaround, is counter-tween the x of the heading to the right for the same amount that the container is being tweened to the left - you will need to calculate that amount with regard to the point of entry of this fake-pinning-tween and how much of the scrolling-distance will be left - which would then nullify the movement and thus keep it in position. Sort of like this:

 

See the Pen BaYKMrB by akapowl (@akapowl) on CodePen

 

 

With regard to the fading-in of words on scroll: 

These forums can not offer custom-code solutions for all sorts of effects, but if you get started with that yourself and run into any issues, we will be glad to point you into the right direction. Best create a new thread for any seperate specific questions then.

 

What may be helpful for splitting the text into seperate words in the first place, that you can then set up STs for to tween on to your liking, is the SplitText Plugin. Good luck and happy tweening!

 

[DK7]

24 minutes ago, akapowl said:

Hello @DK7 - welcome to the GreenSock forums.

 

As the docs state wih regard to containerAnimation, pinning things in this scenario will not be possible

 

containerAnimation

Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling [...] Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger.

 

 

However what you could do as a workaround, is counter-tween the x of the heading to the right for the same amount that the container is being tweened to the left - you will need to calculate that amount with regard to the point of entry of this fake-pinning-tween and how much of the scrolling-distance will be left - which would then nullify the movement and thus keep it in position. Sort of like this:

 

 

 

 

 

With regard to the fading-in of words on scroll: 

These forums can not offer custom-code solutions for all sorts of effects, but if you get started with that yourself and run into any issues, we will be glad to point you into the right direction. Best create a new thread for any seperate specific questions then.

 

What may be helpful for splitting the text into seperate words in the first place, that you can then set up STs for to tween on to your liking, is the SplitText Plugin. Good luck and happy tweening!

 

@akapowl

 

Hi akapowl,

 

thanks a lot for your quick help. You are really super fast here in the forum.

 

Your example Codepen helps me a lot, that's exactly what I need to be able to continue. Thank you very much!

 

I'll take a look at the SplitText plugin. I wanted to build the animation using individual span elements within the h1 element. I already know how I'm going to do it, but my wording was just wrong. Of course, I didn't want you to provide any code for this. It was important that I could understand how to pin elements in GSAP

 

Thanks again very much and have a nice day !