Skip to content
Get Etchedy

Black Friday 202630% off yearly plans, 40% off Lifetime. Code BF26.

Ends in —d —h —m —s

See the deals

3 new patterns this weekSee them

96 of 100 founding seats left

Sign inGet Etchedy

My accountContactPrivacy

Feature 07Animate

Animations. Drag motion onto anything.

80 ready-made animations in six types. Drag one onto a heading, a card, an image or a whole section and it plays on your live site. Every option is a prop you can change.

Get EtchedyAll features
Live demo
Fade upWords riseTiltCount up
Mountains above a valley

Motionthatfeelsdesigned.

Start a project

Fade up added to the card. Plays on scroll, 900 ms.

The problem

“I am not writing another scroll script for one fade-up.”

The fix

Drag the motion onto the element and tune it in the props. No script to write, no library to load, nothing to maintain.

Sound familiar?

Motion should not cost you a day.

Four things that turned animation into a chore on client sites, and what Animations does about each one.

  1. The pain

    A script for every effect

    A fade-in here, a counter there, a tilt on the cards. Each one is another snippet to write, test and keep working.

    Our fix

    One panel, 80 effects

    Entrances, text, cursor, hover, loops and scroll effects, ready to drag. Hover a tile to watch it play before you add it.

  2. The pain

    Settings buried in code

    The client wants it a little slower, and you dig through JavaScript to find one number.

    Our fix

    Every option is a prop

    Effect, trigger, start point, duration, delay, distance, easing, replay and phones sit in the component props.

  3. The pain

    Heavy pages

    Animation libraries load on every page, even the ones that never move.

    Our fix

    Loads only where it plays

    A small script with no dependencies, only on pages that use an animation. Without JavaScript, nothing is hidden.

  4. The pain

    Motion that shuts people out

    Big movement can make some visitors feel sick, and they never asked for it.

    Our fix

    Respectful by default

    Visitors who ask their device for less motion see every element in place, still and readable.

What it does

Motion that feels designed, in one drag.

Open Animations in the Etchedy panel, hover a tile to watch it play, and drag it onto the canvas. Etchedy wraps the element in an animation component, so the effect, the trigger and the timing sit in the props, ready to change.

  • Hover any tile to preview the real animation
  • Drop another of the same kind to switch it, never doubled
  • Stack an entrance with a hover or cursor effect

Real screens

See it for real.

Real screens from the Etch editor and real frames from the live runtime. Nothing mocked up.

Four frames of an Etchedy animation: the heading words rise, then three photo cards fade up one by one
Words rise, then the cards fade up one by oneFour frames from the real runtime: Split text on the heading, Fade up with children one by one on the cards. One and a half seconds, start to finish.
The Etchedy Animations panel: six animation types, and the Entrance type opened
6 types, 80 animationsEntrance, Text, Cursor, Hover and click, Loop and Scroll. Open a type and hover a tile to see it play.
Etch canvas: the Fade up animation added to a card, with the Etchedy Animations panel open
Drop it, and it is addedFade up lands on the card, the tile is marked Added, and Replay plays it again on the canvas.
The props of an Etchedy animation component in Etch: effect, trigger, timing, easing and more
Every option is a propEffect, when it plays, start point, duration, delay, distance, children one by one, easing, replay and phones.
Included in Etchedy Pro

Animations come with every Pro plan.

No add-on to buy. Every Pro plan includes Animations, Facet Pro and the full library, on 5, 50 or unlimited sites. Or pay once and keep it for life.

  • The full library: 785 patterns, new ones every week
  • Facet Pro, Animations, brand kits and site import
  • White label and user access for client sites
  • Updates and email support with your license
Pro yearlyfrom€39/ year5, 50 or unlimited sites. 7-day money-back guarantee.See Pro plansFounder lifetime96 of 100 seats left€299onceUnlimited sites, every future pattern, no renewals.Claim a seatBlack Friday30% off yearly, 40% off Lifetime with code BF26. Ends 30 November.See the deals

How it works

Three moves, no manual.

  1. 01Open Animations

    Pick a type in the Etchedy panel: Entrance, Text, Cursor, Hover and click, Loop or Scroll.

  2. 02Drag it onto an element

    Drop it on a heading, a card, an image or a section. Or select the element and click the tile.

  3. 03Tune the props

    Effect, when it plays, timing, distance, easing and phones: every option is a prop.

Before and after

The problem it solves.

What changes the day you switch it on.

Without Etchedy: Writing a scroll script for every fade-in

With Etchedy: Drag Fade up onto it and move on

Without Etchedy: Loading an animation library on every page

With Etchedy: A small script, only on pages that move

Without Etchedy: Digging through code to change one delay

With Etchedy: Change the delay in the props

Without Etchedy: Motion that makes some visitors dizzy

With Etchedy: Reduced motion respected, automatically

At a glance

The details.

Ready-made80 animations in 6 types
Plays onScroll, load, hover, click
Works onAny element in Etch
PlansEvery Pro plan
80animations ready to drag
6types, from entrances to scroll
0lines of code to write

Who it's for

Built for the way you work.

Freelancers

Give a client site its polish in minutes instead of a day of custom JavaScript.

Agencies

One motion system on every client site, tuned per brand in the props.

In-house teams

Launch pages that feel alive without waiting on a developer.