Lottie Animation and ScrollTrigger together not working properly

[codechirag]

Hello again guys, I am using a Lottie animation in my site, but I am having an issue while using it with scroll trigger the animation of moving that element and also playing the animation both are not working together. Here I am adding CodeSandbox URL for sample code. Your help is always appreciated.

 

 

https://codesandbox.io/p/sandbox/react-tailwind-starter-forked-vtg6tq?layout=%7B%22sidebarPanel%22%3A%22EXPLORER%22%2C%22rootPanelGroup%22%3A%7B%22direction%22%3A%22horizontal%22%2C%22contentType%22%3A%22UNKNOWN%22%2C%22type%22%3A%22PANEL_GROUP%22%2C%22id%22%3A%22ROOT_LAYOUT%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22UNKNOWN%22%2C%22direction%22%3A%22vertical%22%2C%22id%22%3A%22clxbdqk5z00063b6mjlbkp8o8%22%2C%22sizes%22%3A%5B100%2C0%5D%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22EDITOR%22%2C%22direction%22%3A%22horizontal%22%2C%22id%22%3A%22EDITOR%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22EDITOR%22%2C%22id%22%3A%22clxbdqk5z00023b6musdc5mfv%22%7D%5D%7D%2C%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22SHELLS%22%2C%22direction%22%3A%22horizontal%22%2C%22id%22%3A%22SHELLS%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22SHELLS%22%2C%22id%22%3A%22clxbdqk5z00033b6m21p0u6qg%22%7D%5D%2C%22sizes%22%3A%5B100%5D%7D%5D%7D%2C%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22DEVTOOLS%22%2C%22direction%22%3A%22vertical%22%2C%22id%22%3A%22DEVTOOLS%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22DEVTOOLS%22%2C%22id%22%3A%22clxbdqk5z00053b6mrxrz1ogu%22%7D%5D%2C%22sizes%22%3A%5B100%5D%7D%5D%2C%22sizes%22%3A%5B50%2C50%5D%7D%2C%22tabbedPanels%22%3A%7B%22clxbdqk5z00023b6musdc5mfv%22%3A%7B%22tabs%22%3A%5B%7B%22id%22%3A%22clxbdqk5y00013b6mldsa1egk%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22FILE%22%2C%22filepath%22%3A%22%2FREADME.md%22%2C%22state%22%3A%22IDLE%22%7D%5D%2C%22id%22%3A%22clxbdqk5z00023b6musdc5mfv%22%2C%22activeTabId%22%3A%22clxbdqk5y00013b6mldsa1egk%22%7D%2C%22clxbdqk5z00053b6mrxrz1ogu%22%3A%7B%22tabs%22%3A%5B%7B%22id%22%3A%22clxbdqk5z00043b6m5ix72z55%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22UNASSIGNED_PORT%22%2C%22port%22%3A0%2C%22path%22%3A%22%2F%22%7D%5D%2C%22id%22%3A%22clxbdqk5z00053b6mrxrz1ogu%22%2C%22activeTabId%22%3A%22clxbdqk5z00043b6m5ix72z55%22%7D%2C%22clxbdqk5z00033b6m21p0u6qg%22%3A%7B%22tabs%22%3A%5B%5D%2C%22id%22%3A%22clxbdqk5z00033b6m21p0u6qg%22%7D%7D%2C%22showDevtools%22%3Atrue%2C%22showShells%22%3Afalse%2C%22showSidebar%22%3Atrue%2C%22sidebarPanelSize%22%3A15%7D

See the Pen react-tailwind-starter-forked-vtg6tq?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2 by p (@p) on CodePen

[Rodrigo]

Hi,

 

I'm not familiarized with the React package you're using to handle the Lottie animation, but I would strongly suggest you to use our Lottie ScrollTrigger helper function:

 

https://gsap.com/docs/v3/HelperFunctions/helpers/LottieScrollTrigger

 

Here are a couple of demos of the helper function working in React with our useGSAP hook:

https://stackblitz.com/edit/react-pfgj43?file=src%2FApp.js

 

https://stackblitz.com/edit/vitejs-vite-emmptw?file=src%2FApp.jsx

 

Finally I believe it would be better to have one ScrollTrigger instance to scrub the lottie animation (using the helper function) and another to pin and translate the container of the lottie animation.

 

Hopefully this helps.

Happy Tweening!

[codechirag]

Hi @Rodrigo, thanks for your help. I have tried to put my json file locally in the above stackbiz but it is showing error like this.

and while I used this method in my site  the animation starts while it reaches at middle of the screen horizontally so I tried to change the start point of animation in scrollTrigger but then the character jumps down like a jerk happens. 

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Yeah I never hosted a lottie file directly on stackblitz but locally what I've done is import the json file and use that import, something like this:

import LottieScrollTrigger from './helpers/lottieScrollTrigger';
import lottieJson from "./assets/my-lottie-file.json"

// Inside your react component
useGSAP(() => {
  if (!lottieTween.current) {
    //Animate lottie on scroll
    lottieTween.current = LottieScrollTrigger({
      target: LottieRef.current,
      animationData: lottieJson,
      speed: 'medium',
      start: 'top top',
      end: 'bottom -100%',
      pin: ScrollRef.current,
      scrub: 1,
    });
  }
});

Instead of using the path, use animationData instead.

 

As mentioned before, without a demo is really hard for us to know exactly what could be the issue, but it sounds like there could be some extra wrapper that could be causing this jump you mention.

 

Happy Tweening!

[codechirag]

Hey thanks guys for being so kind. I have tried updating code in stackblitz as it was not running the tailwind properly I have added inline css to represent the scene. 

 

I want the women to run across the screen while the section appears in the screen, but currently it jerks and in my site it jumps below and then animates. Hope you can figure out now from this snippet.

 

https://stackblitz.com/edit/react-euukca?file=src%2FApp.js

[Cassie]

Hey!

 

The issue comes from trying to pin the Lotties element inside a pinned container. (this isn't possible)

You need to specify pin:false on the Lottie and also let ScrollTrigger know that the start and end triggers are within a container that's pinned (Notifications)

You can do this with the pinnedContainer property

https://stackblitz.com/edit/react-zofbab?file=src%2FApp.js

[codechirag]

Hey @Cassie Thanks for your help, it worked.  Btw big fan of you, I saw many videos of yours. you are awesome.

[Cassie]

Perfect, so glad you got it working! 💚🥳