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


Everything posted by nico fonseca

  1. 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 ๐Ÿ™Œ
  2. 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
  3. 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! ๐Ÿ™Œ
  4. 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
  5. 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. ๐Ÿ™‚
  6. 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.
  7. 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. ๐Ÿ™‚
  8. @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
  9. 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) ๐Ÿ™‚
  10. Remove the rotationX:180 and set rotationY:180 gsap.set(".qf-back", { rotationY: 180 }); https://codepen.io/nicofonseca/pen/d545b63056a5335bae9abe60660b0c46?editors=1010
  11. 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! ๐Ÿ˜Š
  12. 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, } )
  13. Hey @PG1 you can use .timeScale() method to change the velocity of your timeline ๐Ÿ™‚ https://codepen.io/nicofonseca/pen/2bf967d372822e74956540bc54c5650e
  14. I think you see a different behaviour in your site/Codepen because Codepen uses an Iframe. You can check, for example, the Codepen full page vs the CodeSandbox full page (no iframe). I tested it on my iPhone and the behaviour is completely different. Making an infinite scroll on mobile it can be a very hard task, more if you use a native scroll. I made it here https://danielebuffa.me/list/ and I wanted to cry. My recommendation is to try to make your nice effect only for desktop, and on mobile remove the infinite scroll so you can save yourself from a lot of headaches.
  15. @Cassie i didn't know about this Safari bug and i don't find anything related to it, but css filter is not working on svg elements ๐Ÿ˜ฎ Safari is the new IE!!! ๐Ÿ˜‚ https://codepen.io/nicofonseca/pen/4c68be32786a888814a93cdbe34ab177
  16. Hey @Faraaz , welcome to the forum! ๐Ÿ’š Apparently this is a Safari bug. I tested it on Mac and Iphone, I don't know if your issue is happening on Android too. I added the filter in the HTML and it works well https://codepen.io/nicofonseca/pen/a74e2ca0652ab6272c02bec133ccae49 Btw, to use fromTo animation do it like this: tl.fromTo('.triangleL', 10, { attr: {points:'0,338 0,223 481,280'} }, { attr: {points:'0,398 0,163 481,280'} } ,0); instead of: tl.from('.triangleL', 10, {attr: {points:'0,338 0,223 481,280'}},0); tl.to('.triangleL', 10, {attr: {points:'0,398 0,163 481,280'}},0);
  17. Ups, sorry for that! Now is public ๐Ÿ˜… And same for me, I saw it working well on mobile.
  18. Hey @Fisher666 You have images of 4.4MB, I changed them and the transitions worked well. If you want to animate images it is recommended to optimise their weight. The overflow is preserved in the transition, the problem is that you can't see it because you set the height property with !important and you should NEVER do that on your css, even less if you need to animate that property later. ๐Ÿ™‚ https://codepen.io/nicofonseca/pen/2bc450a7d05187e2c8109438a9096b88
  19. You can add callbacks on your timeline like this: const tl = gsap.timeline({ onUpdate:..., onComplete:..., onStart:..., ... }); Or you can use eventCallback() or call() , depending on what you need.
  20. Hey @matt1 welcome to the forum! ๐Ÿ’š Here you have a thread about ScrollTrigger + sequence images ๐Ÿ™‚ My recommendation is to use jpg images instead of png and reduce their size as much as possible (you have images of 150kb)
  21. Hey @jensnielsen welcome to the forum! ๐Ÿ’š ScrollTrigger is not triggering because elements are outside the window screen, so you have two ways to handle this: 1. Adding start: "top bottom+=150" https://codepen.io/nicofonseca/pen/f181d91946646195e7439a529a233c93 2. Adding refreshInit to set Y value as zero https://codepen.io/nicofonseca/pen/9e57a43d560e98d4ae4ab0f5bcfc5a4d Another thing to keep in mind, whenever you want to handle a property with GSAP it is better to set it also there instead of CSS. Hope this helps! ๐Ÿ™‚
  22. Hey @tolka you can do something like this ๐Ÿ™‚ https://codepen.io/nicofonseca/pen/badf67592921f8951b6366ce06367181
  23. I made some example for you using clipPath ๐Ÿ™Œ https://codepen.io/nicofonseca/pen/d48c0e046673bbec4296bd9a692ae1d2
  24. Nice! I really like the mobile version ๐Ÿ™‚