Created
September 29, 2020 07:12
-
-
Save jphungcode/ad21a8a223697ad6b4496608011937a6 to your computer and use it in GitHub Desktop.
Scrollmagic Initalise
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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