loganvenderlic

Ahh thank you so much! Sorry I didn't catch that. I really appreciate your help.

Hey guys, I have a timeline that affects an element that sometimes has a child button inside of it and sometimes does not. Therefore, when it doesn't have the button inside of it, I'm getting the "GSAP target null not found" warning in the console. I was hoping I could do something like this... hoverClipPathtl .to(clipContainer, { clipPath: "polygon(0% 0%, 50% 0%, 100% 0%, 100% 28.03%, 48.24% 28.03%, 48.24% 86.89%, 19.93% 86.89%, 19.93% 100%, 0% 100%)" }) .to(clipContainer, { clipPath: "polygon(0% 0%, 50% 0%, 100% 0%, 100% 0%, 48.24% 0%, 48.24% 40.39%, 19.93% 40.39%, 19.93% 100%, 0% 100%)" }) .to(clipContainer, { clipPath:"polygon(0% 0%, 50% 0%, 100% 0%, 100% 0%, 48.24% 0%, 48.24% 0%, 21.43% 0%, 21.18% 0%, 0% 0%)" }) if (button) { .to(buttonBG, { backgroundColor: "#000000a6" }) .to(button, { opacity: 1 }); } But that doesn't work. Is there a way to do this so that the button tweens only run when the button exists? Thanks!

@mvaneijgen ahh, very smart! That totally makes sense. Thanks so much for your help and for getting back to me so quickly. I really appreciate it.

Hello. I created a simple timeline to animate clipPath of elements on hover. There are three steps to the animation and I'd like to overlap the second and third steps with the previous ones. When I hover over the element, it works. However, when I hover off the element, it starts to work but then snaps back to it's positioning instead of animating back smoothly. When I remove the overlapping position parameters, it animates perfectly. But I really don't want each step to wait for the previous one to start. I went ahead and slowed the duration way down and took screen recordings of each. They were too large to attach so I uploaded them to Google Drive: https://drive.google.com/file/d/1VQxo1MIhXgWjHHVq01G79dcr9OCLmv5s/view?usp=sharing, https://drive.google.com/file/d/1tZAVtC1POEJ8pU_L9ptsanGm7msjea_v/view?usp=sharing Any idea what's going wrong? I've also included my js code below and went ahead and created a really rough / stripped down CodePen. Thanks in advance for any help you can provide! // home where to start cards hover clipPath let gsapCards = gsap.utils.toArray(grainGradientCards); gsapCards.forEach((card) => { let hoverClipPathtl = gsap.timeline({ defaults: { duration: 3, ease: "none" }, paused:true }); hoverClipPathtl.to(card, { clipPath:"polygon( 0% 0%,0% 0%,100% 0%,100% 0%,48.236% 0%,48.236% 86.894%,19.934% 86.894%,19.934% 100%,0% 100% )" }) .to(card, { clipPath:"polygon( 0% 0%,0% 0%,100% 0%,100% 0%,48.236% 0%,48.236% 0%,19.934% 0%,19.934% 100%,0% 100% )"}, ">-2") .to(card, { clipPath:"polygon( 0% 0%,0% 0%,100% 0%,100% 0%,48.236% 0%,48.236% 0%,19.934% 0%,19.934% 0%,0% 0% )"}, ">-2"); card.parentNode.addEventListener("mouseenter", () => { hoverClipPathtl.play(); }); card.parentNode.addEventListener("mouseleave", () => { hoverClipPathtl.reverse(); }); });

@Cassie awesome, thank you so much!!

Can anyone help explain a specific line of @OSUblake's CodePen here? https://codepen.io/osublake/pen/VwaKMpw/2152a28cffe2c2c0cca8a3e47f7b21c6 What is the snap: "frame" line achieving in his gsap.to ? There isn't a snap property in the gsap.to docs (https://greensock.com/docs/v3/GSAP/gsap.to()). Is this the same as the .snap utility method? https://greensock.com/docs/v3/GSAP/UtilityMethods/snap() I've been going through his code line by line and that is the one line I'm still confused about. Any help would be greatly appreciated! And thanks to @OSUblake for this great pen! It was instrumental in helping me create my own animations for a client that I'm really happy with.

@Rodrigo whoops-- forgot it was password protected! Anyways, thanks so much for your thoughts and suggestions. I found a couple images that were lazyloading that I believe were the culprit! Once I set them to load with the page things have been lining up correctly! Thanks again for all of your help and insight!

@Rodrigo just another heads up that I've noticed this marker placement be inconsistent. Sometimes when I refresh the page it is correct! Screenshot attached. I don't know why it isn't the same every time...

Thanks so much @Rodrigo. I will definitely try your suggestion of using one animation for two ScrollTrigger animations. I can also try to put together a simpler demo, but I'm in the middle of trying to meet a deadline of Friday for this project so I'm in a bit of a rush! One thing I just noticed is that I enabled Markers for the first one that is supposed to be triggered by #init-gsap. The markers are significantly off where I expect them to be! Check out the link again https://plantd.webflow.io/dev/product-copy-7-gsap-forum or see my attached screenshot. It's supposed to be triggered by #init-gsap and I set it to start: top top. However, #init-gsap is over 300px below the Start marker. Do you know why this could be happening? I do have some elements on the page using negative margin-top...could that be it? Also, the container elements for my canvas animations are all set to position: sticky with negative margin so they overlap. I don't know if that could be part of the issue? Thanks again for your help!

Hey guys, I've been working on setting up my own image sequence animations using ScrollTrigger and a method based on what @OSUblake already included in this thread. One issue I keep running into, though...I have one animation that I want to run twice during scroll, using two different triggers. It works fine on desktop, but on mobile, the first time it is supposed to run, it often runs too soon or is on a weird frame other than the first frame before I reach my trigger. Oftentimes, if I scroll past it, scroll back up, and then scroll back down, it works fine again. Here's a link to the project I'm working on: https://plantd.webflow.io/dev/product-copy-7-gsap-forum The element I'm animating is the #init-canvas <canvas> and its first trigger is #init-gsap. Can anyone offer any insight? By the way, I'm not sure if I have it set up correctly in my javascript to run the same animation twice and be triggered by two different triggers. Here's the gsap js I'm using (I can send more if you need it, or you can find all of my gsap js in the .gsap-scripts element near the bottom of the page): gsap.to(airpods, { frame: frameCount - 1, snap: "frame", ease: "none", scrollTrigger: {trigger: "#init-gsap",start: "top top",end: "bottom top", scrub: true }, onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate});gsap.to(airpods, { frame: frameCount - 1, snap: "frame", ease: "none", scrollTrigger: {trigger: "#init-2",start: "top top",end: "bottom top", scrub: true }, onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate}); Let me know if there's a better way I should be doing that! Thanks in advance for any help anyone can provide!