ScrollTrigger Lottie animation fixed position

[Daniel Matt]

I'm using a Lottie animation with the ScrollTrigger.

I would like to have a fixed position in the center of the viewport as long as I reach the destination.
The orange rectangle is the place where I would like to stop the Lottie element.

How can I achieve it with "pin" settings on the ScrollTrigger?

See the Pen eYQGEZV by matteokrr (@matteokrr) on CodePen

[mvaneijgen]

You could do it with the :before element, but this will involve a lot of calculations to get the exact distance you need, seems like to much work if just creating an .orange-box element gets your there with not much hassle at all. 

 

If you want to do it with the :before element I'll leave these calculations for you to figure out, you probably have to get the the height of the content box - the height of the orange box and you have to set that as the end trigger (pseudo code end: `bottom-=${.section-destination.offsetHeight - .orange-box.offsetHeight} center+=${document.querySelector('.animation').offsetHeight}`). Checkout https://greensock.com/docs/v3/Plugins/CSSRulePlugin which is deprecated, but suggests using a css variable.

 

I've set the end trigger to the bottom of the new .orange-box element and set the end trigger of the viewport to the center + the height of the .animation element (I've also set the z-index of your .animation to 999999, be sure to give this a logical z-index for your project). Hope it helps and happy tweening! 

 

See the Pen WNYZZez?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Daniel Matt]

I have 1 more question,

When I pin scrollTrigger with 2 and more elements (preparing for making a slider), then the pin div wrongs calculate for transtaion, and my animation is not visible. Any idea how to fix it?

 

See the Pen jOQGYYG by matteokrr (@matteokrr) on CodePen

[Rodrigo]

Hi,

 

The problem is that you are creating the same ScrollTrigger instance for both Lottie animations and pinning the same element twice. So the first time everything works as expected, but then the first pin you create doesn't really messes the calculations of ScrollTrigger because those are correct, the problem is that those calculations are made after the first instance is created and that particular pin is added, so they are off considering what you're expecting. The issue is that you're expecting to be the same but they'll never be equal due to the way pinning works.

 

Is better to create the ScrollTrigger-Lottie instances without pinning and create an extra ScrollTrigger instance that pins the lotties container:

let animations = document.querySelectorAll(".animation");

let args = {
  trigger: ".animation-slider",
  start: "top center",
  endTrigger: ".orange-box", // Make the orange box the end trigger
  end: `bottom center+=${document.querySelector(".animation").offsetHeight}`,
  // pinSpacing: false,
  renderer: "svg"
};

if (animations) {
  Array.prototype.forEach.call(animations, (item) => {
    args.target = item;
    args.path = item.dataset.lottieSrc;

    LottieScrollTrigger(args);
  });
}

ScrollTrigger.create({
  trigger: ".animation-slider",
  start: "top center",
  endTrigger: ".orange-box", // Make the orange box the end trigger
  end: `bottom center+=${document.querySelector(".animation").offsetHeight}`,
  pin: true,
  pinSpacing: false,
  markers: { indent: 400 },
});

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!