designedaudio

I tried a few different ways w/o success. I knew the solution was simple! You're a true ninja THANK YOU! Have a great week.

This is probably one of the dumbest questions... I've got a few SVG elements that are moving but are not clipping properly when animating. I want the black box to be the SVG clipping-path. How do I get the moving elements to update that clipped path? Thanks in advance!

I'm having a problem using a class variable not staggering in a <ul> of items. I don't want the highlight boxes to appear at the same time. I stripped down my project to just this feature. What's missing is the forEach() function that loops though the list items and applies a pseudo class. The pseudo class puts a box that covers the lines of text and animates its width: 0% to 100%. The css width is that class variable. var(--fillwidth) Am I going about this wrong or am I missing something? Thanks in advanced! p.s. Here is the original tween element tl.from( ("html", toolList), {"--fillwidth" : "100%", duration: 0.25, ease: "power3.out", stagger: 0.125 })

First post here! I've read documentation, searched the forums and noodled around quite a bit before posting and I'm still stuck! So here's what I'm trying to accomplish. I'm sure it's super easy solution and I'm probably missing a minor step. I have a section of cards that are stacked and they're overlaying each other. When you click it the card div it pops up, if there is already an active card the previous one shuffles back into the stack and the new one pulls up. Here's my code that I have so far. It only shuffles them up and down without previous going back into the stack. const GetCards = document.querySelectorAll(".tools-card"); GetCards.forEach(function(cardList, index){ const cardTL = gsap.timeline({paused: true}).to( cardList, {duration: 0.5, x: "-=10", y: "+=250", scale: 1.05, ease: "expo.inOut"}) let activeCard = false; cardList.addEventListener('click', () => { if(activeCard === false){ cardTL.play(); activeCard = true; }else{ cardTL.reverse() activeCard = false; } }) }) I've tried several things like adding tags to the timeline and several methods() but I clearly don't know what I'm doing! Some guidance would be stellar. Thanks in advance.