ScrollTrigger animation jump

[schwarzsky 2 Likes (Newbie)]

Hello, 

 

Like you can see, Product Image Placeholder is jumping when animation started. Still trying to figure out but can't find a way how to solve it.

 

Demo:

https://codesandbox.io/s/whdnt2

[alig01 85 Likes (Contributor)]

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.

[GreenSock 18,591 Likes (Superhero)]

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!

[schwarzsky 2 Likes (Newbie)]

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.

[alig01 85 Likes (Contributor)]

If I understood you correctly, it sounds to me like you are describing the CSS property position: sticky to me. 

codesandbox

 

I've included a small example and added a timeline where you can put all kinds of transformations, as needed.

[schwarzsky 2 Likes (Newbie)]

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.

 

 

[GreenSock 18,591 Likes (Superhero)]

You want it to start pinning/scaling when the top of the image hits the top of the viewport, and you want it to move to the center of the viewport vertically? 

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

[schwarzsky 2 Likes (Newbie)]

1 hour ago, GreenSock said:

You want it to start pinning/scaling when the top of the image hits the top of the viewport, and you want it to move to the center of the viewport vertically? 

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

Thank you so much and also sorry for my complex langugage