Carl

Thanks for the image. That's a great way to try to keep track of the points. Sorry, for any confusion, but in my haste I actually had the "bar3" values duplicated in my clipPath code which is why you were seeing extra points. Thanks for catching that. I removed the extra row of values. As for the from values, you can use those point objects for each bar to come up with a totally custom starting position using a set(). In the demo below I removed the animation to hopefully make it easier to understand how each bar now has a custom y starting value https://codepen.io/snorkltv/pen/qBwMPMw For what it's worth, keeping track of all those points in the clipPath string is pretty tricky for me too, so don't feel bad if it feels like a lot ot take in. As for using svg, the post @mvaneijgen linked to is quite comprehenisve. However, below is a demo from one of my svg lessons if it helps https://codepen.io/snorkltv/pen/rNKVrYx there are now 10 clipping and masking video lessons in SVG Animation with GreenSock if you want to dive deeper.

Thanks for providing the demo, it made my approach much easier than starting completely from scratch. This is a cool effect and as stated earlier, I'd probably try to use SVG for this 99% of the time. However, I was intrigued about making a more flexible clipPath approach. In the demo below I animate the y value of each bar independently using a stagger. https://codepen.io/snorkltv/pen/rNbrEra?editors=0010 In the onUpdate I glue all the values together into a giant clipPath string. Using this technique you can animate the bars from center, start, or end adjust the stagger's each amount adjust the distribution of start times with an ease (in the stagger object)

Hello and welcome to the GSAP forums, If you just want a timeline to repeat a few times and then do something different at the end I would set up and repeating timeline with a callback that can play a custom animation when the repeat count reaches a certain value. In the example below the bottom flashes green after the final iteration. https://codepen.io/snorkltv/pen/poeEmWP However, since you want to scrub in GSDevTools I would create the repeating timeline and scrub through it multiple times in another timeline using tweenFromTo() In the example below the red box does not fade out (reset) on the last iteration which is what it sound like you want. https://codepen.io/snorkltv/pen/ZEZoqBV?editors=1010 Both of these approaches are explained in detail throughout my GSAP courses if you are interested in gaining a deeper understanding. Hopefully this gets you on the right track for now.

I was working on a basic example, but the article from @PointC that @mvaneijgen mentioned will explain everything you need to know and more! https://codepen.io/snorkltv/pen/mdooqQX?editors=1010

Thanks for the demo. In the future please add new information to new replies. Editing the first post repeatedly makes it difficult for us and others to follow the conversation. I don't know enough about swiper in react to help you with this, particularly how to reference the Swiper inside the onChange callback. However, this bare-bones example shows how to animate the active slide (change it's scale) and animate something inside it (rotate the number div) Hopefully you can find a way to apply something similar to your project https://codepen.io/snorkltv/pen/WNmzezX?editors=0011

Sorry, I'm not sure I can edit it so that you easily understand it. That's why I spend hours creating video lessons that explain everything in detail. However, this is what the edited code would look like: https://codepen.io/snorkltv/pen/wvOyeYO?editors=0010 Good luck with the rest of your project

it's very hard to tell without a minimal demo. it sounds like you might just be animating it to 100 multiple times which won't show any change if the y is already at 100. make sure you are increasing the y value by 100 each time. This can be done using the relative string syntax y:"+=100" gsap.to(something, {y:"+=100"})

This seems just like a recent lesson from my SVG Animation with GSAP course. The general idea is that each item has it's own repeating animation created in a loop https://codepen.io/snorkltv/pen/zYyBKmG

Thanks for the demo. Try setting body { overflow-x: hidden; } Or you can put your <p> element in a wrapper div that has the same css. https://codepen.io/snorkltv/pen/qBvNdWd

if you want the whole wave play through and then just repeat maybe just have a timeline that repeats like so. https://codepen.io/snorkltv/pen/JjzGgVY?editors=1010 the first time I read the question I thought each line needed their own repeatDelay.

thanks for the demo. I think a loop would provide the best solution / most flexibility and you could have all your tweens in a timeline that could be paused/played as normal. Here's a not-so-conventional approach using a slow() ease that is configured to end where it begins thus getting rid of the need for a yoyo. If you don't like the ease of the up-down animation you could also create a customEase with finer control over the rate of change. Here is a quick demo of the slow() ease: https://codepen.io/snorkltv/pen/oNVbKPb?editors=0010 I slowed down the stagger each amount so that you could see how the repeating works.

thanks for the additional info. I believe this has to do with overwriting. You are creating conflicting tweens and my guess is that when played in reverse the animation that animates from x:0, y:0 to x:0, y:0 is winning the battle and thus you see the box jump back to the initial start state. If you set overwrite:"auto" on tweens 2 and 3 then: tween 2 will kill the y portion of tween 1 tween 3 will kill the x portion of tween 1 I think this works for this exact scenario you have https://codepen.io/snorkltv/pen/PoLZZaE?editors=0010 If you set overwrite:true then tween 3 will kill BOTH tween 1 and tween 2. You can give it a try to see how that looks (bad) from the docs https://gsap.com/docs/v3/GSAP/Tween I also think this video will help with overwrite modes I know you are saying that the tweens are automatically generated, but my advice would be to add whatever logic necessary to avoid creating conflicting tweens in the first place. Hopefully overwrite:auto solves the problem Carl

Thanks for posting the nice demo. For case 1 the perceived delay is just because the first tween where you animate from x:0, y:0 does nothing for 0.5 seconds. For case 2 you don't need that first tween at all. When I removed it looked like things were working fine. Although I don't think it's 100% necessary here it is recommended that you don't animate the element that you use for the trigger. I added a wrapper div to act as the trigger. Please see if this gives the desired result https://codepen.io/snorkltv/pen/bGZEVaw?editors=0110

perhaps running your value through this regular expression will help: https://codepen.io/snorkltv/pen/KKEKPWX That demo is a simplified version of the following demo from my lesson on creating reusable GSAP effects https://codepen.io/snorkltv/pen/NWRqmOv?editors=0010 If you need more help understanding what's going on check out my complete GSAP training. You'll learn a ton of helpful tricks like this. EDIT: if you need help with regular expressions, I recommend chatGPT 😃

Perhaps this simplified demo of mine can help. The basic idea is that your background needs to be larger than the element it is applied to. I'm using a portrait image inside a square container which guarantees there will always be extra image to reveal https://codepen.io/snorkltv/pen/gOZaoPK