Scroll Trigger not animating element unless I add scrub

[code stan]

ScrollTrigger not animating the element ".profile__container",

unless I add scrub.

I want the scrollTrigger to element without the scrub.

 

Is there something I'm doing wrong.

    useEffect(()=>{
      const profileAboutTexts = document.querySelectorAll(".profile__about p");
    //   const profileContainer = document.querySelector(".profile__container")
    //   const about = aboutRef.current
      profileAboutTexts.forEach(text=>{
        new SplitType(text, { types: 'lines, char' })
      })

      const anim = {
        y: 130,
        transform: "rotateZ(25deg)",
        opacity: 0,
        stagger: {
            amount: .8
        },
      }
      
      const ctx = gsap.context(()=>{
        tl.current = gsap.timeline();

        
        tl.current.from(".profile__about p:first-child .char", {delay: 2, duration: 1.3, ...anim})
        tl.current.from(".profile__about p:last-child .char", 
            {...anim, 
                    scrollTrigger: {
                    trigger: ".profile__container",
                    start: "top 40%",
                    end: "top 20%",
                    markers: true,
                }
            }
            
        )

      }, aboutRef)

      return ()=> {
        ctx.revert()
      }
    }, [])

 

 

 

[GSAP Helper]

It's very difficult to troubleshoot without a minimal demo; the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[code stan]

On 1/7/2024 at 6:32 PM, GSAP Helper said:

It's very difficult to troubleshoot without a minimal demo; the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Thank you for the feedback, here's the minimal demo  you requested

[GreenSock]

I noticed several problems: 

1. You set the scope on your gsap.context() to aboutRef...but there was no aboutRef element! So your selector text couldn't find anything (invalid scope). 
2. You nested a ScrollTrigger inside a tween that's in a timeline. The playhead can't be controlled by both the parent timeline and the scroll position. So never nest ScrollTriggers like that - just apply it to an individual tween (that's not in a timeline) or on the timeline itself.
3. I noticed that you set the trigger to be ".profile__about" with a start of "top 40%" but since that element already starts all the ay up at the top, I wonder if maybe you intended to use '.profile__about p:last-child' as the trigger? I'm guessing.
4. I'd recommend never using the "transform" property directly, like transform: "rotateZ(25deg)". It's faster and more reliable to use the components like rotation, x, y, scaleX, scaleY, etc. So in this case, rotation: 25
5. Good job using gsap.context(), but we recently released a useGSAP() hook that makes it even easier in React. 
6. I don't see any reason you need to create a ref for the timeline since you're not trying to access it anywhere outside the hook. So you can simplify things a bit. 

I wonder if you were trying to do something more like this?: 

https://stackblitz.com/edit/react-7yqfay?file=src%2FApp.js,src%2Fstyle.css

[code stan]

Hmm, Thank you, yeah something like.
Lots of loop holes in my code, not what I intended, the take from this is 3 and 4.

Thank you so much