Jump to content
Search Community

Parallax Stutter?

NickWoodward test
Moderator Tag

Recommended Posts

Hello!

First, I feel like I should say I'm really enjoying using Greensock (badly), so I don't mean to hate on this demo... but... 😄

...when scrolling through it I often get fairly bad screen juddering, where it almost looks like the background image tries to catch up to where it should be. This has happened across both chrome and FF, when my CPU and memory are not struggling, and when I've implemented the demo outside of codepen.

Is this just an inevitable side effect of using backgroundPosition for the parallax effect? Or is it just me? And if it's the former, are there any ways to minimise the problem? (Like potentially moving the image less?)

Also, there seems to be another bug in the demo that sometimes results in gaps between the images. I really don't mean to sound like I'm just complaining, it's more that I'm trying to assess whether someone like me, who's not exactly an expert 🙃 has even a chance of fixing these issues.

(I really do like greensock, I swear!)

😄


 

parallax.jpg

See the Pen QWjjYEw by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hi Nick,

 

These sound more like CSS issues than GSAP ones. To maximize performance, you should be animating transforms (x, y, etc) instead of backgroundPosition as the browser can hardware accelerate transforms.

 

You'll probably have to wrap an image with a div that has overflow hidden to animate transforms on your image.

<div>
  <img>
</div>

 

  • Like 2
Link to comment
Share on other sites

3 hours ago, OSUblake said:

But yeah, we can take a look at your mess 😉


...it turns out that's a kind but brave offer...

I don't suppose you've got any tips on how to break down/approach the problem? Because I tried to alter the demo pen to use the 'x' param, and although it kind of got close, I quickly found out that I was just guessing and got in a real muddle fast.

Is there any way that you could talk to me like I'm 5? 😀

Here's my plagiarized effort -

See the Pen mdwvWNX?editors=0111 by nwoodward (@nwoodward) on CodePen

Not sure you want to see my effort to add a wrapper div...

Link to comment
Share on other sites

I swear I tried the overflow (at least overflow y) on the section, with terrible results 😄

But thanks a lot, much appreciated 👍

 

*edit: Sorry, one last question if you don't mind!

If I want to change the height of the section, why isn't it just a matter of changing the div to an arbitrary number, and then replacing the variable 'innerHeight' with that number in the JS? It works in the preview below, but in full screen I'm getting blank spaces on either side of the images as they scroll, so I don't think I've quite got the logic right


See the Pen jOwJMev?editors=0111 by nwoodward (@nwoodward) on CodePen

Link to comment
Share on other sites

The logic is correct, but that effect really only plays out nicely when the images are the full height. If you turn the markers on for the ScrollTriggers (markers: true), it might be more apparent why a smaller height doesn't work. The animations start at the very bottom of the screen, so if the images are smaller, then their animations are starting earlier, messing up the effect. 

 

 

  • Like 1
Link to comment
Share on other sites

19 minutes ago, OSUblake said:

The logic is correct, but that effect really only plays out nicely when the images are the full height. If you turn the markers on for the ScrollTriggers (markers: true), it might be more apparent why a smaller height doesn't work. The animations start at the very bottom of the screen, so if the images are smaller, then their animations are starting earlier, messing up the effect. 

 

 


Yeah that makes sense - luckily my actual use case involves a parallax section for the hero image, and another smaller section way below the bottom of the visible page - so that should work right?

Thanks a lot!

Link to comment
Share on other sites

Hi @OSUblake

Managed to kind of get it working, but it the previous parallax section seems to glitch when the next one triggers `onEnter` or `onEnterBack`

See the Pen jOwoYvL?editors=1011 by nwoodward (@nwoodward) on CodePen


Also, although obviously beggars can't be choosers (😄) and I am keen to get this version working, I was kind of looking to get the effect in the first demo where the image moves down slowly, rather than up quickly. Just really struggling to picture how I'd do that either 🤷‍♂️

Link to comment
Share on other sites

😄

Is there any way we can forget the last two posts ever happened?

RE the speed - is it not also a different direction? Or am I imagining that? I appears like the first demo is scrolling the image down with the page, where as this approach is moving the image up. I'll have a play about with it either way :)

Link to comment
Share on other sites

Nice one, really do appreciate the help!

So I've got the crayons out to make sure I understand what's going on (and I think it actually has helped me)

So as the viewport / screen scrolls downward, the image animates from 1 to 2, shifting its position relative to the div section downward. Making the section's end marker closer to the start marker makes that animation happen quicker, and the scroll-start and scroll-end control when it happens.

I'm struggling a little with how to acheive the same effect on the top section because I want to start with the image further down, which means that the animation stops earlier. Animating to a positive `y` value has sort of helped get close, but it just feels like guess work on my part.

Is it just a matter of tweeking the numbers until you get the effect you like on a specific image? Or is there a calculation I'm missing? If you look at the full pen, you can tell the numbers are obviously still off as the images eventually move with the page... This is definitely as frustrating as it is interesting 😄

See the Pen powmmxq?editors=0110 by nwoodward (@nwoodward) on CodePen


 

image.png

Link to comment
Share on other sites

Well the ease might be messing it up some. You should probably have an ease of "none".

 

And for the top one, it will probably just be a matter messing with the values until you find something that looks good. That's how a lot animations are, just a bunch of trial and error.

Link to comment
Share on other sites

  • 2 years later...

@OSUblake


Actually, I am facing the same problem and I have the exact same scenario.

 

I have added overflow hidden to the sections, but unfortunately it didn’t work.

 

if you check the example you provided above on the mobile, you will figure out that stuttering only happens on mobile devices, even in your provided demo.

 

Any luck to find a fix?

Thanks in advance!

Link to comment
Share on other sites

12 minutes ago, ESFOULA said:

if you check the example you provided above on the mobile, you will figure out that stuttering only happens on mobile devices, even in your provided demo.

I didn't see any stutter on my iPhone.

 

If  you're having trouble or would like some assistance, please start a new thread and include a minimal demo that clearly illustrates the problem and we'd be happy to answer any GSAP-related questions. 

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...