Jon Kolko Posted December 14, 2022 Share Posted December 14, 2022 Hi, I have a problem that I think is caused by my fundamental misunderstanding of start/end. Please see CodePen: You'll see that the ScrollTrigger is set to start when .blueSection scrolls into view, but appears to start well before that (and therefore end in the wrong place.) The intended outcome is that the boxes do not move until the blue area appears at the bottom of the screen, and they stop moving when the bottom of the blue area appears at the bottom of the screen. Thanks, See the Pen RwJXPjW by jkolko (@jkolko) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 15, 2022 Share Posted December 15, 2022 19 hours ago, Jon Kolko said: The intended outcome is that the boxes do not move until the blue area appears at the bottom of the screen So I've set your ScrollTrigger to trigger when the bottom of the screen hits the bottom of the .blueSection. eg start: "bottom bottom" 19 hours ago, Jon Kolko said: and they stop moving when the bottom of the blue area appears at the bottom of the screen. This is the same as the first sentence. You could set it the same, but that means the animation time is over a scroll distance of 0px which makes everything snap as soon as you hit the trigger. I think that is not correct? I've just set it so that when the top of the browser hits the top of .blueSection the animation will be done. Getting these properties right for every specific animation can be really hard. You just have to play with the values until it feels right, but remember that the first parameter ("First Second") sets the trigger to the element and the Second sets it for the browser. Hope it helps and happy tweening! See the Pen wvXVjBR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
Jon Kolko Posted December 15, 2022 Author Share Posted December 15, 2022 Hi, Quote and they stop moving when the bottom of the blue area appears at the bottom of the screen. This is the same as the first sentence. You could set it the same, but that means the animation time is over a scroll distance of 0px which makes everything snap as soon as you hit the trigger. I think that is not correct? I didn't do a very good job of writing that and left out an important word. I meant, The intended outcome is that the boxes do not move until the top of the blue area appears at the bottom of the screen, and they stop moving when the bottom of the blue area appears at the bottom of the screen. But, start: "top bottom", end: "top 27%", and start: "top bottom", end: "bottom bottom", Seem to do the same thing (but not what I want)... Thanks, Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 15, 2022 Share Posted December 15, 2022 I see I had linked the wrong pen in my previous comment, that is now updated. 1 hour ago, Jon Kolko said: the boxes do not move until the top of the blue area appears at the bottom of the screen I think you then need two ScrollTriggers, because you pin the .blueSection gets pinned, so it doesn't move when it get triggered. You surely can do that, but the box will not be visible when scrolling. Here is it with being pinned See the Pen QWxerEe?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen and here one not being pinned See the Pen zYagjBo?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 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