NickWoodward Posted September 29, 2021 Share Posted September 29, 2021 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!)😄 See the Pen QWjjYEw by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted September 29, 2021 Share Posted September 29, 2021 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> 2 Link to comment Share on other sites More sharing options...
NickWoodward Posted September 29, 2021 Author Share Posted September 29, 2021 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 More sharing options...
OSUblake Posted September 29, 2021 Share Posted September 29, 2021 Lol. I didn't realize that was a GreenSock demo. But yeah, we can take a look at your mess 😉 1 Link to comment Share on other sites More sharing options...
NickWoodward Posted September 29, 2021 Author Share Posted September 29, 2021 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 More sharing options...
OSUblake Posted September 29, 2021 Share Posted September 29, 2021 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 1 Link to comment Share on other sites More sharing options...
NickWoodward Posted September 30, 2021 Author Share Posted September 30, 2021 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 More sharing options...
OSUblake Posted September 30, 2021 Share Posted September 30, 2021 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. 1 Link to comment Share on other sites More sharing options...
NickWoodward Posted September 30, 2021 Author Share Posted September 30, 2021 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 More sharing options...
OSUblake Posted September 30, 2021 Share Posted September 30, 2021 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 2 Link to comment Share on other sites More sharing options...
NickWoodward Posted September 30, 2021 Author Share Posted September 30, 2021 Ah ok, yeah that looks like a good option. But just so you know you've guaranteed my failure by calling it simple 😄 1 Link to comment Share on other sites More sharing options...
NickWoodward Posted October 4, 2021 Author Share Posted October 4, 2021 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 More sharing options...
OSUblake Posted October 4, 2021 Share Posted October 4, 2021 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. 1 Link to comment Share on other sites More sharing options...
NickWoodward Posted October 4, 2021 Author Share Posted October 4, 2021 😄 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 More sharing options...
OSUblake Posted October 4, 2021 Share Posted October 4, 2021 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 More sharing options...
NickWoodward Posted October 4, 2021 Author Share Posted October 4, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted October 4, 2021 Share Posted October 4, 2021 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 More sharing options...
NickWoodward Posted October 4, 2021 Author Share Posted October 4, 2021 Amazing, thank you - you were right, it was the ease that was messing things up a bit! 1 Link to comment Share on other sites More sharing options...
ESFOULA Posted March 20 Share Posted March 20 @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 More sharing options...
GSAP Helper Posted March 20 Share Posted March 20 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 More sharing options...
Rodrigo Posted March 20 Share Posted March 20 Hi, I just tested the last two demos Blake shared and I don't see any issues neither in an Android phone nor an iPad 🤷♂️ Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now