Gsap project with multiple wipes and Lottie animations

[Gigi1303]

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!

Luigi

 

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

[Rodrigo]

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!

[Gigi1303]

Hi Rodrigo, that's wonderful. I think I see now what I did wrong.

The final edit is working exactly as it should. Do you see any problem in putting more than one lottie animation in the page?

Thanks a lot for your help.

Luigi

[Rodrigo]

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!

[Gigi1303]

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

[mvaneijgen]

Hi @Gigi1303 that fade seems to be part of the Lottie animation. I've removed -100 frame from your Lottie animation and it doesn't fade away, so it isn't part of any GSAP animation.

 

See the Pen ExRemLG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Gigi1303]

Hi @mvaneijgen how could I miss that? It was very simple. I was so convinced that the problem was within gsap or scrolltrigger that I didn't think about that.

Thanks a lot!! 

[Gigi1303]

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.

Thanks!

[mvaneijgen]

58 minutes ago, Gigi1303 said:

I can post another pen if you'd like

Yes, please. When asking for help online just error on the side that an example is always useful. 

[mvaneijgen]

@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. 

 

[Gigi1303]

Thanks @mvaneijgen, i'll try to simplify the pen and post it in the other topic.

Regards

Luigi