Jump to content
Search Community

willdzoan31

Members

  • Posts

    16

  • Joined

  • Last visited

 Content Type 

Posts posted by willdzoan31

    Using React + Observer plugin

    in GSAP

    Posted

    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?

    GSAP onUpdate callback doesn't provide consistent progress value

    in GSAP

    Posted

    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?

    GSAP onUpdate callback doesn't provide consistent progress value

    in GSAP

    Posted

    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.

     

     

    Scrolling remove and add class name to a pin element

    in GSAP

    Posted

    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"

    Apply 2 fromTo animation to one element produces strange behavior

    in GSAP

    Posted · Edited by willdzoan31

    I know this might me a dumb question, but I have 2 animation.

     

    - First one animate a fade-in scale-up animation, which I have it like this:

     

    Quote

      

    imageBox.current = gsap.fromTo(
  "#image-box", {
    autoAlpha: 0,
    scale: 0.2
  }, {
	autoAlpha: 1,
    scale: 1,
    duration: 1,
    ease: "Sine.easeInOut"
    )

     

    - The second one, I attach it to a scrollTrigger time line, which will scale the element up when scroll

      

    animation.current = gsap.timeline({
            scrollTrigger: {
                trigger: "#image-box",
                start: "top center",
                end: "+=300",
                scrub: 1,
                markers: true
            }
        })
        animation.current.to(
            "#image-box", {
                scale: 4,
                duration: 1,
                ease: "Sine.easeInOut"
            }
        )

     

     My guess what went wrong is, when it's running the second animation, it's getting  the first scale value from the first animation (0.2) as a starting value,

    which is why when the second animation experiences a little "hiccup" (it's scale down to 0.2 immediately, then start scaling up to 4). 

     

    I'm still making a demo on codesandbox but just gonna put this here incase it's an easy fix.

×
×
  • Create New...