mea_culpa

Hi, I'm trying to make transition of path's "d" attribute and something strange happens, I know that both paths should have the same number of points. Can someone point me to what I'm missing here? Thanks in advance!

Hi, my goal is to disable ScrollTrigger trigger points while some animation is happening, and after that returns these trigger points again. What is was trying to: const allTriggers = ScrollTrigger.getAll(); allTriggers.forEach(tr => { tr.disable(); }); setTimeout(() => { allTriggers.forEach(tr => { tr.enable(); }); }) But this removes ScrollTriggers at all and my page JUMPS (bcs its also disables end: '+=...', snap props), hovewer I just want to disable them to trigger, not to disable at all. Is it possible? Thanks in advance!

Perhaps I just had a typo, thanks a lot!

Thanks for answers, I also want to ask if I can put a callback inside gsap.to, .from, .fromTo methods? I'm speaking about: NAVIGATION_TIMELINE .to(navigation, { autoAlpha: 1, x: 0, // ease: "power2.inOut" }, '<') .to(firstStick, { top: 0, duration: 0.1, // I want to add a callback onComplete here, is it possible? }, '<') .to(midStick, { opacity: 0, duration: 0.1 }, '<') So is it possible?

I want to move 4 arrows to span, with '.target' class (in attached screenshot is my goal). Im using VW units, bcs I need it responsive proof on 1280px+ screens. Using some native features like getBoundingClientRect it is a bit crooked, and while changing window size it gets even worse (or maybe it is only while inspecting). Is there any other way like adding 'relative' css property to another parent on load with GSAP, or something like this? Or maybe someone has any other ideas to achieve this? Thanks in advance!

Wow! Thanks a lot!

Thanks for answer! Sorry for being unclear. Better example of what I want to achieve: https://codepen.io/kris-ellery/pen/LYOJBX So, I want to have a ripple effect on mouseover, and reverse it on mouseout (instead of click, like in attached codepen link). Note that animation happens in exactly clicked place on button, this is exactly what I'm asking about. So to recap: I want to create ripple animation (like in attached codepen link) exactly where user hovers button, but on mouse out I want to reverse ripple animation in same place when it happened on hover.

Hi, yea. How to run timeline from specific point on element using e.offset property, which is only allowed inside addEventListener?

Attached example is almost my goal, additionaly to it I want to run animation based on mouse position. The part of code I have: btn.addEventListener('mouseover', (e) => { rect = btn.getBoundingClientRect(); offset = { top: rect.top + window.scrollY, left: rect.left + window.scrollX, }; x = e.pageX - offset.left; y = e.pageY - offset.top; ripple2.style.cssText = ` top: ${y}px; left: ${x}px; `; tl.play(); }); Can someone point me to the right path?Thanks in advance!

I'm wrapping my head around creating accordion using React with GSAP, the attached example is my goal, can someone point me to the right path? Thanks in advance!

Hi, I'm trying to create aside slider with indicators, which will replace each other on scroll (you'll understand idea by looking attached screenshot). So, on scroll '1997' will replace '1996', then '1998' will replace '1997', and so on... Maybe someone can show some similar examples to this on codepen?

Thanks @OSUblake!

Hi, I'm trying to learn GSAP and since TweenLite is deprecated now, is it possible to create effect like in the attached Pen without using TweenLite? Can someone give me some advices?

Thanks for answers!

Hi, can someone please explain why changing easing property from "none | linear", to any other affects transform translate?