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 ?