Stefano Monteiro

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

Alright. Currently on the Advanced Stagger Effects of GSAP 3 Beyond the Basics. I am getting there, slowly but surely Thanks again.

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

@Carl do you constant upload new classes and content on the courses? I’m on the monthly plan.

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

Awesome. That works perfectly. Worth mentioning that the translateX(-100%) should be set in the CSS as well to avoid FOUC. Thanks

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!!

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

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) );

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.

I think you are right. When blocking the font url in dev tools it works. Now I am thinking how to run the script after font load.

Hi, Need a little help here to understand why this is happening. I tried to replicate the same thing on codepen but there it worked as expected. So allow me to paste the link to the full project as well here. The issue is, as you can see on the screenshot, the last two paragraphs not working well with splitText. They have double lines, with one word on the second.

Awesome, it's working now. I will likely have more questions soon, but I'll open new topics if so. Keep the title relevant. Thank you very much for your help and time!

I ended up saving the pen as I went on and added your recommendations. Most recent is on my first message in this thread. https://codepen.io/stefanomonteiro/pen/vYgRxxY

Different than your video where you have mouseenter and mouseleave I only have click. The same eventListener is for starting the animation and to play the second half (after the pause). So, I am passing a condition to see if the progression is zero or one (!menuAnimation.progress() || menuAnimation.progress() == 1) to .restart() it, meaning if it is not either, the animation should .play() The .isActive() did not work, it restarts the animation. Even thought the doc says it should return false for paused state. As for the second part, thanks for the video. I managed to add the background timeline in reverse at the end, but having an issue with the first background animation. I tried two different things: 1 - The animation breaks when running for the second time master .add(background) .add(textIn) .addPause(); menuOpened = master.duration(); master .add(textOut) .add(background.tweenFromTo(background.duration(), 0)); 2 - The background animation starts on page load, not on button click. master .add(background.tweenFromTo(0, background.duration())) .add(textIn) .addPause(); menuOpened = master.duration(); master .add(textOut) .add(background.tweenFromTo(background.duration(), 0));

Carl, The video was perfect. I had seen it on my youtube feed on Saturday, but hadn't had a change to watch it yet. Perfect timing The animation is working, but I have two questions. 1 - I run a different condition on click, instead of checking class I now added if(!menuAnimation.progress() || menuAnimation.progress() == 1). Any better condition comes to mind to check if the animation should restart? 2 - At first I tried to use the chain timelines, with a master one. Because the background timeline is the same but inverted I tried something like this: // Add timelines to Master master.add(background).add(textIn).addPause(); menuOpened = master.duration(); master.add(textOut).add(background.reverse()); It didn't work, but is there any way to replace the .add(background.reverse()) and use the same timeline (background) twice, being the second time reversed? I ended up saving the codepen, so you can see the final code above. The master code (chained timelines) is commented out. Thanks a lot for the help.

That's awesome Carl. I am just about starting the Beyond The Basic videos. Now, on the case above. Let's say I want the exit animation to be slight different. I am thinking of: Creating another `text` timeline, let's call it `textExit` and another `master` (`masterExit`). And invoke this `masterExit.play()` on the exit (closing animation - when `openned` class exists). Is there a better, cleaner solution for this?

Hey, Brand new here, I am trying to figure out the best way to chain these two timelines on the button click. `text` should play after `background` is completed. Special thanks to Carl, going through the course and trying to learn my way into GSAP.