Jump to content
Search Community

Gsap project with multiple wipes and Lottie animations

Gigi1303 test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi all, GSAP newbie here in need of help. First of all I'd like to thank this wonderful community for all the help you give everyday to (un)skilled users like me.

I'm working on a website that will have multiple wipes effects (basically alternating vertical and horizontal scrolling), with the last section that should cover the one with "Section 4" you see in the codepen I posted, and multiple lottie svg files triggered on scroll.

The example I edited uses some clever conditional parameters to differentiate between horizontal and vertical scrolling sections and I liked that.

I combined and edited some Gsap examples here and there (I know, not the perfect way to do things, but I was in a bit of a rush for experimenting) and basically I'm having these problems:

- The first problem is that I'd like to cover Section #4 with Section #5 from the bottom while Section #4 remains pinned. Do you think that's possibile?

- The second problem is with the Lottie animation in the first section: everything works well except from the fact that when you scroll away the svg flashes and positions for a brief second in the bottom. What am I doing wrong? Maybe the absolute positioning? Unfortunately I have to use position: absolute in this case. Keep in mind that I will use multiple lottie animations in the page, so I'm trying to find the best solution for that.


Thanks a lot in advance for your help!



See the Pen OJEwoGV by luigi-basile (@luigi-basile) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @Gigi1303 and welcome to the GreenSock forums!


Indeed there is something in your HTML/CSS setup that is causing the Lottie container to jump out of position, most likely due to the fact that you are using position absolute and the scrub time, so the animation is still catching up while the end point has been passed and ScrollTrigger's pin has been released. I recommend you to move everything into a container without a display flex property and pin that container while animating the lottie file. Here is an example of that part of your codepen, as you can see there is no jump in it:

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


For the final section I'd add the card of the final section in the same section in order to trigger that animation when that section is at the top of the viewport and it can be pinned. Here is a working example of the entire setup:

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


Hopefully this helps you get starter. Let us know if you have more questions.


Happy Tweening!

  • Like 1
Link to comment
Share on other sites

1 minute ago, Gigi1303 said:

Do you see any problem in putting more than one lottie animation in the page?

Not really, as long as you wait for all of them to be loaded before creating the ScrollTrigger instances, especially if you'll have a lottie animation at the top of your site. It doesn't make a lot of sense to have a scroll-controlled element/animation at the top of the site if the user can scroll down without seeing them, IMHO.


Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Hi Rodrigo, I have one last question to you, there's still a problem with the svg. 

I can't seem to understand why the svg fade out after you scroll away, even in the fixed release you posted. Ideally, I'd like the svg to remain in the position it is after the section is unpinned.

Thanks Luigi

Link to comment
Share on other sites

Hi guys, back again with  another doubt:

Basically, I don't understand how can I separate Lottie from the rest of the animation? Because right now the whole animation function is inside the lottie one, but that's not ideal for me, because if you don't have any Lottie svg even the rest of the animation won't start. I tried moving out the part that controls the sections pinning, but it won't start at all. I can post another pen if you'd like.


Link to comment
Share on other sites

@Gigi1303 I've split your reply in to its own topic, so that someone with a better understanding of Lottie can take a look. If you can I would advise to make an even simpler demo then this one with only the issue you're having or at least one pen per issue you're having, this will help you get better help. I'd looked at your pen, but just can't figure out what is going on, but I've never worked with Lottie. 


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.
  • Create New...