[ScrollTrigger Pin Spacer creates additional height at the bottom]

@Rodrigo thanks for your reply.

In no way I'm posting so you can fiddle with my css, I'm only hoping that something might be extremely more obvious to others than me.

 

You' re right about the css, It looks like the height 100% that I used in the absolute positioned pin element caused the extra height. I changed that to bottom: 0 and it worked as expected. 

 

See the Pen QWPmLwV by 44db (@44db) on CodePen

 

Thanks for all your help.

[ScrollTrigger Pin Spacer creates additional height at the bottom]

On 4/6/2024 at 4:52 PM, Rodrigo said:

Hi, I'm on my phone now but for what I can see in your code Scrolltrigger is doing what is supposed to.

 

You can try with the pinSpacing config option set to false. From the Scrolltrigger docs:

pinSpacing
Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false.

 

Hopefully this helps

Happy Tweening!

Hello Rodrigo,

 

Thanks for the reply. Setting pinSpacing to false makes no difference.

Anymore ideas. If you find the time please have a look on the shared codepen to get an idea of the situation.

 

Thank you so much

Yannis

 

[ScrollTrigger Pin Spacer creates additional height at the bottom]

Hello,

 

I have a simple implementation of ScrollTrigger that pins a heading while scrolling until the next one comes in.

All nice and good but I'm getting extra space at the bottom.

Can someone help me please.

 

Thank you!

See the Pen VwNxwJq by 44db (@44db) on CodePen

[Hover event that triggers different animation on target and the rest of the elements.]

Thank you so much @PointC & @GreenSock,

 

Although I consider both replies as the "Marked Solution" I will mark the first one as it solves the issue with the play once.

Regarding useGSAP, that is a great helper indeed and the documented examples really help point out the scenarios that it tries to solve.

 

 

Thanks again for the prompt replies guys.

Yannis

 

[Hover event that triggers different animation on target and the rest of the elements.]

Hello

 

I have a list of links and wanted to create a hover effect that animates all elements in some way (ie reduce opacity) but do something different on the hovered element (ie animate a contained span). I have created a pen with a React functional component that uses gsap.

In essence I am doing the following:

- Create 2 lists of elements (hovered element, non hovered elements)

- Create 2 gsap timelines 

- Trigger those timelines on mouseover and on mouseleave.

 

I have 1 problem and 1 question.

Question: am I using best practices? I have wrapped the code inside a gsap context and I'm reverting the context when the component lifecycle ends.

However I have 2 eventlisteners that I am not sure if thery are removed when lifecycle of component ends.

 

Problem: animation only happens once for each element. How can i persist the timeline effects?

 

Any help and suggestions would be greatly appreciated.

 

Thank you

See the Pen mdoOLjZ by 44db (@44db) on CodePen

[Pin element to top]

Yes that was it.

Thank you so much

[Pin element to top]

Hello,

 

I'm trying to get my head around on how to pin a div element to top using ScrollTrigger.

Pin it when element's top side reaches the top of the browser viewport.

 

Thank you,

Yannis

See the Pen ZEVjWYJ by 44db (@44db) on CodePen