ScrollTrigger Object Get Faster Just Before Finishing Animation

[fonveton 3 Likes (Newbie)]

Hello, I'm having trouble with scrollTrigger easing. Just before animation ending my target object gets faster and sits back to its position.

I couldn't create a codepen because there is a whole website behind but here is what my gsap code looks like.

 

gsap.to('#page-about .contents .container .sidebar .slogan-bar', {

        scrollTrigger: {

            trigger: "#page-about .contents .container .sidebar",

            start: "top center",

            end: "bottom center",

            scrub: 1,

            markers: true,

        },

        ease: Power0.easeOut,

        y: 100,

    });

 

And here is a video about my issue: https://streamable.com/3qc1sr

[fonveton 3 Likes (Newbie)]

Well I figured out the solution for my problem. If anyone having similar issue, there is a problem with transition + gsap using. By removing transition from my target object, my problem is solved.

[OSUblake 18,495 Likes (Superhero)]

Yep, if you have a transition property that GSAP is animating, it going to constantly trigger the CSS transition.