<p>Key is creating 2 additional keyframes after the last one (one copy of the last one 5-10 frames ahead and another one in between). The keyframe in between is for shifting the position slightly into the opposite direction. In order to get a non linear animation ease all the keyframes at the end.        </p>

<p><a href="https://i.sstatic.net/gf5Ha.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/gf5Ha.jpg" alt="enter image description here"></a></p>

<hr>

<h3>Instructions</h3>

<ol>
<li>Create a new composition and a new solid layer with the dimensions of the gauge</li>
<li>Click the solid layer and create a mask (double click the rectangular mask path icon to create new mask with the dimensions of the solid layer)</li>
<li>Open up the mask properties of the solid / gauge layer <kbd>M</kbd><kbd>M</kbd></li>
<li>Go to the end of the composition and add a keyframe by clicking on the stop watch of the mask path property</li>
<li>Go to the first frame of the composition and drag both right mask bezier points to the left (this will automatically insert a new keyframe)</li>
<li>Copy the last keyframe 5-10 frames ahead and another one in between</li>
<li>With the cursor on the keyframe in between, drag both bezier points on the right side of the rectangle slightly to the left</li>
<li>Select the last 3 keyframes</li>
<li><em>Right Click > Keyframe Assistant > Easy Ease</em> or simply hit <kbd>F9</kbd></li>
</ol>

<h3>Examples</h3>

<p><em>Bounce to the right</em></p>

<p><a href="https://i.sstatic.net/eydZS.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/eydZS.gif" alt="enter image description here"></a></p>

<p><em>Bounce to the left</em> </p>

<p><a href="https://i.sstatic.net/I94Cq.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/I94Cq.gif" alt="enter image description here"></a></p>

<hr>

<p><a href="https://www.dropbox.com/s/gvocdxhqcxi5xsp/gauge.aep.zip?dl=0" rel="nofollow noreferrer"><strong>Project File Download</strong></a></p>

CC BY-SA 3.0
2015-07-26T09:42:43.277Z
The update is great! The only thing that would be nice is that I can put this effect on every solid with it's own width. Thats the reason why I thought about expressions. But I guess that would not be possible, and I just have to play with the keyframes?
user3625118
CC BY-SA 3.0
2015-07-26T09:48:39.437Z
@user3625118 How many gauges do you really need? If you need 100+ different ones, it makes sense to create a script for this, but that's another question :)
p2or
CC BY-SA 3.0
2015-07-26T09:49:56.457Z
Well the thing is. The solid's width is depending on how many characters are coming on it. I do change the width by hand.
user3625118
CC BY-SA 3.0
2015-07-26T09:57:22.490Z
Uhh, don't think this is easy possible, but as I said it's not that hard to create this setup in 30seconds :) **The only thing you have to adjust is the mask path**. Set the new comp size, _click the gauge layer > right click > fit to comp size_ and adjust the right bezier points one time.
p2or
CC BY-SA 3.0
2015-07-26T10:55:35.300Z
Thank you very much (Danke shön)! It's working great :) I just have to play a bit with the keyframes. Thats okay.
user3625118
CC BY-SA 3.0
2015-07-26T11:00:11.993Z
haha, almost forgot
user3625118
CC BY-SA 3.0
2015-07-27T06:47:25.510Z
There's a good tutorial on how to script this with expressions here: http://www.motionscript.com/articles/bounce-and-overshoot.html
stib
CC BY-SA 3.0
2015-07-25T18:42:29.500Z
2015-07-26T09:35:08.577Z
2015-07-26T09:35:08.577Z
p2or
<p>The news channel in my country is using a nice bouncy/slide effect. Now I'm trying to recreate that in After Effects. I tried many effects and expressions, Googled a lot and watched many tutorials. But none fit to my expecting result.</p>

<p>Does someone know how to recreate those effects? With expressions or maybe a nice plugin?</p>

<p><a href="https://i.sstatic.net/RF2rW.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/RF2rW.gif" alt="Animation"></a></p>

<p>Look very close to the end of the bar. Its bouncing a little bit.</p>

<after-effects><animation><after-effects-expressions>
How do I create this slide/bouncy effect in After Effects?
user3625118
# How do I create this slide/bouncy effect in After Effects?

(Asked by: username_0 on 2015-07-25)

The news channel in my country is using a nice bouncy/slide effect. Now I'm trying to recreate that in After Effects. I tried many effects and expressions, Googled a lot and watched many tutorials. But none fit to my expecting result.

Does someone know how to recreate those effects? With expressions or maybe a nice plugin?

[![Animation](https://i.sstatic.net/RF2rW.gif)](https://i.sstatic.net/RF2rW.gif)

Look very close to the end of the bar. Its bouncing a little bit.

**Tags:** after-effects, animation, after-effects-expressions


---

## 1 answers

### Answer by username_1 on 2015-07-25. Score: 1 | Accepted answer

Key is creating 2 additional keyframes after the last one (one copy of the last one 5-10 frames ahead and another one in between). The keyframe in between is for shifting the position slightly into the opposite direction. In order to get a non linear animation ease all the keyframes at the end.

[![enter image description here](https://i.sstatic.net/gf5Ha.jpg)](https://i.sstatic.net/gf5Ha.jpg)

---

### Instructions

1. Create a new composition and a new solid layer with the dimensions of the gauge
2. Click the solid layer and create a mask (double click the rectangular mask path icon to create new mask with the dimensions of the solid layer)
3. Open up the mask properties of the solid / gauge layer `M``M`
4. Go to the end of the composition and add a keyframe by clicking on the stop watch of the mask path property
5. Go to the first frame of the composition and drag both right mask bezier points to the left (this will automatically insert a new keyframe)
6. Copy the last keyframe 5-10 frames ahead and another one in between
7. With the cursor on the keyframe in between, drag both bezier points on the right side of the rectangle slightly to the left
8. Select the last 3 keyframes
9. *Right Click > Keyframe Assistant > Easy Ease* or simply hit `F9`

### Examples

*Bounce to the right*

[![enter image description here](https://i.sstatic.net/eydZS.gif)](https://i.sstatic.net/eydZS.gif)

*Bounce to the left*

[![enter image description here](https://i.sstatic.net/I94Cq.gif)](https://i.sstatic.net/I94Cq.gif)

---

[**Project File Download**](https://www.dropbox.com/s/gvocdxhqcxi5xsp/gauge.aep.zip?dl=0)

> **Comments:**
> **username_0**: The update is great! The only thing that would be nice is that I can put this effect on every solid with it's own width. Thats the reason why I thought about expressions. But I guess that would not be possible, and I just have to play with the keyframes?  
> **username_1**: @username_0 How many gauges do you really need? If you need 100+ different ones, it makes sense to create a script for this, but that's another question :)  
> **username_0**: Well the thing is. The solid's width is depending on how many characters are coming on it. I do change the width by hand.  
> **username_1**: Uhh, don't think this is easy possible, but as I said it's not that hard to create this setup in 30seconds :) **The only thing you have to adjust is the mask path**. Set the new comp size, _click the gauge layer > right click > fit to comp size_ and adjust the right bezier points one time.  
> **username_0**: Thank you very much (Danke shön)! It's working great :) I just have to play a bit with the keyframes. Thats okay.  
> **username_0**: haha, almost forgot  
> **username_2**: There's a good tutorial on how to script this with expressions here: http://www.motionscript.com/articles/bounce-and-overshoot.html  

---

