# How to use custom Easing function?

**URL:** <https://forum.babylonjs.com/t/how-to-use-custom-easing-function/5121>\
**Category:** Questions\
**Created:** [August 15, 2019, 11:43pm UTC](https://forum.babylonjs.com/t/how-to-use-custom-easing-function/5121 "2019-08-15T23:43:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![therealtakeshi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/therealtakeshi/32/2659_2.png) [@therealtakeshi](https://forum.babylonjs.com/u/therealtakeshi)\
**Post date:** [August 15, 2019, 11:43pm UTC](https://forum.babylonjs.com/t/how-to-use-custom-easing-function/5121/1 "2019-08-15T23:43:51Z")

</div>

Has anyone successfully made a custom easing function and wouldn’t mind sharing an example? The [relevant documentation](https://doc.babylonjs.com/babylon101/animations#easing-functions) isn’t working with Babylon 4, but I’m not sure if it’s just a syntax problem (I’m not 100% sure exactly what the little _FunnyEase_ snippet is doing) or genuinely isn’t valid in Babylon 4.  
Any help is appreciated. Thanks!

Specifically, I’m trying to use Perlin Noise for a camera shake animation, and it seems to make most sense to make a custom easing function for that. Open to other approaches though.

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [August 15, 2019, 11:56pm UTC](https://forum.babylonjs.com/t/how-to-use-custom-easing-function/5121/2 "2019-08-15T23:56:46Z")

</div>

Ease function are used to do the interpolation between animation keyframes.  
For screenshake, you can create an animation with random offsets and apply it to the camera. No need for ease in that case.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [August 15, 2019, 11:59pm UTC](https://forum.babylonjs.com/t/how-to-use-custom-easing-function/5121/3 "2019-08-15T23:59:11Z")

</div>

> [@therealtakeshi](#):
>
> isn’t working with Babylon 4

Not sure I follow you here:) It works well for me: [Babylon.js Playground](https://www.babylonjs-playground.com/#8ZNVGR)

---

<div class="post-metadata">

**Author:** ![Wingnut](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wingnut/32/53_2.png) [@Wingnut](https://forum.babylonjs.com/u/Wingnut)\
**Post date:** [August 16, 2019, 2:05am UTC](https://forum.babylonjs.com/t/how-to-use-custom-easing-function/5121/4 "2019-08-16T02:05:22Z")

</div>

Hi guys. Just for fun, I thought I would attempt a “bouncy camera” animation (arc-cam target… y-axis only, so far). No keyframe animation, here. I’m letting my favorite band play it… Looper and The Cosines. 🙂

[https://www.babylonjs-playground.com/#24SBV7#23](https://www.babylonjs-playground.com/#24SBV7#23)

Click on canvas. Ya can’t start another animation until first is finished. (yawn). This is a “diminishing” bounce… like what might happen when your space station is hit by a photon torpedo. 🙂 It has a serious drawback… not putting camera .target.y and/or .beta at same position when the anim started. It will be somewhat different… but that’s what a strong torpedo hit might do, too.

The chances of this animation… running at the same speed… on all devices… I dunno about that. Generally speaking… mix Wingnut and math, and ya better have BJS catastrophic scene-explosion insurance. heh.

Yeah, I know. Camera.target is not the same as camera.beta, but, I was lazy. 😃 At least I didn’t poke random small values at canvas.style.marginTop/marginLeft… which would have been SERIOUSLY lazy. 🙂

Ok, fine, here’s the same bounce… but ALSO happening on camera.beta… which, for an arcCam… can be loosely-considered as its y-position. [https://www.babylonjs-playground.com/#24SBV7#24](https://www.babylonjs-playground.com/#24SBV7#24)