Ailecccc

Hello, For a project I am using ScrollTrigger with Lottie (I used Scroll Lottie by chrisgannon ) It's working super well but for some reason the animation is hidden before there is any scroll event. I would like to be able to see my animation at the first frame before any scroll event. (most of the time it appears, then disppear) I have tried triggering scroll in the code but it didn't work. Here is the link of the project : https://te-ma.netlify.app/ I am using React with Gatsby if it helps. Thank you so much for your help. const ScrollLottie = obj => { let anim = lottie.loadAnimation({ container: document.querySelector(obj.target), renderer: 'svg', loop: false, autoplay: false, path: obj.path }) let timeObj = { currentFrame: 1 } let endString = (obj.speed === "slow") ? "+=2000" : (obj.speed === "medium") ? "+=1000" : (obj.speed === undefined) ? "+=1250" : "+=500" ScrollTrigger.create({ trigger: obj.target, scrub: true, pin: true, start: 0, end: endString, onUpdate: self => { if(obj.duration) { gsap.to(timeObj, { duration: obj.duration, currentFrame:(Math.floor(self.progress * (anim.totalFrames - 1))), onUpdate: () => { anim.goToAndStop(timeObj.currentFrame, true) }, ease: 'expo' }) } else { anim.goToAndStop(self.progress * (anim.totalFrames - 1), true) } } }) } useEffect(() => { ScrollLottie({ target: '#animationWindow', path: 'https://assets1.lottiefiles.com/packages/lf20_5qjc0ipo.json', duration: 4, speed: 'medium' }) document.body.dispatchEvent(new CustomEvent('scroll')) window.dispatchEvent(new CustomEvent('scroll')) document.dispatchEvent(new CustomEvent('scroll')) }, [])