Shop / Pack

Motion Effects

Scroll and hover animation that stops for reduced motion.

A$15

Coming soon
Motion Effects: a gold ring of light passing through a frosted glass panel.

What it is

Animation that sits on top of your layout. Elements fade and rise as they scroll into view, the hero fades in on load, cards lift slightly on hover and buttons respond to a press. It never changes your layout, sizes, colours or fonts.

What's inside

The contents.

  • motion.css

    The animations: scroll reveal, hover lift, button press and hero entrance.

  • motion.js

    The scroll reveal script, at under 30 lines.

  • Reduced motion

    If a visitor has reduce motion turned on, all animation stops and the page displays in full.

  • No JavaScript

    With JavaScript off, every element displays normally.

Examples

Sample sites.

  • Sample sports club website in the Playful style, with a coral button and rounded cards.
  • Sample design studio website in the Clean and minimal style, in black on white.
  • Sample gym website in the Bold and detailed style, with a heavy white headline and a yellow button.

Bundles

Get this plus 5 more packs in Founder's Collection for A$99

Questions

Can I turn it off?

Yes. Remove the two lines that link the files and nothing else changes.

Does it need a library?

No. It is one CSS file and one small JavaScript file.

What does the licence cover?

Use the packs on unlimited personal and client projects. Don't resell or share the files.