I am trying to create an on-scroll json lottie animation (canvas) inside of a scrollmagic pin / scene.
Currently, the animation works, but the animation disappears when the “end” indicator reaches the “start” indicator. I can still see the canvas outline, but the content is blank.
I don’t know if the issue lies with the bodymovin script or scrollmagic.
Website is here:
https://ringtree.myshopify.com/
password is: tree
Here is the code I am using. It is more or less copy paste from here:
https://medium.com/johnphungtech/animated-video-scroll-render-for-web-with-bodymovin-scrollmagic-js-9f8de0a494f4
Here is the json file:
https://cdn.shopify.com/s/files/1/0856/7508/2004/files/ringtree_lottie2.json?v=1707564221
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 = 2000;
// initialise scrollmagic scene
let scene = new ScrollMagic.Scene({
duration: animationTime,
triggerElement: intro,
triggerHook: 0,
})
.setPin(intro, {pushFollowers: true})
.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);
});
scene.addIndicators();
const animateData = {
container: elem, //
renderer: "canvas",
loop: false,
autoplay: false,
rendererSettings: { progressiveLoad: false },
path: "https://cdn.shopify.com/s/files/1/0856/7508/2004/files/ringtree_lottie2.json?v=1707564221", // path to json file
};
anim = lottie.loadAnimation(animateData);
I have checked the json and have made sure that there are no blank frames at the end. I have run the animation through multiple preview tools to confirm that there is no blank frames. I have tried changing more variables than i can remember, including setting “loop” to “true” but no change.