Don Kelwin

I already thought so, that's why i provided 2 codepens beforehand. I think im pretty close to the solution but might miss one little detail... Okay then these are my last two questions: is it possible to make animations only visible in a div or in a flexbox? So that they are not visible outside of a certain div/flexbox/range/width? is it possible that animations are hidden by other objects, like with a zIndex? Right now my animations are looking like they are above other objects, even though i thoght i changed the zIndex. So can other (html) objects hide animations?

Okay, I'm trying to give more detail. I want a left side and a right side with some sort of a connection in the middle (so far so good). When you click on a button (let's say the left Button), a colour (blue) should scale to the right Button (like a continous data stream on a cable). When you press a second Button on the left side (the goBack Button) it should stop the data stream and "de-scale" to the right side. There are now two scenarios: you press the goBack Button when the stream already reached the right side. Then the stream (blue colour) just vanishes to the right side. No big deal. you press the goBack Button as the stream is on the way to the right side. Then the left side shall stop streaming immediately and it should move to the right side (like a package frame on a cable) and vanish on the right side again. I tried to mimic the second scenario with the second codepen in my comment (with missing the goBack Button). There you can see that the package on the cable decreases in width as it moves to the right side, which is not wanted. It needs to behave more like a indeterminate progress bar. Something similiar to this (of course not exactly this): https://codepen.io/Don-Kelwin/pen/OJBZpKO I hope i made it clear on what im trying to mimic.

Thanks for the heads-up. And sorry for the messy code. What i'm trying to achieve is sth. similar to this: (Sorry again for the messy code, i reused mine and i know this can be done better with timelines. This is the closest what im trying to get) https://codepen.io/Don-Kelwin/pen/bGmMexp But the bar decreases in width and it "slows down" when it gets to the end. Desired is that the bar stays equal in width and does not slow down. Something like a marquee progress bar.

Hi folks, complete beginner to gsap and html coding. Maybe this is a stupid question, but what i am trying to create is a connection between two things with a bar or sth. similar. On click: it shall expand to the other side and on a second/other button the whole bar shall move to the other side. I tried a few things but did not get the desired result. However when clicking on the Button (Back) to go to the other side while it is still expanding it shall not decrease its width! So reducing the width during the animation process is not desired. So to speak: the bar has to stop at the other submit button and shall not go beyond when pressing the goBack button within 2 seconds: Press "Submit" on the left side, press "back Left" within 2 sec. results in blue bar goes beyond submit Desired result: Press "Submit" on the left side, press "back Left" within 2 sec. : blue bar stops at/near submit wihtout growing thinner or changing the width during the process. (Only at the submit button). So first decrease the width when it reached the other Submit button. I hope you guys understand what I'm trying to tell...