Jump to content
GreenSock

SWALKER

Basic scrolltrigger animation not resetting on page refresh

Go to solution Solved by daniel.mt,

Recommended Posts

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

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

Hi there - I am doing it right now - just juggling a 2 year old!

  • Like 1
Link to comment
Share on other sites

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

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

ScrollTrigger.refresh()

Try this after you added those classes and see if it fixes it. 

  • Like 1
Link to comment
Share on other sites

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

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. 

  • Like 2
Link to comment
Share on other sites

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! 

 

  • Like 1
Link to comment
Share on other sites

  • Solution

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()

});
  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×