Framework Free Scroll Timeline (browser issue)

[_andrewireland]

Hi there!

Previously, I have used ScrollMagic with GSAP for scroll based animations, but currently I'm trying to move forward without it! After searching through the forums, based on @OSUblake's original codepen, I was able to figure out a method I could use to do this using multiple timelines in a forEach loop.

This seems to work well, but in testing on a real-world use case I'm noticing that if I reload the page with the scrollbar/pageYOffset not at the very top, the animation breaks. Has anyone run into this issue, and know how I can resolve or work around this? I'm noticing the issue in Chrome/Firefox, but not in Safari.

I can't replicate the issue within the codepen window due to the way it executes the script, but if you export it from codepen and run it locally, you should be able to replicate the issue.  

Thanks for any help you can provide

See the Pen NWPVNOz by andrew-ireland (@andrew-ireland) on CodePen

[ZachSaucier]

Hey Andrew and welcome to the GreenSock forums!

 

7 hours ago, _andrewireland said:

I have used ScrollMagic with GSAP for scroll based animations, but currently I'm trying to move forward without it!

🎆🎊🥳

 

7 hours ago, _andrewireland said:

if I reload the page with the scrollbar/pageYOffset not at the very top, the animation breaks.

This is because you're not taking the scroll offset into account. I would recommend getting the scroll position on load, getting the values you need, then resetting the scroll position to what it was before. Something like this (I upgraded you to GSAP 3 because the GSAP version you were using is very old and GSAP 3 is much better):

<script src="https://cdn.jsdelivr.net/npm/gsap@3.1.1/dist/gsap.min.js"></script>
<script>
let triggerOffset = document.documentElement.clientHeight / 2;
let sceneStart = 2000;
let duration = 300;

let requestId = null;


gsap.set(".timeline-trigger", {
  top: triggerOffset
});

gsap.set(".start-trigger", {
  top: sceneStart
});

gsap.set(".end-trigger", {
  top: sceneStart + duration
});

// SCROLL MAGIC!!!
let boxes = document.querySelectorAll('.box');
let tl = gsap.timeline({ paused: true, defaults: {duration: duration} })

// The relevant part to this thread
const startScrollPos = document.documentElement.scrollTop;
document.documentElement.scrollTop = 0;

boxes.forEach(box => {
  let sceneStart2 = (box.getBoundingClientRect().top)
  console.log('sceneStart2',sceneStart2);
  tl
  .set(box, { backgroundColor: "#64dd17" }, sceneStart2)
  .to(box, { rotation: 720, x: 300 }, sceneStart2)
  .set(box, { backgroundColor: "red" })

});

document.documentElement.scrollTop = startScrollPos;

// Set timeline time to scrollTop
function update() {
  tl.time(window.pageYOffset + triggerOffset);
	console.log(window.pageYOffset + triggerOffset)
  requestId = null;
}

window.addEventListener("scroll", update);
update();
</script>

 

[_andrewireland]

Thank you so much for your help @ZachSaucier! That's a really elegant solution that makes a lot of sense (I can assure you I would have been banging my head against the wall for a very long time to figure it out though...) 

I'm excited to continue learning GSAP deeply. I've used it in the past here and there and have been incredibly impressed by it's performance, and the simplicity of syntax without hindering possibilities.

Thanks again!