Web designer + front-end developer with experience in high-traffic ecommerce sites for some well known brands.

Chicken Swing Dynamic

A fork of the original Chicken Swing, this pen uses the Web Animations API to allow dynamic updating of the animations keyframes via user input.

See the Pen Chicken Swing Dynamic by Paul (@plfstr on CodePen.

Swings don’t instantly change their movement, so the animation has to account for that to make the physics look more natural.

Each iteration of the swings animation, checks to see if the input slider has moved and the difference between this position and the last. If the input slider has changed, the JS code counts up/down and increases/decreases the rotation of the swing until it reaches the new value.

Chicken Swing (Dynamic) was chosen for CodePen Picked pens.

Due to CodePens embed, the animation may stop. If this happens click ‘Rerun’ (lower right corner) and then use the slider, or visit the pen on CodePen.