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 ?

Hi @tibo78, when you use $('.whatever') jQuery will target all those elements from your page, so it is the same as document.querySelectorAll('.whatever'). So when you use those elements to animate with GSAP all are affected. You need to target only the elements you want to animate, you can do something like this: https://codepen.io/nicofonseca/pen/0aa7834959a64963e469a2d64e5328ec

Hi @rala , welcome to the forum! ? GSAP has been in the market for a long time and has lots of tutorials (free and paid) and also you can find more stuff inside the forums. If you want to start some courses I can recommend these ones: https://www.creativecodingclub.com/ https://www.motiontricks.com/ And to learn more about the effects you were looking you can go to the forum, for example: Hope this helps and if you have any issue you can ask on the forum providing a minimal demo and we'll help you! ?

Hey @Syntrix , If you use '.tiles .child' you are affecting all tiles children of your page, but you need to target only the clicked tiles. For example: https://codepen.io/nicofonseca/pen/1a2940a4f8186b528f3fd56344e813a8 I added this on your code and now only the content of the clicked tile will be animated ? const content = tile.querySelector('.inner-content'); https://codepen.io/nicofonseca/pen/6b14dfdd6d6d63285ba927580178efa1?editors=1010

Hey @PG1 that is because Chrome blocks the audio if the user didn't interact with something in the page. You need to add a button or any action so the user can interact on the page before your animation. You can check this if you click on the page before your animation begin. To avoid audio errors you can go here. ?

Sure, you can add those functionalities. In the example you have the currentSlide variable and you use it wherever you need. About the timer, you can do a tween using DrawSvgPlugin and when the animation is completed you can go to the next slide.

Hey @Syed Azam, welcome to the forum! ? You can do something like this: https://codepen.io/nicofonseca/pen/e81138427318c2826079e5c3f2ac4d41?editors=1010 The trick to achieve the mask effect is move the parent element to a direction and they child element to the opposite at the same time. gsap.to(parentElement, { xPercent: -100, duration:1 }); gsap.to(childElement, { xPercent: 100, duration:1, }); I hope this can help you. ?

@jeanettable ScrollTrigger in your timeline works well. Your issue is because your css, as you have all your elements with position:absolute , I set a height on your #intro and everything works well ? https://codepen.io/nicofonseca/pen/ab0c7d748ae152d129527fa5d1b0e825

Hey @NickWoodward. This seems like a browser render issue. You can try adding a higher z-index in the pseudo element or adding a translate3d(0,0,0) / translate3d (0,0,1px) ?

Remove the rotationX:180 and set rotationY:180 gsap.set(".qf-back", { rotationY: 180 }); https://codepen.io/nicofonseca/pen/d545b63056a5335bae9abe60660b0c46?editors=1010

Hi @alexe100dra , welcome to the forum! ? The correct way to reverse a timeline is like you are doing it. Yes, you can do the code "more efficient" by using a loop for example, and checking isActive() and .reversed(): https://codepen.io/nicofonseca/pen/f2f56f3b7d0613dce23a71cc0ca7713e But this way to handle it is one way on a million, as your question is more related to JavaScript and not GSAP ? Btw, to check if anywhere on the screen was clicked you can do it like this: document.addEventListener("click", yourFunction); Happy tween! ?