Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
NickWoodward

Parallax Stutter?

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

Hi @OSUblake

Yeah, I was kind of surprised to see the demo using backgroundPosition (although it varies if/when the performance takes a hit), but I wasn't really confident enough to try anything different.

I'll try animating the transforms, thanks. Would you mind having a look at the inevitable mess I make of it? 😊

Nick
Β 

Link to comment
Share on other sites

Lol. I didn't realize that was a GreenSock demo. But yeah, we can take a look at your mess πŸ˜‰

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

It looks like you pretty much got it. Just needed to add overflow: hidden to your sections. The only issue is that there is no style.y property. You should just use GSAP to set that.

Β 

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

Β 

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

A simple way to do this would be to have your images larger than the section container. Then you can calculate the movement kind of like this.

Β 

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

Β 

  • Like 2
Link to comment
Share on other sites

Ah ok, yeah that looks like a good option.

But just so you know you've guaranteed my failure by calling it simple πŸ˜„

  • Haha 1
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

Well one problem with your demo is your using the same image.Β 

// bad
gsap.to(".image", { ... })

// good
gsap.to(image, { ... })

Β 

To change the speed, you would need to increase the end so it happens further down from the start.

Β 

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

To have it go in the other direction would be like this.

Β 

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

Β 

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

Amazing, thank you - you were right, it was the ease that was messing things up a bit!

  • 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.
Γ—