gsap.fromTo() in react with scrollTrigger

[Preet Sojitra 0 Likes (Newbie)]

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

 

[GreenSock 18,231 Likes (Superhero)]

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.