Hey guys, I'm trying to do a lottie animation that is on autoplay and loop and also has the scrolling effect (it moves fast forward when you scroll down and fast backward when you scroll up).
I tried to generate this code using ChatGPT, but it seems to not work.
<!-- Include the required libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script>
<!-- Add a container for the Lottie animation -->
<div id="lottie-container"></div>
<!-- Add a script to load and play the Lottie animation -->
<script>
// Load the Lottie animation
var animation = bodymovin.loadAnimation({
container: document.getElementById('lottie-container'),
renderer: 'svg',
loop: true,
autoplay: false,
path: 'https://assets7.lottiefiles.com/packages/lf20_eyXrE5mJde.json'
});
// Create a GSAP timeline for the animation
var timeline = gsap.timeline()
.add(animation);
// Create a ScrollMagic controller
var controller = new ScrollMagic.Controller();
// Create a ScrollMagic scene
var scene = new ScrollMagic.Scene({
triggerElement: '#lottie-container',
triggerHook: 'onEnter',
duration: '200%'
})
.setTween(timeline.timeScale(2).play()) // Play the animation and double the speed on scroll
.addTo(controller); // Add the scene to the controller
</script>
Hey guys, I'm trying to do a lottie animation that is on autoplay and loop and also has the scrolling effect (it moves fast forward when you scroll down and fast backward when you scroll up).
I tried to generate this code using ChatGPT, but it seems to not work.
Do you have any idea on how to do it?
Thank you!