Jump to content
Search Community

Is there any way to get self.progress to use in animation?(ScrollTrigger)

Yuanyuanya test
Moderator Tag

Recommended Posts

Hi guys

I have a trouble  here

useEffect(()=>{
        gsap.to([splidtext.current],{
            scrollTrigger:{
                trigger:[splidtext.current],
                markers:true,
                start:"top 90%",
                end:'bottom 10%',
                toggleActions:'restart null reverse null',
                onUpdate:(self)=>console.log("update",self.progress.toFixed(3),splidtext.current.scrollWidth,splidtext.current.offsetWidth)
            },
            duration:10,
            x:self.process*splidtext.current.offsetWidth  //the problem is self.process is undefined 
        })

    },[])

I can get the scrollTrigger progress value as you can see in onUpdate.

But how can i get self.process in x:blahblah so that i can use it to scoll.

Thanks a lot!!!   

Link to comment
Share on other sites

Are you wanting to literally update the destination "x" value on every single scroll event? I'm curious why you'd want to do that. It looks to me like a problem you might be engineering for the wrong way. 

 

Why wouldn't you just animate to x: splidtext.current.offsetWidth and set scrub: true on the scrollTrigger? I assume that'd give you the effect you're after here if I understand it correctly. And if the offsetWidth might change when the screen resizes, you can make it a function-based value and set invalidateOnRefresh: true:

 

useEffect(()=>{
  gsap.to(splidtext.current,{
    scrollTrigger:{
      trigger:splidtext.current,
      markers:true,
      start:"top 90%",
      end:'bottom 10%',
      scrub: true,
      invalidateOnRefresh: true
    },
    x: () => splidtext.current.offsetWidth
  })

},[])

Does that help? 

  • Thanks 1
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.
×
×
  • Create New...