Superloop Posted June 7, 2022 Share Posted June 7, 2022 I'm trying to use different components with ScrollTrigger, but I don't know why the calculations don't work and I don't know what I'm doing wrong If I use the components separately it works, but together it doesn't... Can anybody help me? Thanks! See the Pen YzeOEyX by marctaule (@marctaule) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 7, 2022 Solution Share Posted June 7, 2022 You should always create your ScrollTriggers in the order they appear on the page, particularly when pinning because things further up on the page could affect things lower. In your demo, you're creating ALL the image ScrollTriggers first even though some of them are BELOW the ".slider" ones. So when refreshing, by default it would calculate all the start/end positions in that order but the images below the ".slider" would actually get pushed further down due to the pinning of that slider. See the issue? There are several solutions. If you're creating things out-of-order, you can define a refreshPriority for each to control the order things get refreshed. Or in your particular case, you could simply add a ScrollTrigger.sort() call at the end of your code which uses the "start" values to order things. Your setup allows for that to work. See the Pen ExQeLxV by GreenSock (@GreenSock) on CodePen Does that clear things up? 1 Link to comment Share on other sites More sharing options...
ej2 Posted August 6, 2023 Share Posted August 6, 2023 Hello @GreenSock, How would you make an element with a ScrollTrigger (also with a pin set to true) of a height of 100vh (full viewport height) maintain its current position even while resizing? I have tried scrolling the element back to the current view and also using Window to try to set the scroll position to the element but doesn't seem to work. Thank you for any assistance you can offer on this. Link to comment Share on other sites More sharing options...
GreenSock Posted August 7, 2023 Share Posted August 7, 2023 Hi @ej2. If you'd like some help, please provide a minimal demo (like a CodePen or Stackblitz) that clearly illustrates the issue and we'd be happy to take a peek. I read your post a few times and I'm having a difficult time understanding what you're asking, sorry. 1 Link to comment Share on other sites More sharing options...
ej2 Posted August 7, 2023 Share Posted August 7, 2023 Hey @GreenSock Here is a replica of what I was trying to explain earlier and also it becomes jittery on mobile devices. See the Pen BaGbGvr by ecj222 (@ecj222) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted August 8, 2023 Share Posted August 8, 2023 Hi, I'm not sure I understand what you're trying to do and what's the issue you're having, but perhaps this demo created by @Cassie can provide a solid starting point: See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
ej2 Posted August 8, 2023 Share Posted August 8, 2023 Hello @Rodrigo Thank you but this is not what I was talking about. What I was talking about was concerning responsiveness, let's say I was a developer / user of a site and I clicked on the inspect tab to check the web resources loaded and I returned back to the site after checking the gsap animation gets displaced in a weird way and So I want to return the user properly to the gsap animation when displaced so they can continue scrolling through the animation till they finish. I thought about using ELEMENT.scrollIntoView() or Window.scrollTo() to put the gsap animation back into view but none worked and also on mobile, the animation becomes jittery. Maybe this might help, here is a link to understand better what I'm talking about. Link to comment Share on other sites More sharing options...
ej2 Posted August 8, 2023 Share Posted August 8, 2023 2 hours ago, ej2 said: Hello @Rodrigo Thank you but this is not what I was talking about. What I was talking about was concerning responsiveness, let's say I was a developer / user of a site and I clicked on the inspect tab to check the web resources loaded and I returned back to the site after checking the gsap animation gets displaced in a weird way and So I want to return the user properly to the gsap animation when displaced so they can continue scrolling through the animation till they finish. I thought about using ELEMENT.scrollIntoView() or Window.scrollTo() to put the gsap animation back into view but none worked and also on mobile, the animation becomes jittery. I was able to fix the resizing issue with the help of GSAP's ScrollToPlugin. 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