Jump to content


ScrollTrigger animation is hidden before scroll event

Moderator Tag

Recommended Posts



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"
     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(() => {
      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'))
  }, [])


Capture d’écran 2022-02-15 à 18.28.45.jpg

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.