Issue with jerky clipPath, only with overlapping timeline position on .reverse

[loganvenderlic]

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();
    });
});    

See the Pen jOJGVdO by loganvenderlic (@loganvenderlic) on CodePen

[mvaneijgen]

I would make it so that the tweens don't over lap and just play one after the other, but have the first one stop when you want the second tween to take over. This way you don't have to fight with tweens that want to animate the same property at the same time and animating and development will be a lot smoother

 

I've used the following tool to update your clipPath and just moved the points to some position and then used that as the first tween, then from that state moved some more points for the second tween, ect https://unused-css.com/tools/clip-path-generator?p=22AwLmBoFZQhGYbnogLADgHQCYDMA2McdbfQrWDFHFMi2NGiGAblYGIBTYFAdg4CMgA

 

Hope it helps and happy tweening! 

 

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

[loganvenderlic]

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