ScrollTrigger-based animation with HTML content above and below

[acg]

My goal is to have a web page that contains a pinned lottie animation driven by ScrollTrigger. Using some of the Greensock docs I have the lottie animation working as expected.

But unlike other samples that I have seen, I would like the animation to have DIVs with traditional HTML content above and below this "lottie DIV". However, after initializing ScrollTrigger, the lottie DIV is wrapped by a ".pin-spacer" DIV that is sized according to the "end" property of the ScrollTrigger options. And that pushes the traditional content DIV below the animation much further down the page, creating "white space" between the lottie DIV and the content DIV below.

 

What I am hoping for is something where there is no space between the DIVs. Rather, the scrollbar just animates the lottie from beginning to end and then the rest of the page continues to scroll content as normal after the animation completes.

Many of the ScrollTrigger/animation samples seem to use a DIV which is 100vh so you never see what is "below the animation" (because it is "off screen"). So, it doesn't matter if there is "white space" below the animation leading up until the next content DIV. In my case, the animation is not going to be the full height of the viewport. So, the space created by ".pin-spacer" is not the look I'm going for.

Hopefully I have made clear what I'm trying to achieve. Is there a well known strategy or good sample to do this? Thanks!

[akapowl]

Hey there @acg

 

You might be interested in this recent thread. It also is about Lottie, but more important; the original demo posted with that question there shows a way for how to get what you described working.

 

 

The gist of it being: 

 

Try wrapping all your content in a div and pin that div instead of your section with the lottie-animation.

For subsequent ScrollTriggers you will then likely have to use the pinnedContainer property as they can not take the pinSpacing into account, since they will be inside the pin-spacer.

 

I will link some more threads, as soon as I have them at hand for better understanding.

 

Edit:

 

This here is the thread where that demo mentioned above comes from - might be the most helpful for you, @acg.

 

 

And here are some others: