Jump to content


There is a problem with the pin function of scrollTrigger.

Go to solution Solved by OSUblake,

Recommended Posts

My original goal is to scroll down, and the LOREM IPSUM text appears in the middle, and three images go up above it.
At first, the LOREM IPSUM text was fixed well at the top by pin: "ID NAME" in scrollTrigger.
By the way, when I added a code with the smooth scroll function, there was a bug like this.

The LOREM IPSUM text is not fixed and goes down the screen.
The code with the smooth scroll function is the code located at https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy().
This is Demo (Native ScrollTrigger).

The code I entered starts with this code, and all of the above codes are Demo (Native ScrollTrigger) codes provided by GSAP.

It comes out a little under two-thirds.


// scroll Trigger
// gsap.registerPlugin(ScrollTrigger);

let text_animation_02 = gsap.timeline({
    trigger: "#L-path", start: "top 20%", endTrigger: "#image_last", end: "bottom 80%", markers: true, pin: "#text_animation_2", ease: "power2.easeOut", id: "1st"

To make the code as simple as possible, I erase all of the top and upload it.
Originally, there are other texts above the LOREM IPSUM text, so the LOREM IPSUM text should not appear from the beginning.
If I change it to "position: fixed", the LOREM IPSUM text appears from the beginning, so it doesn't work well.

(All svg-related codes in HTML files are text animation-related codes, so you can ignore them.)

Please help me.

And I have another question. Is it recommended that I designate the trigger, start, and end of the scroll trigger?
I wonder if it's a difficult way for others to understand if they collaborate with others.
If there is a recommended way, please let me know with a simple example.

thank you.

See the Pen bGYYNQG by goodcontext (@goodcontext) on CodePen

Link to comment
Share on other sites

Hi goodcontext,


I've read your question several time, but I'm not sure what you are asking, and your demo doesn't help either. Can you make a simpler demo, like with just a couple colored boxes so easier to understand. Thanks!


1 hour ago, goodcontext said:

If there is a recommended way, please let me know with a simple example.


There is no recommended way. I would do what makes the most sense to you. I usually don't define the start and end values if they aren't needed.


  • Like 1
Link to comment
Share on other sites

I heard what you said and found the answer while making the code simpler.
The problem was that the code imported from GSAP was pasted onto the code I made.
It's working well because I pasted it under the code I made.
Thank you so much.


See the Pen YzEYeEB by goodcontext (@goodcontext) on CodePen

Link to comment
Share on other sites

  • Solution

Oh, that's a very interesting use case you are doing. The reason for that is that after calling smoothScroll, it changes the default scroller on around line 85, so any scroll triggers created after that call with be set to use that scroller.


ScrollTrigger.defaults({ scroller: content });


  • Like 1
Link to comment
Share on other sites

Thank you for the detailed explanation.
Thanks to you, I solved it.
I didn't even know this and was just looking at the CSS.

Have a nice day.

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.