mvaneijgen

I didn't see any forEach loop in your code. What does not work with a forEach? Seems to work perfectly at my end. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ZEmYOJq?editors=0011

Do you have a minimal demo of this (a codepen) of what you've tried already?

Seems like you can't clip-path a video directly, but if you wrap it in an extra div and clip that it does work. I had to move the clip-path to the visible SVG shapes instead of in the refs. But hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/VwVYvJm?editors=1010

What have you tried your self? Please fork the pen, edit what you think is right and post it back here. We love teaching people use the GSAP tools and if we can see the code you think is right we can better help you.

I've just added a scroll container to the bottom of the html to have enough room to scroll all the way down. <section style="height:500vh"></section> You could set the end trigger to something like end: `bottom-=${theHeightOfYourElements} top`, where you probably want to get the height of the elements dynamically. This will make it that the pin stops working as the height of the elements is the only space left and then they will scroll out of screen normally. Here is a quick example with the height set to 225px and only for the first block. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/Jjeodqw?editors=1010

As stated in your previous topic with the same question pinSpacing: false, is what you could use. From the ScrollTrigger docs check for more info and check the video explaining it Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false. If you'd rather it use margin instead of padding, you can set pinSpacing: "margin". Note: pinSpacing works in most cases, but it really depends on the way you set up your DOM and CSS. For example, if you pin something in a parent that has display: flex or position: absolute, the extra padding won't push other elements down/right so you may need to manually space things out. pinSpacing is just a convenience that works in most situations. Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ZEmEMKG?editors=1010

No lag issues here on Safari Version 16.3 (18614.4.6.1.6) on a MacBook Pro 16-inch M2 Pro, macOS Ventura 13.2.1 I don't know of a way to set flags on a browser based on a specific page. That seems not like how things would work. If you could create a minimal demo demonstrating the issue, I think you'll get a better answer, because someone can dive in the code and see maybe the culprit. Also what OS and browser version the issue is on would be great information.

What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you. Sorry we can't really debug live websites, there is just no way to modify the code. Try creating a minimal demo of what you're trying to do, this has two benefits. First this allows you to experiment and try out new ideas. By making it simple people usually solve 90% of their own bugs. Second, you have an easy version you can share in which anyone could edit and modify the code. ✨ A demo speaks 1000 words ✨

The easiest solution is pinSpacing: false, on your ScrollTrigger object, but you'll find that then thing start overlapping, which is probably not what you want. You could also wrap all your ScrollTrigger elements in a parent div, which gets pinned, this will keep all element stuck with each other, but better yet create one big ScrollTrigger with all the animations you want in them and follow them up one by one. These are some suggestions, but it is hard to say without seeing any code, I'm just guessing here. If you could provide a minimal demo you'll see you'll get much more useful suggestions on these forums

Hi, would it work by using the onEnterBack and onLeaveBack callbacks? I've just copied the code from your onEnter and onLeave and created these, now the text is visible again when you scroll backwards. Personally I think It's still better to add the animations to your timeline and play with the position parameter and just fade the text out when you don't need it anymore. https://codepen.io/mvaneijgen/pen/eYQORpX?editors=0010

Hi @yzhe819 welcome to the forum! The example you've linked more looks like they are using the Observer plugin https://greensock.com/docs/v3/Plugins/Observer If you scroll a little or a lot it only advances one slide. It kinda looks like the demo bellow form the docs, but then in card form. Either way the most important thing when working with GSAP is the animation. If you have not yet created the animation you want to animate with ScrollTrigger or in this case the Observer plugin, you'll need to take a step back and focus on the animation at first, otherwise it's like learning to run before you can walk! https://codepen.io/GreenSock/pen/XWzRraJ Also take a look at the video below it explains how to work with ScrollTrigger, but the same applies for working with the Observer plugin. Next time post some code you've made, so that we can see what and how you're thinking and thus better help you. Hope it helps and happy tweening!

Hi @Waiz I've split your question to it's own topic. Do you maybe have a minimal demo we could take a look at? I've you're using React you can use this StackBlitz React template. Also maybe this helps, I'm not a React user, but here are some tips for using GSAP and React

Hi @Tony Geek you've set all your tweens to immediateRender: false, which means: don't render this animation until it is triggered. Which means GSAP will only start the animation when the ScrollTrigger start marker hits the top of the element. Which will get you flashing animations. If you remove these settings it seems fine to me. I've also add some comments to some lines of code in your javascript, please also check those. Hope it helps and happy tweening! I would also recommend reading the following article/video https://codepen.io/mvaneijgen/pen/WNaVoLJ?editors=0011

Hi @ErwinHeiser welcome to the forum! I wanted to jump on on top of @Carl's feedback with the following pen. DrawSVG can animate strokes, and your current paths don't have strokes only a fill color. As you can see below all your paths have two strokes around the path. If you want to animate something like this you have to redraw them with without a path and only one line with something like the pen or pencil tool from Illustrator, than I think it will look like you want it to. Oh and I also have removed pathLength="1" from the svg, never seen it before and don't know what it is doing and with it looked like it wasn't working. Hoop dat het helpt en veel geluk! https://codepen.io/mvaneijgen/pen/oNarmbv?editors=1010

Hi @Jim Tim I don't know why your text was build up with &nbsp; and there were a lot of inline styles set on the blockquote block, also your blockquote text was wrapped in a <p> tag. If I just copy your text to a new clean blockquote everything works as expected. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/yLRdxMM