Gigi1303

Hi guys, I know this question will sound trivial to you but I'm basically stuck here. I'm not able to attach a codepen but I'll try to make the question as easy as possible. Basically, I have a foreach loop for pinning every section of my website, and that works very well. In addition to that I have 3 different timelines to change the body background (if you look at the example below) let backgroundChange0 = gsap.timeline({paused:true}); backgroundChange0.to('body', {backgroundColor: '#fffce4'}); let backgroundChange1 = gsap.timeline({paused:true}); backgroundChange1.to('body', {backgroundColor: '#FFDD00'}); let backgroundChange2 = gsap.timeline({paused:true}); backgroundChange2.to('body', {backgroundColor: '#000'}); gsap.utils.toArray(".dds-panel").forEach((panel, i) => { let mainTl = gsap.timeline({ scrollTrigger: { trigger: panel, onEnter: () => backgroundChange[i].play(), onLeaveBack: () => backgroundChange[i].reverse(), start: "center center", pin: true, pinSpacing: true, toggleActions: "play none reverse none", invalidateOnRefresh: true } }); } I know this looks messy but I have to change the background color to different ones before pinning the section panel. The problem is that I can't make that backgroundChange[i] work inside onEnter, I even tried passing it as a string like ("backgroundChange" + i) but it doesn't work. My goal is to use the forEach index to dinamically change to backgroundChange0, backgroundChange1, etc. inside the onenter and onleaveback event. Thanks a lot for your help, let me know if it's clear, otherwise I will try to make a codepen with minimal coding.

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

Hi @mvaneijgen, here it is! https://codepen.io/luigi-basile/pen/eYKbaXW Basically what I'm trying to do is: - Moving the animation part of the sections outside of the lottietrigger function - Making two lottie svg playing (and even more in the final work) as you scroll. I tried adding another svg element (it has class -svg-element2) inside the one with id section#2 but it's not playing/behaving correctly. - The section with id section#2 should pin like the others with class "section" but it's not. Thanks a lot for your help!

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!

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!!

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

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

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