Lottie and ScrollSmoother setup

[Mattrudd]

Hi again... I'm looking to add a Lottie ScrollTrigger animation on a page with ScrollSmoother.

 

It's been a breeze to replace Locomotive Scroll so far, literally just snip out the scroller proxy and setup the ScrollSmoother at the beginning.

 

It seems I've skipped a beat here with this Lottie section though... with ScrollSmoother active, the Lottie animation runs and pins but doesn't scroll up to reveal the bottom spacer div. Have checked the Lottie helper function and searched the forum for any Lottie/ScrollSmoother examples and come up blank so far.

 

Have commented out the ScrollSmoother in the pen demo attached and it works as expected.

Any pointers to highlight what I've overlooked here would be as ever, very gratefully received! 🙃

 

 

See the Pen mdxVwXG by matt-rudd (@matt-rudd) on CodePen

[Cassie]

You just had a missing closing div.

Here you go!

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

[Mattrudd]

@Cassie oh my. I really AM having one of those days 🤣

 

Thanks for stepping in again!

 

Now where's that 'delete post' button...

[Cassie]

Swinging me some really easy ones here. It's a nice break. Thanks 😂

[Roman Yasinskyi]

@Cassie  one question.
in above codepen,  when you scroll down or up, top/bottom border is shiving. 

how to fix this problem?  I get this error on my website.

[Rodrigo]

Hi @Roman Yasinskyi and welcome to the GreenSock forums!

 

Enabling normalizeScroll seems to fix it.

 

Here is the updated codepen:

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

 

Hopefully this helps.

Happy Tweening!

[Roman Yasinskyi]

Hi, @Rodrigo  Thanks for your help.
but I have one problem yet.

As you can see, the border line is occured on top of div including lottie.
I want to fix this bug asap.
Looking forward to hearing good sounds from you.
Thanks.

[Rodrigo]

Hi,

 

Adding will-change: transform to the smooth content element seems to work on my end:

#smooth-content {
  overflow: visible;
  width: 100%;
  will-change: transform;
}

I updated the codepen:

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

 

Hopefully this helps.

Happy Tweening!