nico fonseca

Another thing, you should use it like this: const tl = gsap.timeline(); tl.from(el,{...}) instead of: const tl = gsap.timeline(); const inTwoFirstValues = tl.from(el,{...}) inTwoFirstValues;

I only used querySelector to get the div child from valOne/valTwo and set the innerHtml. I don't know if I understand what you need, but the clip animation is not doing anything. Also, you need to use clip-path instead of clip as it is deprecated, you can learn more here. I leave you an example of a clip-path animation ? https://codepen.io/nicofonseca/pen/4fc55558b1a5fc49a4170e4b6031aa59

Hey @KiwiVFX, welcome to the forum! ? That is more like css issue because if you need width:0 with padding you need to set in the child element. https://codepen.io/nicofonseca/pen/c497e89ba1c9931e8fc2c6a5a142fe17

@eneko.dev You can achieve this by using two different .characters and start/end move depending on "bikeOMatic" position. ? https://codepen.io/nicofonseca/pen/f70523088ca11cad4f3929633e3a71c2

Hey @Ritesh Malviya welcome to the forum! ? I don't know if I understand you 100%, but you can set the canvas width/height like this: canvas.width = window.innerWidth; canvas.height = window.innerHeight;

Hey @Joe165 you can use the ScrollTrigger.matchMedia() ? https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

@mikel I really like this ! ?

@polymedia If you need to move the lines synchronously with the circle position, you can do something like this: https://codepen.io/nicofonseca/pen/e93cef6b2e0ca6a6169b15f08129d21b Also, you can check the quickSetter method to improve the performance ?

Yes, sure. https://codepen.io/nicofonseca/pen/56ee731382f5c593dae30b76f0c36588

@Skatedan something like this? https://codepen.io/nicofonseca/pen/4e8a91ca94a783949a147dd62661552a

Hey @Sabbir welcome to the forum ? ! Some examples that can help you: https://codepen.io/GreenSock/pen/9e7bf431223f98516c0431cfdefb6e3f

@Kitson Chan Yes, the animation only scale the images. There is a small trick on the CSS to position the images and achieve this effect, and then with GSAP add the pin and the images scale animation. The pin is on the .grid element. If you want to see when the pin start/end, check the markers by adding markers: true on ScrollTrigger.

@animationmagic I attached a SVG and AI file and a little Codepen so you can see how it works. In the files you'll see two duplicated paths ( this is just so you can see how it works, but you will need to merge them into one), so with that it will be easier to calculate the animation since you only need to move -100%. https://codepen.io/nicofonseca/pen/26e4a281da950d94c7be7cae62d144e9 And this made me want to create some waves ? https://codepen.io/nicofonseca/pen/MWoeERO line-final.ai line-final.svg

That was awesome Jack! Sometimes is hard to explain how to prepare a SVG and you nailed it!!! ? ?

Hey @Aeryla welcome to the forum ! ? You have some issues: - Set pointer-events:none on your .animate class to remove the target and you can interact on the parent .link class - Add a mouseenter event to know when the mouse enter on your .link element and start to animate the box! - Don't animate left, top properties, it's better to use x, y properties - Don't use transform property to change the translate, use x and y - For better performance, calculate the mouse position in the mousemove listener and for the rest use gsap.ticker - You can replace gsap.to(".animate",{duration:0, ...}) to gsap.set(".animate", {...}) or even better if you use gsap.quickSetter I created a Codepen so you can check it out ? https://codepen.io/nicofonseca/pen/48e69918ed59edc1ed41f503d06601f8

Hey @animationmagic welcome to the forum! ? You need to change the start/end values on the motionPath. https://codepen.io/nicofonseca/pen/779fc6f97e73c787a0aa040aae96b527 Btw: I removed the second section because you have a lot of duplicate IDs and an ID has to be unique.

@bencik You can add all in a timeline and pause when you needed. https://codepen.io/nicofonseca/pen/RwgRrjM

@Elindo when you use a return statement, you stop the flow of your code. You can learn more here. I used this little trick because you needed a HTML button to set a disable/enable state, but on the SVG the button doesn't exist so you need to create something like this or use foreignObject as I mentioned earlier.

Here I made a pen for you https://codepen.io/nicofonseca/pen/b1ff5801861c6ae59f2dcd041c3acfcf

You have a new issue now because you can't use a html button inside of a svg, you need to use a foreignObject and then inside add your html button. Or maybe you can add a little trick on your code to "emulate" a disabled state: let isMyButtonDisabled = false; const myAnimation = gsap.timeline({ onComplete: ()=> isMyButtonDisabled = false; }); mySvgElement.addEventListener('click', ()=> { if(isMyButtonDisabled) return; isMyButtonDisabled = true; myAnimation.play(); });

If you need the elements rendered at the same time, use position:absolute as @PointC said, but if you don't, you can use vue transition hooks and call your animations on the enter/leave methods.

Hey @Sndn welcome to the forum ! ? I don't know if I understand your issue 100%, but you can use ScrollTrigger. Here you have some threads to calculate the progress on the scroll: Btw if you can provide some minimal demo for us we will help you better.

@Elindo x:200 This syntax doesn't exist in Javascript, you can use the getProperty method to get the x value from your element: btna.onclick = () => { if (gsap.getProperty("#Rod","x") < 200) { if(animation)animation.kill(); animation = stagea1(); } else if (gsap.getProperty("#Rod","x") == 200) { if(animation)animation.kill(); animation = stagea2(); } }

@Thomas Günther @OSUblake if you add this it works ?‍♂️ &.fixed { position: fixed; top: 20px; right: 20px; width: 10px; height: 10px; }

@Astroboy is very complicated for us to see what is going on in a JS file with 400 lines of code ? But if you need to remove the float effect you can comment this: tilt(ev) { /* if ( !activeTilt.letters ) return; // Document scrolls const docScrolls = {left : body.scrollLeft + docEl.scrollLeft, top : body.scrollTop + docEl.scrollTop}; const bounds = this.DOM.el.getBoundingClientRect(); // Mouse position relative to the main element (this.DOM.el) const relmousepos = {x : mousepos.x - bounds.left - docScrolls.left, y : mousepos.y - bounds.top - docScrolls.top }; for (const [index, letter] of this.DOM.randLetters.entries()) { gsap.to(letter, 3, { ease: "sine", y: MathUtils.lineEq(this.lettersTranslations[index][1],this.lettersTranslations[index][0], bounds.height, 0, relmousepos.y), rotation: MathUtils.lineEq(this.lettersRotations[index][1],this.lettersRotations[index][0], bounds.height, 0, relmousepos.y), }); } */ }