Scrolltrigger + Lottie in Webflow

[Kristiaan]

Hi people,

I'm using gsap with webflow. I'm trying to use scrolltrigger to trigger the play back of a lottie animation.

The script is working in so far that it makes the lottie scale up or fade in upon appearance, but the code to control the animation isn't working.
The lottie animation just starts to play once the site has been loaded, and plays once.

Should I load a library or install a plugin first, in order to get control over lottie playback?

I'm a complete novice with js and gsap.
Any help is appreciated!

This is my script:

// Create a ScrollTrigger instance
const trigger = new ScrollTrigger({
  trigger: ".section1",
  start: "top top",
  end: "bottom top",
  toggleActions: 'play none reverse none',
  pin: true, // Pin the scrolling
  markers: true // Add this line if you want to see the trigger markers
});
// Create a GSAP timeline
const timeline = gsap.timeline();
// Add animations to the timeline
timeline.to(".lottie_01", { opacity: 1, duration: 1 });
// Pause the timeline initially
timeline.pause();
// Add the ScrollTrigger to the timeline
trigger.add(() => {
  timeline.play();
});
 

[ryan_labar]

A minimal demo would be super helpful, in debugging this, but, right away, I'm not seeing where you are starting/initializing/controlling the Lotti animation.

 

This article may help get you started: https://gsap.com/docs/v3/HelperFunctions/helpers/LottieScrollTrigger/

[Kristiaan]

Thanks Ryan,
This didn't solve the problem.
I've reached out to a developer today to help me solve the issue. He tried a few ways to get scrolltrigger to control the lottie animations, but without succes. I'll ask him to jump in and describe the issue here on the forum to see if we can find a solution together.

[Rodrigo]

That's really odd, the Lottie/ScrollTrigger helper should be able to handle and scrub the lottie animation across the duration of a ScrollTrigger instance (between the start and end points passed in the configuration). The helper function has been battle tested more than a few times with very good results.

 

If possible please create a minimal demo as Ryan already suggested, in order to see what could be the issue here.

 

Happy Tweening!

[MichielKnoppert]

Hey all

 

I’m in a similar boat as Kristiaan. Complete novice, trying to scrub and pin a Lottie in squarespace. I’ve managed to get gsap working in squarespace, animating native objects and text but can’t get scrub control over a Lottie. 
For Wix/Webflow/Squarespace, do you create a codeblock, add the Lottie player code, add cdn to site footer, the DOM thing and JS code to site header?

Would be great to have some kind of walkthrough of the process for complete noobs. 
Really impressed by the control and smoothness of animations gsap provides!!

 

[MichielKnoppert]

Made this work with both methods for Squarespace now. 

My issue was trying to make this work with the Lottie Webplayer code, which you don't need at all it seems. For Squarespace simply do this:

OPTION 1
Add to code injection inside HEADER

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/TextPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.6/lottie.min.js"></script>

Add to a code block

<script>
  LottieScrollTrigger({
 target: "#BLOCK ID",
 path: "YOUR JSON URL",
 speed: "medium",
 scrub: 2 // seconds it takes for the playhead to "catch up"
 // you can also add ANY ScrollTrigger values here too, like trigger, start, end, onEnter, onLeave, onUpdate, etc. See https://greensock.com/docs/v3/Plugins/ScrollTrigger
 // you can pass in a "timeline" that has existing animations in it, and LottieScrollTrigger will play that alongside the Lottie animation
 // you can pass a startFrameOffset and/or endFrameOffset to cause the playhead to start/end at a different frame. 
});

function LottieScrollTrigger(vars) {
  let playhead = { frame: vars.startFrameOffset || 0 },
    target = gsap.utils.toArray(vars.target)[0],
    speeds = { slow: "+=2000", medium: "+=1000", fast: "+=500" },
    st = {
      trigger: target,
      pin: true,
      start: "top top",
      end: speeds[vars.speed] || "+=1000",
      scrub: 1
    },
    ctx = gsap.context && gsap.context(),
    animation = lottie.loadAnimation({
      container: target,
      renderer: vars.renderer || "svg",
      loop: false,
      autoplay: false,
      path: vars.path,
      rendererSettings: vars.rendererSettings || {
        preserveAspectRatio: "xMidYMid slice"
      }
    }),
    frameAnimation;
  for (let p in vars) {
    // let users override the ScrollTrigger defaults
    st[p] = vars[p];
  }
  frameAnimation = vars.timeline || gsap.timeline({ scrollTrigger: st });
  if (vars.timeline && !vars.timeline.vars.scrollTrigger) {
    // if the user passed in a timeline that didn't have a ScrollTrigger attached, create one.
    st.animation = frameAnimation;
    ScrollTrigger.create(st);
  }
  animation.addEventListener("DOMLoaded", function () {
    let createTween = function () {
      animation.goToAndStop(playhead.frame, true);
      frameAnimation.to(playhead, {
          frame: animation.totalFrames - 1 - (vars.endFrameOffset || 0),
          ease: "none",
          duration: frameAnimation.duration() || 1,
          onUpdate: () => {
            animation.goToAndStop(playhead.frame, true);
          }
        }, 0);
      return () => animation.destroy && animation.destroy();
    };
    ctx && ctx.add ? ctx.add(createTween) : createTween();
    // in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes
    ScrollTrigger.sort();
    ScrollTrigger.refresh();
  });
  animation.frameAnimation = frameAnimation;
  return animation;
}
</script>

Or OPTION 2 (using Chris Gannon's external JS code)
Add to code injection inside HEADER

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/TextPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.6/lottie.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/ScrollLottie.js"><script>

Add to a code block

<script>
  ScrollLottie({
 target: '#BLOCK ID',
 path: 'YOUR JSON URL', 
 duration: 4, 
 speed: 'medium'
})
</script>

 

[Rodrigo]

Hi,

 

If you are using Lottie with ScrollTrigger, we'll always recommend using the ScrollTrigger + Lottie helper function (as you did in the first solution to your issue), since that is fully connected to ScrollTrigger:

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

 

As for the second method, Chris is an extremely talented developer and his work is great, so normally that will work without any issues. Just be aware that Chris might not always have the time to keep everything up-to-date as he is super busy crafting amazing things. Also the helper function has a few extra features that make it worthy exploring.

 

Happy Tweening!