Boucing block reveal

[heavylifting]

I'm in the middle of making a block reveal that goes over a text heading which I have done but would like the tail end of the block to bounce at the end when it has finished going over the text.

 

I would like the tail end of the block to bounce at the end of the animation to zero instead of the block disappearing off screen. I have tried all the relevant easing in the GSAP demo page but they just seem to make the block element fly all over the pace at the end? 

 

Thanks.

See the Pen LYQJwKQ by heavymessing (@heavymessing) on CodePen

[Cassie]

Hey there!

 

Would you mind explaining this a little more, I'm not following?
 

45 minutes ago, heavylifting said:

I would like the tail end of the block to bounce at the end of the animation to zero instead of the block disappearing off screen.

 

[heavylifting]

Thanks for your reply.

If you view the attached, I have highlighted what I would call the 'tail end' of the coloured block element. At this moment the end of the block disappears off screen, or eases out but what I'd like the block to do is slide over the text and instead of just continuing to slide fully off, I'd like the back end of the block (or maybe a smaller part of the block) to bounce at the end and on each bounce get smaller and smaller till it gets to zero.🙃

[Xenex122]

@heavylifting A greenshock give me a piece advice that instead of using cssrule just pass a global variable..I think this one might help you..I don't know much about what you are talking about bounce in the end but change your cssrule into global variable

 

See the Pen VwQEYpz by myth-vince (@myth-vince) on CodePen

[Cassie]

Like this?

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

[heavylifting]

Yas, like that! That's great thank you.

[Cassie]

No problemo!