Jump to content

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

Stefano Monteiro

  • Posts

  • Joined

  • Last visited

Everything posted by Stefano Monteiro

  1. Try adding or || in your condition. Or even and && , if you need the code to run if all classes are present in the page. if(document.querySelector('.js-class-1') || document.querySelector('.js-class-1-wrap > *')){ // for all classes gsap.utils.toArray("" + ".js-class-1, .js-class-1-wrap > *," + ".js-class-2, .js-class-2-wrap > *") // and so on, a long list of classes/css selectors .forEach(el => { gsap.from(el, { scrollTrigger: { trigger: el, once: true, }, y: animUpY, autoAlpha: 0, }); }); }
  2. Thanks Cassie. Silly mistake o the Position. About the svg, the path d property has two lines. One being the inside of the A. The code is at the end (M59.46,121H43.85L59.46,98.51Z). Differently than I thought it is being drawn, but very quickly at the beginning. Is there any way to animate this line separately, even though is part of the same path? https://codepen.io/stefanomonteiro/pen/WNRZmGO
  3. Hi, Two issues I am facing here: 1 - Shouldn't the second tween start half way trough the first with '-=50%? 2 - Why is the inside of the A not animating? Also, anyway to make the animation start from the left bottom of the svg?
  4. Not sure that is the best way to describe what I am trying to achieve, basically I want to have the sections behaving as parallax when scrolling. So, it should have a nice and smooth feel. I thought of using the scrollTrigger onUpdate to retrieve the progress and direction. However, not sure how to implement them on the yPercent
  5. Sorry the topic was off the guidelines. I was thinking the change was going to be in the helper function. That worked perfectly. Thank you very much!
  6. I am using the horizontalLoop() helper demo on Codepen and I wanted to add an animation out on the current slide. I did add a rotationY and opacity successfully. I would like though, to have the the animated slide to not move to the left. I believe the change must be on the helper function, maybe add a condition (if is current slide)? Any help is appreciated, thanks. This is the code I added so far: const magnets = gsap.utils.toArray('.magnet') const currentMagnet = loop.current()-1 >= 0 ? loop.current()-1 : magnets.length -1 const animatedMagnet = magnets[currentMagnet] const animateTL = gsap.timeline({onComplete:()=> gsap.set(animatedMagnet,{opacity:1, rotateY:0,delay:2})}); animateTL.to(animatedMagnet, { // xPercent:0, rotateY: 75 }).to(animatedMagnet, { opacity:0, }, '<')
  7. Awesome @OSUblake, I like the second option better as well. Thanks
  8. 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-hero--hor", ".blog-hero--vert", ".blog-hero--text", ".blog-hero--icons", ], { visibility: "visible", } ); gsap .timeline() .from('.blog-hero--hor', { //animation goes here }, "-=.3" );
  9. 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
  10. Indeed. Thanks for noticing that. The DrawSVG plugin does not animate <text>. I would have to make it <path>. Thanks
  11. Hi, I have this strokeDashoffset animation, but weirdly it finishes at a third for the set duration. https://codepen.io/stefanomonteiro/pen/YzZzQPo
  12. 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
  13. 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://codepen.io/stefanomonteiro/pen/RwKmNqw?editors=0010 PS: It's the second time I am opening a topic for this regard. Thanks
  14. @Carl @GreenSock Or anyone else, can I have some insights on the above please. Hugely appreciated.
  15. 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) animates from the beginning with # one; 4 - if I scroll back up (above the start position) and back in before animation is finished, the next animation will stop at the same point I entered back. See video: Screen Recording 2021-04-29 at 7.21.54 PM.mov
  16. 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 tried using forEach loop either wrapping the ScrollTrigger.batch() or inside the onEnter (both codes are commented out), but none worked. Also, I could not figure out why the svg are showing before the animation. I do have them as visibility: hidden on css Thanks https://codepen.io/stefanomonteiro/pen/YzNbKxq?editors=0010 https://codepen.io/stefanomonteiro/pen/RwKmNqw?editors=0010
  17. Alright. Currently on the Advanced Stagger Effects of GSAP 3 Beyond the Basics. I am getting there, slowly but surely Thanks again.
  18. 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
  19. @Carl do you constant upload new classes and content on the courses? I’m on the monthly plan.
  20. 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
  21. Awesome. That works perfectly. Worth mentioning that the translateX(-100%) should be set in the CSS as well to avoid FOUC. Thanks
  22. Awesome, Thanks for the extra tips on browser compatibility. And how to use self on the onEnter It turns out though if I use onEnter and onLeave, the filter is removed before the animation ends in case the scroll triggers the next image. With the chain of .set() works best in this case. Thanks for all the help!!
  23. Sorry I wasn't clear. 1 - Clean the inline style; 2 - The xPercent is responsive, however after the animation is done the inline style of translate is set in pixels. So, in a mobile device when flipped the element position goes off. 3 - See codepen with example. Note the .wrapper, it is animated with xPercent: 100 from its original position oftranslateX(-100%). It comes in on button click a whole chain of timeline happens and at the the inline style is translate with the negative viewport width (100%) in pixels. https://codepen.io/stefanomonteiro/pen/ZELwyeK?editors=0010
  24. I have this sequence of timelines chained to a master using .add(). I need to clear the properties of the first timeline called background , more specifically the xPercent which is bugging on browser resize. I tried adding it to the tweenFromTo at the end as tweenFromTo(background.duration(), 0, { clearProps: true), but it did not work. const background = gsap .timeline({ paused: true }) .to(".lytbox-menu__nav", { xPercent: 100, }) .to(pseudo, { cssRule: { scaleX: 0.4, transformOrigin: "right", }, }); master .add(background.tweenTo(background.duration())) .add(tl2) .addPause(); menuOpened = master.duration(); master .add(tl3) .add( background.tweenFromTo(background.duration(), 0) );
  25. Context: I am using an svg filter to animate images on scroll. It was tricky because the animation is done on the filter not image, so all images with the filter would animate at the same time. Instead of having an svg for each image, I wanted to use the same and avoid duplicate code. I did manage to achieve it, however I would like to know if there is a better approach in doing this. Also, as seen commented out I tried to use ScrollTrigger's onEnter and onLeave. Would like to understand why this approach wouldn't work. I start the timeline with .set() to add the filter to the triggered image inside the loop and finish again with .set() to remove the filter, so it can be applied on the next image when it's triggered.