Skip to content

Instantly share code, notes, and snippets.

@jphungcode
Created September 29, 2020 07:12
Show Gist options
  • Save jphungcode/ad21a8a223697ad6b4496608011937a6 to your computer and use it in GitHub Desktop.
Save jphungcode/ad21a8a223697ad6b4496608011937a6 to your computer and use it in GitHub Desktop.
Scrollmagic Initalise
const intro = document.querySelector(".intro");
const controller = new ScrollMagic.Controller();
// set desired animation time long enough so that it doesn't skip frames when scrolling fast.
const animationTime = 2427;
// initialise scrollmagic scene
let scene = new ScrollMagic.Scene({
duration: animationTime,
triggerElement: intro,
triggerHook: 0,
})
.setPin(intro)
.addTo(controller);
// initalise bodymovin
const elem = document.getElementById("lottie");
let anim;
let delay = 0;
let heightPerFrame = 0;
scene.on("update", (e) => {
heightPerFrame = anim.totalFrames / animationTime; // if total animation duration === total frames, then 1px height scroll = 1 frame moved
delay = Math.round(e.scrollPos * heightPerFrame);
anim.goToAndStop(delay, true);
});
const animateData = {
container: elem, //
renderer: "svg",
loop: false,
autoplay: false,
rendererSettings: { progressiveLoad: false },
path: "data.json", // path to json file
};
anim = lottie.loadAnimation(animateData);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment