Jump to content
Search Community

gsap.fromTo() in react with scrollTrigger

Preet Sojitra test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Can anybody guide me regarding how to use `gsap.fromTo( )` in react alongwith scrollTigger?

I have following code:

useEffect(() => {
    gsap.fromTo(
      imgwidCard.current,
      {
        scrollTrigger: {
          trigger: imgwidCard.current,
          scrub: 0.5,
          markers: true,
          start: "top 85%",
        },
      },
      {opacity: 0},
      {opacity: 1}
    )
  })

This is not working, it is giving `opacity:0` to the element but is not changing opacity from 0 to 1.

Any help would be appreciated.

Thank you

 

Link to comment
Share on other sites

  • Solution

Your code is formatted incorrectly. Wrong number of parameters and you put the scrollTrigger in the "from" instead of the "to". 

useEffect(() => {
  gsap.fromTo(imgwidCard.current, {opacity: 0}, {
    opacity: 1, 
    scrollTrigger: {
      trigger: imgwidCard.current,
      scrub: 0.5,
      markers: true,
      start: "top 85%",
    }
  })
}, []);

If you still need help, please provide a minimal demo like in CodeSandbox.

  • 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...