nico fonseca

Hey @Antdev , here you have a thread with an effect similar to the one you want to implement 🙌

I learn something new every day. Thanks @OSUblake 💚

I think that is because it returns an array with different Draggable instances, one for each element, but @GreenSock @OSUblake @Cassie can explain better than me. 🙌

Sorry I forgot the position 0 at the end of Draggable.create()[0] https://codepen.io/nicofonseca/pen/abVXYVP/d949f79cbd73a08da5c5a8a0cde8ba64 I made this demo with Vue for you. If it keeps not working please provide a codepen demo with your code

Hey @mindthegap, To destroy Draggable you need to do something like this: ... ...your vue code ... mounted(){ this.draggable = Draggable.create(...) }, destroy(){ if(this.draggable) this.draggable.kill(); }

Oh sorry for misunderstanding. That effect is very complex so you can play with 2d canvas with the bezier-curve or you can do it with WebGL. Find more information about the WebGL approach on this article 🙂 https://tympanus.net/codrops/2019/09/24/crafting-stylised-mouse-trails-with-ogl/

Hey @Abu Bakar, welcome to the forum! 💚 You can made this effect combining SplitText plugin and animating the keyframes property using the elastic ease https://codepen.io/nicofonseca/pen/dyZaZPr Happy tween! 🙌

Hey @SkyFall, welcome to the forum ! 💚 I updated your code so that the animation works with the button, and I updated with the new GSAP version 🙌 If you need to pause the animation you can use the paused:true property in your tween. https://codepen.io/nicofonseca/pen/eYejgJp And yes if you need to change something with drag you can use Draggable + Inertia Plugin and change the timeline progress for example 🙂

The changes needed to update the demo to the new gsap version are : - Update all src to newest https://unpkg.co/gsap@3/dist/gsap.min.js https://assets.codepen.io/16327/InertiaPlugin.min.js // ThrowPropsPlugin now is InertiaPlugin https://unpkg.com/gsap@3/dist/Draggable.min.js - Change the default props TweenLite.defaultEase = Linear.easeNone; to gsap.defaults({ ease: "none", }); - Change all TweenMax to gsap - Remove throwProps and add inertia to Draggable - Use the wrap function to update the animation progress const wrap = gsap.utils.wrap(0, 1); function updateProgress() { animation.progress(wrap(this.x / wrapWidth)); } Hope this helps 🙌

Hey @Sublimio, welcome to the forum ! 💚 You can do something like this 🙂 : https://codepen.io/nicofonseca/pen/oNowORr/31c0cc92d31034d23a055f23966b254b Happy tween! 🎉

Hey @Bimal Pandey you can use the same tween and play with the reverse and play methods to show and hide the cursor. I made a Codepen for you so you can see the example in action 🙌 https://codepen.io/nicofonseca/pen/XWzgOXo/8dca6234eee2852316e898382b34b303 PS: To follow the cursor you can use the method quickSetter() for a boosted performance Happy tween 🎉

Hey @Dante, welcome to the forum ! 💚 You need to set an ease:none to all your tweens because the default ease is power1.out, the easy way to do that is to set a default ease for your timeline: const tl = gsap.timeline({ repeat: -1, defaults: { ease:'none', } }); https://codepen.io/nicofonseca/pen/65dcf71271bde8d62681bf52e1b7084b

Btw, my recommendation is to try to debug on your site commenting most of the things (CSS,JS) until you see what is the cause of the problem. 🙂

Hey @SWALKER , There are many things can cause that problem, and if in your Codepen works then the problem is probably somewhere in your site. I saw that you have a css animation on your elements .secondary a *, .site-footer a *, .site-header a *, a { transition: all .2s linear; } Try to remove them, as they bring problems when you are also animating with GSAP. If that doesn't fix the problem, try adding will-change: transform on your elements or force3D: true on your tween and see if this improves anything.

Hi @Anael_, welcome to the forum ! 💚 There are many ways to solve this and I created one for you 🙂. The problem when using position absolute is that you lose the .container dimension (width, height) and if the elements were not positioned with position absolute animation can get weird. So I created this, only animating the transform x, y, calculating the container dimensions and the left position of the element. https://codepen.io/nicofonseca/pen/XWareXV?editors=0110 I hope this helps 🙌