TheSas

Portfolio · Interactions

TheSas.dev

The portfolio you are exploring: projects, their technical details, and nine animations to try with your own images.

The same animations move the contact form and the two showcase images.

Try the animations

TheSas · CSS + Web Animations

Showcase

Two images. Nine ways to move them. Your turn.

Trade places

Reduced motion is enabled: effects are disabled.

Image A
Image A
Image B
Image B

Your images stay on this device. JPEG, PNG, WebP or AVIF · 10 MB maximum.

System map

From click to motion

Every effect uses the current positions of both elements, then leaves them in a stable layout.

  1. 01

    Choose

    • One button, one effect
  2. 02

    Animate

    • Web Animations APIPositions measured on the page
  3. 03

    Return to rest

    • Temporary transforms removed

A note from me

Message coming soon.

Next