how to add smooth animation?

[deantek]

Hi, I just recently started using gsap and I don't think I'm doing it right.

I tried to replicate the animation from this site: https://deveb.co/

my pen: https://codesandbox.io/s/suspicious-darkness-f21rxt?file=/src/App.js

that's what I got, I tried to add more smoothness, like on the site, but it doesn't work out for me, can you explain what I'm doing wrong? I change the ease values but the animation is always a little jerky, how can I fix this?

[Rodrigo]

Hi,

 

What you could try is to use a longer end point in your ScrollTrigger instance and play with the eases as you mention. Also Toggle Actions and Scrub in your ScrollTrigger configuration are kind of opposites. Toggle actions mark when and how the animation will play/reverse/reset/pause etc. while scrub ties the progress of the GSAP Timeline to the scroll distance. This seems to work a little better:

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".one",
    scroller: ".scroller",
    start: () => "top top",
    end: () => "+=2000px",
    pin: ".one",
    scrub: 0.5,
    invalidateOnRefresh: true
  }
});

 

I recommend you to check the docs on ScrollTrigger as well as this short video tutorial @Cassie made to illustrate a good workflow when using ScrollTrigger:

Finally you are using a third party plugin and we don't have enough time resources to debug and troubleshoot other tools. You should check the ScrollSmoother Plugin and see what it offers:

 

https://greensock.com/scrollsmoother/

 

Let us know if you have more questions.

 

Happy Tweening!

[deantek]

@Rodrigo,

thank you very much, it worked 🙂