SWALKER Posted August 29, 2022 Share Posted August 29, 2022 I have a very basic scroll trigger animation where a box expands on page scroll and then shrink back on reverse scroll For some reason if I clear the page cache, it works fine, but on a normal page reload, the image is already half expanded. I can't work out what the issue is. Working on a pen but I have this so far In some cases I have multiple instances of this on one page I have done more complex animation than this but this one just will not work! I have recreated it i a pen, but of course, the issue isn't happening there on page refresh, the images are already half expanded, but on hard reload/cleared cache they work as expected from 0 width to 100vw .expanding-image .expanding-container { width: 0vw; height: 46vw; margin: 0 auto; overflow: hidden; } gsap.registerPlugin(ScrollTrigger); var sections = gsap.utils.toArray('.expanding-image .expanding-container'); sections.forEach((section) => { gsap.to(section, { scrollTrigger: { trigger: section, start: "top bottom", end: "top 5%", scrub: true, }, width: '100vw', ease: "ease-in-out" }); }) See the Pen ZExgGwz by shereewalker (@shereewalker) on CodePen Link to comment Share on other sites More sharing options...
GSAP Helper Posted August 29, 2022 Share Posted August 29, 2022 Hi there, Thanks for making a demo - when you post that we'll do our best to jump in and help! Link to comment Share on other sites More sharing options...
SWALKER Posted August 29, 2022 Author Share Posted August 29, 2022 Hi there - I am doing it right now - just juggling a 2 year old! 1 Link to comment Share on other sites More sharing options...
SWALKER Posted August 29, 2022 Author Share Posted August 29, 2022 I have made a codepen, but the issue doesn't seem to appear there - I have included the live site too Link to comment Share on other sites More sharing options...
SWALKER Posted August 29, 2022 Author Share Posted August 29, 2022 So I have realised that it's actually caused by this JS above $(document).ready(function() { $(".expanding-video").prev().addClass("bottom-excess-video"); }); $(document).ready(function() { $(".expanding-image").prev().addClass("bottom-excess-image"); }); // Add top padding to blocks after $(document).ready(function() { $(".expanding-video").next().addClass("top-excess-video"); }); $(document).ready(function() { $(".expanding-image").next().addClass("top-excess-image"); }); This is there so that whenever a video or image is added, padding is added to the container above and below and then the image sits in between the two sections. I assume the scrolltrigger is calculating the position BEFORE the padding is added? - Not sure why it would only do this on hard reload Is there a way to force it to recalculate when it moves? Link to comment Share on other sites More sharing options...
daniel.mt Posted August 29, 2022 Share Posted August 29, 2022 ScrollTrigger.refresh() Try this after you added those classes and see if it fixes it. 1 Link to comment Share on other sites More sharing options...
SWALKER Posted August 29, 2022 Author Share Posted August 29, 2022 Hi Daniel Thanks for your reply Do you mean immediately after that extra JS? I tried that but then the images did not load at all I will add the offending JS to my codepen now EDIT - I added it to codepen but its still not showing there - it is definitely whats causing it on the live site though Link to comment Share on other sites More sharing options...
daniel.mt Posted August 29, 2022 Share Posted August 29, 2022 In this case yes. If this doesn't work the culprit may be somewhere else. Usually you call .refresh method if the total page height is changed using javascript. This applies on async calls as well. For example if you have content that comes later you need to call ScrollTrigger.refresh after the content is painted on the screen to push those markers in the right position. https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh() Edit: I think your culprit is in here : function min_tallestBox() { var tallest = 0; $('.match-height').css('height','auto') $('.match-height').each(function() { if ($(this).height() > tallest) { tallest = $(this).height(); } }); $('.match-height').each(function() { $(this).height(tallest); }); // what you need to add ScrollTrigger.refresh() } Also function min_highestBox() { var highest = 0; $('.post-tags').css('height','auto') $('.post-tags').each(function() { if ($(this).height() > highest) { highest = $(this).height(); } }); $('.post-tags').each(function() { $(this).height(highest); }); // what you need to add ScrollTrigger.refresh() } See if this fixes it. 2 Link to comment Share on other sites More sharing options...
SWALKER Posted August 29, 2022 Author Share Posted August 29, 2022 Daniel thank you!! So two things I had a separate animation on the home page which wasn't working (I was going to tackle that next) - the code above fixed it as I was using those two functions on that page aswell. Secondly, after seeing your placement of ScrollTrigger.refresh() - I realised I had probably put your initial suggestion in the wrong place. I literally just put that line after ALL the document ready functions - like a completely separate function. After seeing the above - I changed it to this // Add bottom padding to blocks before $(document).ready(function() { $(".expanding-video").prev().addClass("bottom-excess-video"); ScrollTrigger.refresh() }); $(document).ready(function() { $(".expanding-image").prev().addClass("bottom-excess-image"); ScrollTrigger.refresh() }); // Add top padding to blocks after $(document).ready(function() { $(".expanding-video").next().addClass("top-excess-video"); ScrollTrigger.refresh() }); $(document).ready(function() { $(".expanding-image").next().addClass("top-excess-image"); ScrollTrigger.refresh() }); Is this what you meant? Doing this AND adding it to the min_tallestBox() and min_highestBox() function appears to have fixed both animations across both pages. Have I done this correctly? I hope so as it seems to be working! 1 Link to comment Share on other sites More sharing options...
Solution daniel.mt Posted August 29, 2022 Solution Share Posted August 29, 2022 Hey, Most probably the min_tallestBox() and min_highesBoxes() were the main issues. You can try fiddling with it by removing the refresh from the document.ready and check if the issue reoccurs. It's no harm if you're adding it multiple times most probably the method already verifies if start / end position has truly changed or not so is up to you. As a word of advice I would refactor the top code like this : // Add bottom padding to blocks before $(document).ready(function() { $(".expanding-video").prev().addClass("bottom-excess-video"); $(".expanding-image").prev().addClass("bottom-excess-image"); $(".expanding-video").next().addClass("top-excess-video"); $(".expanding-image").next().addClass("top-excess-image"); // try to remove this ScrollTrigger.refresh() and see if the issue appears. ScrollTrigger.refresh() }); 2 1 Link to comment Share on other sites More sharing options...
SWALKER Posted August 29, 2022 Author Share Posted August 29, 2022 Hey I refactored that top code - thank you for that suggestion - yes, if I remove the refresh, the issue comes back. Thank you so much for your help, this project is due in a few days so I was started to get quite upset about the whole thing. So great to end the day with a win, really appreciate it 3 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