Matchmedia with scrolltrigger lottie helper function responsive problem

[Marco Rodrigues]

Hello.
I'm currently facing a challenge where I have Lottie path for desktop and a different one on mobile.
The main point is to use lottie with scrolltrigger, so I went with the helper function. 
Problem is, if I follow matchmedia syntax on the lottie helper function, when I resize, the lottie doesn't get replaced but instead keeps appending new elements with the path for the current screen width.

I'm assuming a way to solve this would be to somehow kill/destroy the previous element before adding the new one, but having some trouble doing that.

Thanks

See the Pen WNygaxG by marcorodriguesdev (@marcorodriguesdev) on CodePen

[Rodrigo]

Hi,

 

The thing is that the helper function doesn't return the ScrollTrigger instance but the Lottie animation instance, so you have to destroy the lottie animation and kill the ScrollTrigger instance by hand:

mm.add(
  {
    isDesktop: `(min-width: 1025px)`,
    isNotDesktop: `(max-width: 1024px)`
  },
  (context) => {
    let { isDesktop, isNotDesktop } = context.conditions;

    const lotie = LottieScrollTrigger({
      target: ".lottie",
      start: () => "top top",
      path: isDesktop ? LottieDesktop : LottieMobile,
      pin: false,
      markers: true,
      id: "lottie-st-1",
    });
    // Cleanup, destroy the lottie animation and kill ST
    return () => {
      lotie.destroy();
      ScrollTrigger.getById("lottie-st-1").kill();
    }
  }
);

Still I'll ping @GreenSock in case He has a better idea of how this can be handled. Since the lottie instance is not a GSAP related element, there is no way the GSAP Match Media can handle that for you.

 

Happy Tweening!

[GreenSock]

Yep, sounds about right. Of course you could tweak the helper function to attach the animation and/or ScrollTrigger instance to the Lottie object so that you can more easily target it, but it's not a big deal to do it the way @Rodrigo suggested. 

 

Like: 

See the Pen GRGXLwe?editors=1010 by GreenSock (@GreenSock) on CodePen

[Marco Rodrigues]

  

12 hours ago, Rodrigo said:

Hi,

 

The thing is that the helper function doesn't return the ScrollTrigger instance but the Lottie animation instance, so you have to destroy the lottie animation and kill the ScrollTrigger instance by hand:

mm.add(
  {
    isDesktop: `(min-width: 1025px)`,
    isNotDesktop: `(max-width: 1024px)`
  },
  (context) => {
    let { isDesktop, isNotDesktop } = context.conditions;

    const lotie = LottieScrollTrigger({
      target: ".lottie",
      start: () => "top top",
      path: isDesktop ? LottieDesktop : LottieMobile,
      pin: false,
      markers: true,
      id: "lottie-st-1",
    });
    // Cleanup, destroy the lottie animation and kill ST
    return () => {
      lotie.destroy();
      ScrollTrigger.getById("lottie-st-1").kill();
    }
  }
);

Still I'll ping @GreenSock in case He has a better idea of how this can be handled. Since the lottie instance is not a GSAP related element, there is no way the GSAP Match Media can handle that for you.

 

Happy Tweening!

 

7 hours ago, GreenSock said:

Yep, sounds about right. Of course you could tweak the helper function to attach the animation and/or ScrollTrigger instance to the Lottie object so that you can more easily target it, but it's not a big deal to do it the way @Rodrigo suggested. 

 

Like: 

 

 

 

Thanks, both answers seem to solve the problem and make total sense!