Jump to content
Search Community

Lottie Animation and ScrollTrigger together not working properly

codechirag test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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.




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

Link to comment
Share on other sites



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:




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





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!

  • Like 1
Link to comment
Share on other sites

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. 


Screenshot 2024-06-18 at 3.05.55 PM.png

Link to comment
Share on other sites

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: 


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. 

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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.



Link to comment
Share on other sites

  • Solution



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


  • Like 1
  • Thanks 1
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...