Jump to content
Search Community

ScrollTrigger animation is hidden before scroll event

Ailecccc test
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

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.
  • Create New...