ScrollTrigger animation is hidden before scroll event

[Ailecccc 0 Likes (Newbie)]

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'))
  }, [])

 

See the Pen oNbjQpw by chrisgannon (@chrisgannon) on CodePen

[Shaun Gorneau 2,037 Likes (Superhero)]

Curious which browser you're testing in. I've looked at this in Safari, Chrome, Firefox, and Edge in MacOS and the first frame of the tween loads in all cases without the need for any input.

[GreenSock 18,597 Likes (Superhero)]

Yeah, we can't effectively troubleshoot live sites - if you could provide a minimal demo like in CodePen, you'll significantly increase your chances of getting a solid answer. 

 

Also, I would strongly recommend using the helper function we built for Lottie rather than Chris Gannon's only because I think the way his works is less than ideal performance-wise (at least last I checked). He's awesome, of course. I'm just saying the technique the helper function uses is more optimal.