[How to trigger setState with gsap?]

Hi @Rodrigo

Update : One more question though, if I remove the snap property, does it cause to setState to trigger 1000's of time and will there be any performance hit.

should I set the snap to 0.1?

[How to trigger setState with gsap?]

Hi @Rodrigo and @NickWoodward, sorry that I didn't mentioned the context, actually I'm the state value to change the opacity of my object inside of react three fiber. Right now I can only use setState to change the value to either 0 or 1 making it on or off. 

 

Thanks for the StackBlitz demo, that's exactly what I needed.

[How to trigger setState with gsap?]

Hi, I'm trying to know if there's a way in which I can animate the number inside of my react state as mentioned below with gsap

const [state, setState] = useState(0);

Any suggestion on how to use the `setState` property inside of gsap.to() ?

[Failed to execute 'scrollTo' on 'Window': The provided value is not of type 'ScrollToOptions'.]

Oh that's just because of the boiler plate code generated from https://gltf.pmnd.rs which generates the react three fiber code based on your gltf file. Later I've added my own code in it.

 

Once again, really thanks and I truly appreciate it.

[Failed to execute 'scrollTo' on 'Window': The provided value is not of type 'ScrollToOptions'.]

First of all I really want to thanks @Rodrigo and Jack for answering, greensock's forum does seem more vibrant than most other places I've seen online. I was indeed using gsap context in my `useEffect` but didn't included it here as my code is bit convoluted. So thought about showing specific bits of it. One request though, it'd be better if the scrollTo plugin mentioned to register it kinda like scrollTrigger. Now I'm able to make it work

One more question, I understand why should I use gsap.ctx but is it always necessary? I'm also using gsap to animate my gltf animation in threejs  inside of eventlistner in react and there seems not to have any weird behavior?

https://github.com/experientia-in/experientia.in/blob/react/src/nasa-black-marble/comp/earth.jsx#L112-L117

[Failed to execute 'scrollTo' on 'Window': The provided value is not of type 'ScrollToOptions'.]

Hi @Cassie I'm following this article to implement smooth scroll on a eventlistener

 

 

but I'm getting following error in react even I'm using gsap within `useEffect` and I've initialised scrolltrigger. Any suggestion on what should I do?

 

Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': The provided value is not of type 'ScrollToOptions'.
    at PropTween2._setterFunc2 [as set] (gsap-core.js:3679:17)
    at PropTween2._renderComplexString2 [as r] (gsap-core.js:3716:8)
    at Tween2.render3 [as render] (gsap-core.js:3443:12)
    at _lazyRender2 (gsap-core.js:187:36)
    at _lazySafeRender2 (gsap-core.js:193:25)
    at Array.updateRoot (gsap-core.js:2686:7)
    at _tick2 (gsap-core.js:1309:20)

 

Here's what my code roughly looks like

```

import gsap from "gsap";

import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

 

useEffect(() => {

 gsap.registerPlugin(ScrollTrigger);

gsap.to(

        ".scroll_footer_section",

        {

          duration: 0.2,

          bottom: 50,

          ease: "Power4.out",

        },

        "<0.5"

      );

      gsap.to(window, {duration: 2, scrollTo: 400}, "<0.5");

})