Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
_andrewireland

Framework Free Scroll Timeline (browser issue)

Recommended Posts

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

Share this post


Link to post
Share on other sites

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>

 

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

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!

 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×