Jump to content
Search Community

Animation jankiness when scrolling

AINOM test
Moderator Tag

Recommended Posts

I'm brand new to GSAP and using for the first time for a simple parallax-like effect with 2 objects: a background image (parallax-1) and a DIV with text (parallax-2). Rather than the super-smooth scrolling animation that I've come to expect with GSAP (like with this sample: ) my animation it incredibly "janky": https://intendedimpact.infinitemonkeys.ca/about-us/. I must be missing something simple, but I just can't figure it out. Here's the code I'm using:

 

  gsap.to(".parallax-1", {
    yPercent: 60,
    ease: "none",
    scrollTrigger: {
      trigger: ".parallax-1",
      start: "top top",
      end: "bottom top",
      scrub: true
    }
  });    

  gsap.to(".parallax-1", {
    scale: 1.15,
    ease: "circ",
    scrollTrigger: {
      trigger: ".parallax-1",
      start: "top top",
      end: "bottom top",
      scrub: true
    }
  });    

  gsap.to(".parallax-2", {
        yPercent: 30,
        ease: "none",
        scrollTrigger: {
          trigger: ".parallax-1",
          start: "top top",
          end: "bottom top",
          scrub: true
        }
  });    
 

Can anyone help me figure out what's missing?

See the Pen abdyPBw by isladjan (@isladjan) on CodePen

Link to comment
Share on other sites

Hey @AINOM,

 

I think the jitters you're seeing is stemming from the overflow that's being added to the page, so you'll want add an overflow hidden to the hero's wrapper. Also, your trigger is being animated, so you'll likely want to use your wrapper element as the trigger in this case.

 

You'll also benefit from using a single timeline/scrollTrigger for this setup:

 

gsap.timeline({
  scrollTrigger: {
    trigger: ".ct-section-inner-wrap",
    start: "top top",
    end: "bottom top",
    scrub: true
  }
})
  .to(".parallax-1", {
    yPercent: 60,
    ease: "none",
  }, 0)    
  .to(".parallax-1", {
    scale: 1.15,
    ease: "circ",
  }, 0)   
  .to(".parallax-2", {
    yPercent: 30,
    ease: "none",
  }, 0);    

 

  • Like 2
Link to comment
Share on other sites

Yeah, performance audits are a very deep and wide topic with all kinds of facets. Your issues aren't related to GSAP, I can almost guarantee. We don't have the resources to offer free performance audits on live sites, sorry. But if you need some paid consulting you could either post in the "Jobs & Freelance" forum or contact us. 

 

You've got a bunch of CSS transitions and animations applied which may very well may be the root of the problem (at least one of them). Definitely make sure you don't have any CSS transitions or animations applied to the same elements/properties that you're controlling with GSAP. 

 

You also seem to have quite  a heavy load on the GPU and rasterizing. I don't have time to dig into exactly why, but that's another thing that's unrelated to GSAP. It may be that you're using a very large image that the browser has to constantly re-rasterize or resize in a way that's not performant. 

  • Like 2
Link to comment
Share on other sites

49 minutes ago, elegantseagulls said:

Hey @AINOM,

 

I think the jitters you're seeing is stemming from the overflow that's being added to the page, so you'll want add an overflow hidden to the hero's wrapper. Also, your trigger is being animated, so you'll likely want to use your wrapper element as the trigger in this case.

 

You'll also benefit from using a single timeline/scrollTrigger for this setup:

 


gsap.timeline({
  scrollTrigger: {
    trigger: ".ct-section-inner-wrap",
    start: "top top",
    end: "bottom top",
    scrub: true
  }
})
  .to(".parallax-1", {
    yPercent: 60,
    ease: "none",
  }, 0)    
  .to(".parallax-1", {
    scale: 1.15,
    ease: "circ",
  }, 0)   
  .to(".parallax-2", {
    yPercent: 30,
    ease: "none",
  }, 0);    

 

Thanks for the advice! I've re-jigged my code to use the "timeline" structure that you suggested, and also removed the second element (paralllax-2) that was being animated. Overflow:hidden was already applied to the hero wrapper. All this has made a slight difference, although it's not nearly as smooth as almost every other example I've seen :(

Link to comment
Share on other sites

1 hour ago, GreenSock said:

Yeah, performance audits are a very deep and wide topic with all kinds of facets. Your issues aren't related to GSAP, I can almost guarantee. We don't have the resources to offer free performance audits on live sites, sorry. But if you need some paid consulting you could either post in the "Jobs & Freelance" forum or contact us. 

 

You've got a bunch of CSS transitions and animations applied which may very well may be the root of the problem (at least one of them). Definitely make sure you don't have any CSS transitions or animations applied to the same elements/properties that you're controlling with GSAP. 

 

You also seem to have quite  a heavy load on the GPU and rasterizing. I don't have time to dig into exactly why, but that's another thing that's unrelated to GSAP. It may be that you're using a very large image that the browser has to constantly re-rasterize or resize in a way that's not performant. 

 

Thanks for the tips...but I believe the non-smooth animation is indeed related to GSAP (at least how it's currently implemented). I've recreate the animation in a codepen here: 

See the Pen mdWxmgN by infinitemonkeys (@infinitemonkeys) on CodePen

 and without any other CSS transitions or animations it's still not smooth. Another example I'm comparing to is this 

See the Pen zYrZwVo by knyttneve (@knyttneve) on CodePen

. What I notice with mine is that when I scroll with the mousewheel it "steps" between different tweens instead of smoothly progressing between them. I've created a screencast to highlight what I mean...this is me scrolling a tiny bit at a time up and down...notice the background image goes from start position and size to the next tween suddenly, not smoothly, Compare that to the Istanbul Codepen demo, where the slightest scrolling up or down is smooth. https://www.dropbox.com/s/17qfyf217ir7v68/Screen Recording 2021-06-03 at 2.16.04 PM.mov?dl=0

 

How do I also achieve this?

Link to comment
Share on other sites

Just now, elegantseagulls said:

Try breaking this animation out and adding it to something like CodePen to better debug. If it seems fine on its own, it may be something else. Plus codepen is much easier for us to see what's going on than trying to pick at your live site.

 

Ha!...Just did that and posted, probably seconds before you posted! See above!

  • Like 1
Link to comment
Share on other sites

5 minutes ago, elegantseagulls said:

It looks to me like this could be caused by object-fit not knowing what to do as the container is being transformed. If you add the animation to ".parallax-1 img" performance improves dramatically.

Yes, that does seem to help things! I still have that "stepping" effect between tweens that I'd like to eliminate...any ideas there?

Link to comment
Share on other sites

Good to see everyone else's excellent advice got you where you need to be.

 

Just as an fyi, that jumpiness that you were seeing prior to scrub:(number) was because some browsers don't have smooth scrolling enabled. I'm willing to guess if you scroll this very page you'll notice that the scrolling happens in small jumps and isn't smooth.

 

The video below illustrates what smooth scrolling is and how some third-party libraries have been created to smooth out those little jumps.

 

 

I've found FireFox on Mac and more recently Chrome have smooth scrolling available natively.

  • Like 2
Link to comment
Share on other sites

33 minutes ago, Carl said:

Good to see everyone else's excellent advice got you where you need to be.

 

Just as an fyi, that jumpiness that you were seeing prior to scrub:(number) was because some browsers don't have smooth scrolling enabled. I'm willing to guess if you scroll this very page you'll notice that the scrolling happens in small jumps and isn't smooth.

 

The video below illustrates what smooth scrolling is and how some third-party libraries have been created to smooth out those little jumps.

 

 

I've found FireFox on Mac and more recently Chrome have smooth scrolling available natively.

This was probably the BEST advice out of this whole thread so far. I realized after playing with it more, that using a number for the scrub attribute only masked the issue...but implementing smooth scroll (which was not happening with the latest mac Chrome, Firefox or Safari) is the bees knees, and it works perfectly now!!! So happy! :) 

 

This forum is awesome, and now with a successful first foray into the world of GSAP, I am looking forward to doing much more in the future!

 

Thank you so much for taking the time to help. I hope to be able to give back to this community in time.

  • Like 3
Link to comment
Share on other sites

On 6/4/2021 at 12:15 AM, AINOM said:

This forum is awesome, and now with a successful first foray into the world of GSAP, I am looking forward to doing much more in the future!

 

Thank you so much for taking the time to help. I hope to be able to give back to this community in time.

 

This is lovely to hear ☺️

  • Like 1
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...