Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

nico fonseca last won the day on September 10

nico fonseca had the most liked content!

nico fonseca

  • Posts

  • Joined

  • Last visited

  • Days Won


nico fonseca last won the day on September 10

nico fonseca had the most liked content!


About nico fonseca

  • Birthday 05/10/1989

Profile Information

  • Gender
  • Location
    Madrid - EspaΓ±a

Recent Profile Visitors

863 profile views

nico fonseca's Achievements

  1. 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
  2. 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. πŸ™‚
  3. 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.
  4. 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 πŸ™Œ
  5. 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
  6. nico fonseca


    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! πŸ™Œ
  7. 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
  8. 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. πŸ™‚
  9. 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.
  10. 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. πŸ™‚
  11. @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
  12. 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) πŸ™‚
  13. Remove the rotationX:180 and set rotationY:180 gsap.set(".qf-back", { rotationY: 180 }); https://codepen.io/nicofonseca/pen/d545b63056a5335bae9abe60660b0c46?editors=1010
  14. 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! 😊
  15. Hey @Haider Amin , your issue is because you are using "0" in position parameters so the animations are overlapping. https://codepen.io/nicofonseca/pen/4e5af64590a44ae227de9b2943b6cde0?editors=0010 If you have a lot of animations, it is better to use labels or different timelines to keep your animations encapsulated and separated. Using labels: https://codepen.io/nicofonseca/pen/d6779e2b71e30a654806fd1378f5fad6?editors=1010 Using different timelines: https://codepen.io/nicofonseca/pen/6c5b9606c52391c02e25d27ece652f84?editors=1010 Other comments: - Don't use querySelectorAll every time as it already returns all the children. const pie_1 = pie_chart.querySelectorAll(".pie_chart")[0]; const pie_2 = pie_chart.querySelectorAll(".pie_chart")[1]; const pie_3 = pie_chart.querySelectorAll(".pie_chart")[2]; const pie_4 = pie_chart.querySelectorAll(".pie_chart")[3]; const pie_5 = pie_chart.querySelectorAll(".pie_chart")[4]; Instead, you can do something like this: const pies = pie_chart.querySelectorAll(".pie_chart"); const pie_1 = pies[0]; const pie_2 = pies[1]; // Or use toArray gsap method const pies = gsap.utils.toArray(".pie_chart"); const pie_1 = pies[0]; const pie_2 = pies[1]; - Don't animate a property when the final value is equal to your previous animation, for example: tl.from(pie_1, { opacity: 0, scale: 0, }); tl.to( pie_1, { opacity: 1, //this is unnecessary because the previous animation animate opacity to 1 duration: 0.5, } )