tibo78

Thank you @akapowl!

Hello, My animation should happen on a click of one button that is having the ".btn-ripple" class. Issue is that when I click on one button the other buttons' animation are fired too (as they all have the same class). Could you please guide me where I should look to find the right code ? I am trying to make a loop on this specific animation. gsap.utils.toArray(".btn-ripple").forEach(btn => btn.addEventListener("click", function(ev) { gsap.fromTo(".ripples", { border: '1px solid #fff', left: ev.offsetX, top: ev.offsetY, height: 0, width: 0, opacity: 1, }, { border: '0px solid #fff', height: 60, width: 60, opacity: 0, duration: 1, ease: "power2.out", stagger: 0.2, }); } ) ) Thank you Thibaut

Thank you !

Hello, I am stuck, most probably it is JS related and no GSAP related, so sorry for this. If this is the case just let me know, no worries. I have the following code: basically it gives to class circle and wrapper a certain timeline animation. The issue is when I duplicate the DIV, the effect when hovering on .wrapper will be on all div having the class .circle. Not sure I am clear here. Seems the issue is both the classes but also the timeline as it is only set to .circle, maybe I am wrong here too. How should I turn the code here to have the .circle effect only applied on the Div I am hovering and not all of them...? Thank you in advance. Thibaut var wrapper = $(".wrapper"), circle = $(".circle"), tl = gsap.timeline({paused:true}); tl.fromTo(circle,{left:0,right:"auto"},{width:"100%"}) .set(circle,{right:0, left: "auto"}) .to(circle,{width:"60px"}) wrapper.on("mouseenter", () => { tl.restart() }) .on("mouseleave", () => { tl.reverse() }); });

Hello, I am just asking if I can replace window by my ID "#section-4-10" ? I just want that y:400 scroll from the ID and not from the top. Sorry if it was not clear. Thank you. Thibaut

Hello, Is the following possible with ScrollToPlugin? cannot achieve it through the docs. Once it arrives to a section, it scrolls 400px one way then 800px the otherway. let de = gsap.timeline({scrollTrigger: {trigger:"#section-4-10"},}); de.to("#section-4-10", {duration: 2, scrollTo: {y:-400, autoKill: true}, delay:5}); de.to("#section-4-10", {duration: 2, scrollTo: {y:800, autoKill: true}, delay:5}); I just replaced myDiv with my section reference. Sorry for the naive question and dirty code. Thank you Thibaut

Clear, thank you !

Hello, Is ScrollToPlugin supposed to work in a timeline? I tried but when it gets to the scrollTo function, it just scrolls a bit (approx 60vh below), so not as indicated (target is to the next section, which is 100vh below) even if I change the target of the scrollTo (e.g. a section which is further below) it moves/scroll just a bit to the same location. As soon as I exclude the scrollTo from the timeline it scrolls where it supposed to (to #section-4-10). let tg = gsap.timeline({scrollTrigger: { trigger:"#div_block-2-10", toggleActions: "play pause resume reset", tg.from("#div_block-2-10", {duration: 3, ease: "back", x:-1500, rotate:-360}); tg.to("#div_block-2-10", {repeat:1, ease:'linear', duration:2, rotateY:360,}); tg.to("#div_block-2-10", {duration: 1.5, ease: "linear", x:1500, rotate:360}); tg.to(window, {duration: 2, scrollTo: {y:"#section-4-10", autoKill:true}, ease:"power4"}); I also tried with Snap (snapTo: 1) but same behavior, it just just scroll a bit (at the exact same location whereas the scrollTo is actually stopping) instead of the intented behavior. Thanks Thibaut

Hello, I have a weird issue, some my animations on one page work only if I refresh the browser (all animation from the last third part of my page). It seems they are triggered already from the beginning of the loading of the page or at some point (but before the actual scrolltrigger action). But as soon as I refresh it works properly as it should be. Any clue? I looked in the console, no error. https://agencekokoro.com