Jump to content

nico fonseca last won the day on September 10 2021

nico fonseca had the most liked content!

nico fonseca

  • Posts

  • Joined

  • Last visited

  • Days Won


nico fonseca last won the day on September 10 2021

nico fonseca had the most liked content!


About nico fonseca

  • Birthday 05/10/1989

Profile Information

  • Gender
  • Location
    Madrid - EspaΓ±a

Recent Profile Visitors

2,583 profile views

nico fonseca's Achievements

  1. Hey @Antdev , here you have a thread with an effect similar to the one you want to implement πŸ™Œ
  2. I learn something new every day. Thanks @OSUblake πŸ’š
  3. 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. πŸ™Œ
  4. 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
  5. 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(); }
  6. 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/
  7. 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! πŸ™Œ
  8. 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 πŸ™‚
  9. 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 πŸ™Œ
  10. Hey @Sublimio, welcome to the forum ! πŸ’š You can do something like this πŸ™‚ : https://codepen.io/nicofonseca/pen/oNowORr/31c0cc92d31034d23a055f23966b254b Happy tween! πŸŽ‰
  11. 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 πŸŽ‰
  12. 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
  13. 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. πŸ™‚
  14. 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.
  15. 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 πŸ™Œ