Animations only visible in a div

[Don Kelwin]

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

See the Pen OJBvOXL by Don-Kelwin (@Don-Kelwin) on CodePen

[Rodrigo]

Hi @Don Kelwin and welcome to the GreenSock forums.

 

I read your post a few times and is not clear to me what you're trying to achieve.

 

I think your HTML and CSS is a bit convoluted and this could be achieved easier using flexbox and scales. Animating width/height, margin/padding, top/left and any other position property is not very performant and we always recommend animating transforms, like scale, which should be better in this case.

 

I forked your codepen and made the changes I mentioned above. Only the left side buttons are working. Basically the left submit grows the bar and the backLeft button stops the animation and then reverses it after one second:

See the Pen RweMxQK by GreenSock (@GreenSock) on CodePen

 

I'm not sure that this is what you're after, but hopefully this helps.

If you're looking for something else, please be more specific about it, but clear. Use simple words and a short description of what each element should do.

Happy Tweening!

[Don Kelwin]

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)

See the Pen bGmMexp by Don-Kelwin (@Don-Kelwin) on CodePen

 

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.

[PointC]

I'm with @Rodrigo in saying I don't quite understand the goal here. It looks like you want the bars to extend full length and then shrink down to their end point? 🤷‍♂️

 

If so, I'd say scaleX is gonna be a whole lot easier. Here's a quick fork of your demo. I've cleared all the extra stuff out of the HTML panel as it was causing the demo to not work. I've used a couple timelines for the bars and play them on click of each button

 

See the Pen 002366ab4d7ee265820e0ba42e3e67e2 by PointC (@PointC) on CodePen

 

Hopefully that helps. If that's not what you're trying to do, we need some more context please.

 

Happy tweening.

[Don Kelwin]

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:

1. 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.
2. 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):

See the Pen OJBZpKO by Don-Kelwin (@Don-Kelwin) on CodePen

 

I hope i made it clear on what im trying to mimic.

[GreenSock]

Hey @Don Kelwin. Welcome to the forums.

 

I read your post a few times and I'm totally lost, sorry. These forums aren't really for "here are my requirements...please show me how to build it" (please read the forum guidelines) but we're happy to answer any GSAP-specific questions, like about the API. It sounds like you might benefit from hiring someone who knows the tools pretty well and can walk with you through the process of getting it all built according to your vision.  Don't get discouraged - keep learning and you'll be an animation superhero someday. 

 

Good luck!

[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:

1. 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?
2. 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?

[PointC]

1. Yes - that's usually accomplished with overflow:hidden.

2. Yes - but remember zIndex only applies to positioned elements.