Jump to content


ScrollTrigger Object Get Faster Just Before Finishing Animation

Moderator Tag
Go to solution Solved by fonveton,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

Link to comment
Share on other sites

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

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.