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

Hello. It is recommended that fixed elements go outside your wrapper Please see the ScrollSmoother caveats in the docs: https://gsap.com/docs/v3/Plugins/ScrollSmoother/#caveats

thanks for the demo. The big problem is that you are putting a ScrollTrigger on a tween in a timeline. This creates a conflict where both the timeline and ScrollTrigger are fighting for control of the tween. Please read: https://gsap.com/resources/st-mistakes/ Another issue is that your ScrollTrigger's star postion is "top top" which means it is active the instant the page loads. I set it to use start:"top -1" which forces the user to scroll. The demo below should basically work if the user does NOT scroll while the first animation is playing: https://codepen.io/snorkltv/pen/QWzXQWE?editors=0010 There's unfortunately a few logic problems to work out if you want to animate an item with a timeline and also allow the user to control a tween using relative values on that item via a ScrollTrigger. The big issue is that if the box has a margin-top of 50 while animating at first and then the user starts scrolling, then the ScrollTrigger animation will have a starting value of 50 and end value of 150. You could try to prevent scrolling by setting overflow:hidden on the body during the first animation but then the page will most likely shift when the scrollbar gets added. I'd normally recommend against preventing scrolling. Also, I would stick to animating transform values like "x" instead of "marginTop".

Each button has a data-target attribute which is the id of the element it should animate https://codepen.io/snorkltv/pen/LYMopVZ?editors=1010 <div class="targets"> <div class="box blue" id="box3">3</div> <div class="box red" id="box1">1</div> <div class="box orange" id="box4">4</div> <div class="box purple" id="box5">5</div> <div class="box green" id="box2">2</div> </div> <div class="buttons"> <button data-target="#box5">5</button> <button data-target="#box1">1</button> <button data-target="#box2">2</button> <button data-target="#box4">4</button> <button data-target="#box3">3</button> </div> The index or order of elements no longer has any importance. hope this helps

the trick is to keep track of the active item or active animation in a variable. in my demo below you will see that every time you click on a pill shape the currently expanded item closes https://codepen.io/snorkltv/pen/YzGpXWO this demo from @PointC looks pretty close to what you are doing as well https://codepen.io/PointC/pen/popwopd

Although this relies on svg I think some of the basic concepts could apply https://codepen.io/snorkltv/pen/KKmZYGy?editors=1000

I’m not at my computer and it’s unlikely I’ll have the time necessary over the weekend to be of much help. However, this is a fairly intriguing scenario. it’s clear you’ve put some effort into this and you know a fair bit about gsap and ScrollTrigger. i have quite a bit of experience and after thinking of this for awhile I’m still not exactly sure how I would approach it. However, I do think you could do it by putting the majority of animation in one timeline that you scrub through with a single ScrollTrigger. in fact I would strongly suggest that you take some time to approach this fresh and just make all the animation work without ScrollTrigger. this serves 2 purposes: 1 it forces you to make sure you understand exactly what needs to happen on the animation side. 2 it gives us a much better idea of what the final product should look like and better see where things like loops, callbacks, and additional scrolltriggers can be used to streamline the process. I’m guessing this will also need to be responsive which is hard to account for later in the process. So that’s another thing to have planned out prior to adding ScrollTrigger too. there is no standard way of approaching these types of animations and it takes a lot of experimenting to find a solution that works best. from the demo and images you provided there are still quite a few unknowns. If you can provide a more complete animation mock-up without ScrollTrigger then myself and others will be better suited to offer some actionable guidance. again I think a lot of this can be done by scrubbing a single timeline.

Thanks for the demo. You did a good job. The main issue is that you aren't setting up your cycle timeline until after the headings slide in. This caused you to see all the words on top of each other in their "pre-animated" state. I did a few things I set the cycleWords function to return the timeline I called the cycleWords function before the main timeline was built I paused the cycleWords timeline at a time of 1 (this makes only the first word show) I changed your onComplete callback on the main timeline to tell the cycle timeline to play https://codepen.io/snorkltv/pen/BavGPpo?editors=0010

Hi and welcome to the GreenSock forums, This would be an excellent use of a timeline const tl = gsap.timeline() tl.to(object, {x:300, duration:1}) tl.to(object, {opacity:0, duration:0.5}, 0.5) // starts at 0.5 seconds Be sure to read the Timeline Docs and watch my video in there

Hi @PapaDeBeau I think the main problem was just the syntax / formatting in the eventlisteners. When using multiple lines in an arrow function you need the {} https://codepen.io/snorkltv/pen/eYbVPPm?editors=1010 item.addEventListener("mouseleave", () => { console.log("Still works") one.reverse() }); Also in your loop item is the button with a class of ".Amazing" so I don't think you need to do item.querySelector(".Amazing"), you just need to animate each item. also, be careful with from tweens on buttons. you don't want them moving away from the mouse when you enter them because then they could trigger the mouseleave immediately. Glad to hear you enrolled in the classes! I'm sure if you put in the time and practice you find a wealth of information in there. Carl

I can't really dig into all your code, nor do I really understand the latest question. However, if you feel that markers are thrown off somehow this is usually a side-effect of animating the trigger. In other words, don't make the trigger (section) the same thing as the target of your tweens. ScrollTrigger needs to measure the y distance of the trigger in order to position the markers, start, and end values. Animating it causes trouble. use a structure like <section class=trigger"> <div class="thingToAnimate"></div> </section> ScrollTrigger.create({ trigger:".trigger", animation:gsap.to(".thingToAnimate", {y:200}); }) one way to test if this is the issue is to just make your animation change the opacity of the section. If things work well this way that means that animating the y of trigger is the issue.