Pendulum Swing

HTML to video · A camera move · Apache-2.0

What it does

Content hangs from a fixed pivot and swings into rest with gravity-damped oscillation, like a hanging sign settling on its hook. Paste-in snippet: it registers no timeline, you wire it into your own.

Get it

Paste its markup, CSS and script into your composition, then add the timeline lines from the comment at the top of the file to your own GSAP timeline. demo.html in the folder shows it running. 4 settings to change.

Source on GitHub
Needs

Loads its libraries from the network when it renders (cdn.jsdelivr.net).

Re-skin

By props (colors)

Declared variables: pivot, amplitude, direction, tone. Colors come from theme custom properties with fallbacks (--brand), so a :root block or one of the three themes re-skins it.

License

Apache-2.0

License notes are on the pack's page

From

HyperFrames

Everything from HyperFrames in the gallery

Back to the Asset Library