Jump to content


Pinning and playing a Lotttie anim in a pinned container

Moderator Tag
Go to solution Solved by akapowl,

Recommended Posts

Hi all,


I'm a little stuck trying to get a Lottie animation to pin and play before a sequence of images.


What complicates all this is that the Lottie animation and the images that follow share the same pinned container.


I'm looking to get the following sequence working:


  1. pin the phone container,
  2. scrub through the Lottie animation (pinned in place)
  3. Lottie animation unpins on finish and moves up and out
  4. Images follow directly on, scrolling up into view within pinned phone container
  5. Phone unpins and scrolls out of view at end of image sequence


Hope that makes sense!

(You'll see in the pen that I've commented out the Lottie section... so only 4 and 5 of the sequence are showing). 


Scoured the forum and beyond to try and get my head around this 'pin within a pin' challenge, but have come up short.


Tried setting pinType to transform etc... and saw that pinnedContainer doesn't support nested pinning.


Appreciate it's best to avoid nested pins... maybe there's a better way to achieve the sequence I'm after?



Thanks as ever.

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

Link to comment
Share on other sites

I can't figure out where your Lottie element is positioned, but can't you just make the Lottie animation part of the timeline instead of creating a separate LottieScrollTrigger? 


See the Pen XWPMWJv?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen


I've got the code from the following topic, I personally never have used Lottie.


Link to comment
Share on other sites

Hey, thanks for your reply.

I did think of including it in the timeline, but figured the need to pin the Lottie first would mess with the flow. 

I've been guilty of missing simple solutions while looking for complex ones before 😏

The Lottie element is tucked in here:

                <div class="phone-mockup-slide phone-mockup-slide-1">
                  <div class="top-logo" id="lottie">
                    <div class="LottieSection">
                      <div class="Lottie-block">
                        <div id="title"></div>

Your pen doesn't show the animation working for me, but you've given me food for thought, thanks.

Link to comment
Share on other sites

12 minutes ago, Mattrudd said:

I did think of including it in the timeline, but figured the need to pin the Lottie first

Everything nested in the pinned section should also be pinned, so if it is inside your pinned container that should work


12 minutes ago, Mattrudd said:

Your pen doesn't show the animation working for me, but you've given me food for thought, thanks.

Correct, that is what I ment by "I can't figure out where your Lottie element is positioned". I can see it in the HTML, but I can't find it in the preview. If you position your Lottie element correctly at the place you want it to be while animating and then just set it to opacity:0; then when you want the animation to play make it visible again, the logic of my fork pen should work. Hope it helps and happy tweening! 

Link to comment
Share on other sites

Hmm I'm not sure why the Lottie isn't showing - in inspector the SVG of the element seems to be positioned correctly (top of the phone screen) but it's not appearing as I'd expect. 

Ideally I'd like the lower images to 'push' the Lottie 'up and out' so to speak, rather than have it fade out, if I understand you correctly there.

I moved your playhead addition to before the slides tween... and it seems to show the right sequence of pinning, just with a blank space rather than the animation appearing. Albeit with a very long delay before the white Lottie section is pushed up.

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


Link to comment
Share on other sites

My apologies, I thought this would be really simple, but I don't see a way of having a Lottie animation be part of a ScrollTrigger with multiple other 'normal' GSAP animations. I'm going to ping @Cassie maybe she has an easy solution. All think off  is that you have to use two ScrollTriggers and have them time exactly right, so that they flow in to each other and just use the main ScrollTrigger to pin the whole container. 


Side note: I don't know if the Lottie animation is the final animation you're going to use, but that seems like the most simple animation you could build with just GSAP, just fading in some elements from in a staggered fashion. If you could rebuild this in GSAP this would be trivial.


Side note two: right now you're animating top. if you would change your CSS so that all your 'panels' are stacked on top of each other, the only thing you need to animate is .from() yPercent: 100 instead of having this fancy calculation with animation the top property being less performant then animation the y property


// current
tl.to(".lp-phone-mockup-slides-container", {
  top: () => document.querySelector('.lp-phone-mockup-frame').offsetHeight - document.querySelector('.lp-phone-mockup-slides-container').offsetHeight,
  ease: "none"

// Simple version if having them stacked on op of each other with CSS 
tl.from(".lp-phone-mockup-slides-container .phone-mockup-slide", {
  yPercent: 100,
  ease: "none"


  • Like 2
Link to comment
Share on other sites

@mvaneijgen No need to apologise dude! Really appreciate your efforts.

It could be a great shout to rebuild the animation solely in GSAP.


That would still require a nested pin I think, but potentially a lot easier than dealing with Lottie. 

Thanks for the tip on animating yPercent instead of top! 

Link to comment
Share on other sites

  • Solution


I'm not sure I 100% understand what you want to happen, but as far as I understood things, I'd just create one ScrollTrigger that handles the pinning - as Mitchel already said, since your lottie svg is inside that section, and you are going to pin that section, there is no need to pin the lottie element, too.


After that, create your LottieScrollTrigger with pin set to false, and the same trigger and start as the pinning ST, then in the ST you set up for the images to move up, just use the end of the .previous() ScrollTrigger as the start - that way you won't have to make the calculations mentioned by Mitchel, as you can let ScrollTrigger handle that for you.


As for using yPercent vs. top - you could probably just keep your calculations as they are and swap out top with y for the tweened property and should be set for better performance already, which all in all would result in something like this. Is taht what you were going for?


See the Pen KKxajmY by akapowl (@akapowl) on CodePen

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Nailed it again @akapowl.


Thank you! 🙌

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.