Jump to content

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

Stefano Monteiro

  • Content Count

  • Joined

  • Last visited

Community Reputation

6 Newbie

About Stefano Monteiro

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Awesome @OSUblake, I like the second option better as well. Thanks
  2. Hi, I have one JS file where I deal with all animations on the website. Whenever I load a page which doesn't have a specific element that should be animated the following warning is shown in the console. Nothing breaks and it is not a big deal, however I would like to know if this can be avoided in a GSAP way. If I was writing plain JS I could write it like this: let element = document.querySelector(' .element ') !== null; Here is how I have the Blog Hero Timeline in my JS. // Blog Hero Timeline gsap.set( [ ".blog-h
  3. Hi, I wanted to have the stagger only on the first .to(). For some reason the stagger happens on the second one as well. Thanks
  4. Indeed. Thanks for noticing that. The DrawSVG plugin does not animate <text>. I would have to make it <path>. Thanks
  5. Hi, I have this strokeDashoffset animation, but weirdly it finishes at a third for the set duration. https://codepen.io/stefanomonteiro/pen/YzZzQPo
  6. That's really helpful. Thank you very much. And thanks for the non batch version as well. I have tried implementing that way too and had failed. Now I can do both. Thanks
  7. Hi , How can I make it so that the animations play when the elements enter the screen for the first time only? Currently, if we scroll back up and enter the trigger zone from the top the animation will play again. Ideally, I want to avoid it. I am also struggling to have the elements hidden before triggering the animation. Finally, it seems to have a bug. When we scroll back up and back down into the trigger zone before the animation ends, it will play only until the time the animation was at when we entered the trigger zone again. https://c
  8. @Carl @GreenSock Or anyone else, can I have some insights on the above please. Hugely appreciated.
  9. Hi Rodrigo, Thanks for replying. I did split the code and set the batch function only for the numbers (elements that need the batch), and applied normal scrolltrigger on the other svgs. https://codepen.io/stefanomonteiro/pen/poRmBwE?editors=0010 Few things I am not happy though, 1 - the numbers (batch elements) are visible before the scrolltrigger start position; 2 - the animation happens every time the elements enter the screen (start position), anyway to disable it once animation is completed? 3 - sometimes the third svg (# three) an
  10. I am struggling to have the drawSVG working with ScrollTrigger batch(). Basically I will have multiple svgs on the page that will be draw triggered by ScrollTrigger, so far so good. However there is a section where multiple svgs will be trigger simultaneously and I want to add a stagger effect on them. First question: Do I need to set up batch() to achieve this, or just ScrollTrigger is enough? (first pen) Secondly, In the second pen I sort of managed to achieve the effect. However, the animation is being triggered whenever any other svg on the page is triggered. I tri
  11. Alright. Currently on the Advanced Stagger Effects of GSAP 3 Beyond the Basics. I am getting there, slowly but surely Thanks again.
  12. Hi @Carl, So I found a video of yours regarding having a cleaner workflow and use timelines as functions. I am trying to apply to the example above, but it is not working whit tweenFromTo() Here is another codepen: https://codepen.io/stefanomonteiro/pen/NWdmQpx?editors=0010
  13. @Carl do you constant upload new classes and content on the courses? I’m on the monthly plan.
  14. I have never used this yet. But it seems that you just need to create another batch and call those elements. Here is a forked pen with animating the name https://codepen.io/stefanomonteiro/pen/LYxvLMm
  15. Awesome. That works perfectly. Worth mentioning that the translateX(-100%) should be set in the CSS as well to avoid FOUC. Thanks