willdzoan31

Hi everyone, hope you can help me with this. I have the code below 'use client' import React, { useCallback, useEffect, useRef, useState } from 'react' import { Observer } from 'gsap-trial/Observer' import gsap from '@/utils/gsap' type Props = {} const TestPage = (props: Props) => { const [test, setTest] = useState<number>(0) const testFunc = () => { console.log(test) let tl = gsap.timeline({ defaults: { duration: 2.1, ease: "power3.inOut" }, onComplete: () => { setTest(prev => prev + 1) } }) } useEffect(() => { Observer.create({ target: window, type: "wheel,touch,scroll,pointer", onUp: () => testFunc(), // Mouse down onDown: () => testFunc(), // Mouse up wheelSpeed: -1 }) }, []) useEffect(() => { console.log(test) }, [test]) return ( <div className='h-screen bg-black'>TestPage</div> ) } export default TestPage The problem with this code is that although the state is updated whenever the testFunc is called, the console.log(test) inside the testFunc always returns 0. Can someone help me explain why this happened?

you just saved me from hours of misery Thanks Jack!

I've having trouble understand why this animation keeps producing strange behavior (The orange panel kinda disappear when it start animating). All of the code I copied from gsap codepen and tried it in a React app. Can anybody help me with this? https://codesandbox.io/s/competent-snow-36uyp5?file=/src/App.js

So in a React application like this for example: const [state, setState] = useState(0) the state can only be changed/updated via the setState(value). And in your example, you're changing the value directly, which won't work in a React application I believe. So I'm just curious, is there anyway for me to call the setState(value) during that?

Hmm that's interesting! So can I change react state with Tween like you mentioned above?

Thank you @GreenSock, I didn't know you can increase the z value like that. Will try that one out! And for the second part that you talked about, I've setup my container to have 300vh and my app is 100vh (#app is inside the #appContainer), so it animates the way I expected

I have a piece of code like this: tl.current = gsap.timeline({ scrollTrigger: { trigger: "#appContainer", start: "top top", end: "bottom bottom", pin: "#app", srub: 1, onUpdate: (e) => { if (e.direction === 1) { for (let index in elements.children) { let mesh = elements.children[index] let position = mesh.position position.z += 0.05 * e.progress } } else { for (let index in elements.children) { let mesh = elements.children[index] let position = mesh.position position.z -= 0.05 * e.progress } } } } }) Basically what I'm trying to do is animate an object inside a threejs scene during scrolling, 2 ifs to make that object return to the normal position when scroll up. But I notice that whenever I console.log the e.progress value, it's not the same (might be because of debounce or throttle?), especially when I scroll fast. Can you guys help me to see if there's a better way to do it? Essentially I want that value of position.z to be the same as starting when the user scroll up.

Oh nvm, I got it. Thank you @Cassie, you're a hero!

So in my case, I have the div on the right (it's the content for each of the div on the left), it's all have style of display: none right now. Whenever I add the "active" class to the left, it will also add the "active" on the right (which will remove the display: none for that div)

Thank you so much for the demo. Last question, can I toggle multiple class at the same time? Like have another sections array and add the class to it?

Hey @Cassie, I've able to do what I want using onUpdate on the timeline (not the best way I know ), but haven't figured out a way to progress the timeline when click on the element on the left. Seems like the func tl.progress(...) doesn't do anything for me.

Hi @Cassie, thank you for getting back to me. I will dive deeper into the docs then

I've setup my codesandbox like this: https://codesandbox.io/s/adoring-panna-c6liiw?file=/src/styles.css:36977-36980 I want to add an animation that when you scroll down, it will pin the table to the center, and it will add/remove class to the left column accordingly to give a feel like you switching tab while scrolling. So for my setup, I want it to add class "element-active" to the div with the class ".element-tab-title". Can anyone point me to the right direction? I'm literally don't have any ideas how to achieve this effect. Note: The id for all the div on the left would be one, two, three, four, five. These are the elements that I want to add/remove class "element-active"

What I want to achieve is like this website: https://dxc.com/us/en Basically when you scroll to that section, the one on the left will be fixed, while you keep scrolling, it will scroll the section on the right. I've tried to pin the left section, but somehow it always produce strange behavior Codesandbox: https://codesandbox.io/s/busy-sky-6pjo3o?file=/src/App.js

Hi @PointC, thank you so much for the advice. You can find my demo in this codesandbox: https://codesandbox.io/s/unruffled-bush-zvjo70?file=/pages/index.js You might notice when you first scroll down, the words get smaller a bit before scaling up.