\
**Category:** programming\
**Created:** [January 13, 2022, 5:08pm UTC](https://forum.kirupa.com/t/spring-animation-on-html-canvas/650448 "2022-01-13T17:08:01Z")\
**Posts on this page:** 3\
**Page:** 1
**Author:**  [@Wayne](https://forum.kirupa.com/u/Wayne)\
**Post date:** [January 13, 2022, 5:08pm UTC](https://forum.kirupa.com/t/spring-animation-on-html-canvas/650448/1 "2022-01-13T17:08:01Z")
I have been trying to figure out how he made this spring animation where the spring does not redraw different waves on drag but simply expand the whole spring when you drag the weight without losing the **structure** of the _ **original** _ sine waves.
I tried but the waves get different
Actual
> **[A Friendly Introduction to Spring Physics Animation in JavaScript • Josh W....](https://www.joshwcomeau.com/animation/a-friendly-introduction-to-spring-physics/)**
>
> Of all the little tips and techniques I've picked up over the years about animation, spring physics remains one of the most powerful and flexible. In this tutorial, we'll learn how to harness their power to build fluid, organic transitions.
---
**Author:**  [@Wayne](https://forum.kirupa.com/u/Wayne)\
**Post date:** [January 13, 2022, 6:31pm UTC](https://forum.kirupa.com/t/spring-animation-on-html-canvas/650448/2 "2022-01-13T18:31:26Z")
I see that he might be using [https://react-spring.io/](https://react-spring.io/) But I want to create it without that framework
---
**Author:**  [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 13, 2022, 6:53pm UTC](https://forum.kirupa.com/t/spring-animation-on-html-canvas/650448/3 "2022-01-13T18:53:34Z")
Oh! This is a great topic to dive deeper into. I think a library like react spring may be your best bet. Otherwise, you will have to manually take what is provided in basic form here and adapt it for your own needs: [Introduction to Easing in JavaScript | KIRUPA](https://www.kirupa.com/html5/introduction_to_easing_in_javascript.htm)