Jump to content
Search Community

ScrollTrigger animation jump

schwarzsky test
Moderator Tag

Go to solution Solved by alig01,

Recommended Posts

  • Solution

Hey,

 

Replace your useEffect with this and it should probably work as you wanted it to.

useEffect(() => {
    const element = parent.current
    let ctx = gsap.context(() => {
      gsap.to('.title', {
        opacity: 0,
        scale: 0.7,
        delay: 0.5,
        ease: 'power1.out',
        scrollTrigger: {
          trigger: '.title',
          markers: true,
          scrub: true,
          start: 'top top',
          end: 'bottom top'
        }
      })
      gsap.to('.image', {
        scrollTrigger: {
          trigger: '.productImage',
          markers: true,
          scrub: 2,
          start: 'top top',
          end: '+=400',
          pin: true
        },
        scale: 1.3
      })
    }, parent)
    return () => ctx.revert()
  }, [])

For further reading you can check this link out, it will definitely help you out.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Welcome to the forums, @schwarzsky. It looks like you're getting bitten by React 18's new double-useEffect() call behavior, so you're effectively creating multiple duplicated ScrollTriggers/Tweens. Don't worry - it's easy to fix. In GSAP 3.11, we introduced a new gsap.context() feature that makes it super easy to do cleanup operations to prevent this kind of thing. 

 

Here's a fork: 

https://codesandbox.io/s/blockbud-co-landing-forked-ertbb1?file=/pages/index.js

 

Ah, it looks like @alig01 just beat me to it! Nice! 🙌

 

You also might want to read our React guide: 

 

Happy tweening!

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thanks to both of you guys! It worked.

 

I have an another question too, like you can see in `.image` animation i am pinning object to screen. But i want to position object smoothly in center of the screen, stay like that a 100-200px and stay in last position (end state). But i don't know how to position object smoothly in center of the secreen, how i can accomphlish this kinda effect?

 

By smoothly, i mean like editing y position smoothly in GSAP.

  • Like 1
Link to comment
Share on other sites

By `.image`, i mean the div with the `.image` class. Your codesandbox explains how to center an item but i can't figure out how to do it for existing div. I wanted to center object when animation is going on.  Thanks for the help!

 

I created a new demo in case you guys wanna look. https://codesandbox.io/s/9v134x

In this one, object pins correctly into screen but i still can't figure out how to center it into screen.

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...