SWALKER Posted August 25, 2022 Share Posted August 25, 2022 I am using scrolltrigger to animate the way the sections (the coloured blocks with images) appear on screen. It is working BUT it's really inconsistent and I can't work out why. 6 or 7 out of 10 times it's perfect but sometimes the right hand boxes switch from position relative to fixed to early. What am I doing wrong? I have been fiddling with it for a week so any help would be greatly received See the Pen dymwbBP by shereewalker (@shereewalker) on CodePen Link to comment Share on other sites More sharing options...
GSAP Helper Posted August 25, 2022 Share Posted August 25, 2022 Hi there! We're struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here's some tips that will increase your chance of getting a solid answer! A clear description of the expected result - "I am expecting the purple div to spin 360degrees" A clear description of the issue - "the purple div only spins 90deg" A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" A minimal demo - if possible, using no frameworks, with minimal styling, only include the code necessary to show the issue. If you are not receiving a response, try to reduce the code in your demo and clarify your question using these steps. Link to comment Share on other sites More sharing options...
daniel.mt Posted August 25, 2022 Share Posted August 25, 2022 Hey, Tested your solution and I can't replicate your problem. Did you try it outside codepen as well ? Here is a simpler solution: See the Pen e683799bbcade7f1e4ccfebdcefdea22 by danielmtd (@danielmtd) on CodePen 1 Link to comment Share on other sites More sharing options...
SWALKER Posted August 25, 2022 Author Share Posted August 25, 2022 Hi Daniel - you can see the issue here https://eei.shereewalker.com/ I will try your solution though! Link to comment Share on other sites More sharing options...
daniel.mt Posted August 25, 2022 Share Posted August 25, 2022 I can see that you're changing the height of log-book-left-side on resize. This may be the issue and the solution is to call the refresh method after you changed the height of the element. The method is: ScrollTrigger.refresh() Please note that if you add dynamic elements / change the height of the elements and this causes the layout to grow / shrink you need to recalculate the start / end markers. Here is a more detailed explanation: https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh() 1 Link to comment Share on other sites More sharing options...
SWALKER Posted August 25, 2022 Author Share Posted August 25, 2022 Hi Daniel Thanks so much for your help. For some reason when I replace my js with yours, nothing happens - as in, all effects are gone. I hope I have understood correctly, but I have added ScrollTrigger.refresh(); at the end of my js file after all my GSAP items - is that right? Link to comment Share on other sites More sharing options...
daniel.mt Posted August 25, 2022 Share Posted August 25, 2022 Hey Swalker, You need to add ScrollTrigger.refresh() in the callback where you change the height of that/those element(s). Here is an example of what happens when you change the height of an element without triggering the refresh method and with refresh method: See the Pen e683799bbcade7f1e4ccfebdcefdea22 by danielmtd (@danielmtd) on CodePen As for the replacement. I don't quite know the whole context on what you have in there. In the codepen I just refactored your tweens in a foreach loop. You can revert it back if this causes issues. 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