[Is there anyway to add delay to scrollTrigger?]

I want to add delay to scrollTrigger, is there anyway to do so?

 

Here's code:

 

useEffect(() => {

    gsap.to(changeBg.current, {

      scrollTrigger: {

        trigger: changeBg.current,

        markers: true,

        scrub: 0.5,

        start: "top 10%",

        end: "bottom 90%",

      },

      backgroundColor: "black",

    })

  })

 

I don't want to apply this animation as soon as it triggers, but instead want to apply after some time. Can I do that?

[gsap.fromTo() in react with scrollTrigger]

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