Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DK7

Pin Elements in pinned horizontally Scrolling

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

 

  • Like 2
Link to comment
Share on other sites

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 !

 

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×