Jump to content
Search Community

gsap.fromTo() in react with scrollTrigger

Preet Sojitra
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Preet Sojitra
Posted

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

 

  • Solution
Posted

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

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