Gigi1303 Posted November 29, 2022 Posted November 29, 2022 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.
Solution Rodrigo Posted November 29, 2022 Solution Posted November 29, 2022 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! 1
Gigi1303 Posted November 29, 2022 Author Posted November 29, 2022 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 Posted November 29, 2022 Posted November 29, 2022 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! 1
Gigi1303 Posted November 30, 2022 Author Posted November 30, 2022 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 Posted November 30, 2022 Posted November 30, 2022 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. 3
Gigi1303 Posted November 30, 2022 Author Posted November 30, 2022 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 Posted December 6, 2022 Author Posted December 6, 2022 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 Posted December 6, 2022 Posted December 6, 2022 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 Posted December 6, 2022 Posted December 6, 2022 @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 Posted December 6, 2022 Author Posted December 6, 2022 Thanks @mvaneijgen, i'll try to simplify the pen and post it in the other topic. Regards Luigi
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now