ETLondonDubaiTokyoSydneyLos Angeles57°FNew YorkNewsletter
Most read
Trending#Entertainment#Tech#Finance

No. 102 of 106

Motion Effects (Motion JS)

Soft page-wide motion presets, off for reduced motion.

    On this page
  1. Make the whole site move — with one element
  2. Reload the page and watch closely
  3. Photos wipe open and drift
  4. Four ways to say hello to a menu
  5. Five black & white portfolios
✦Motion Effects is onMenu, headings and images animate on the live page (not in the editor).
NEWSON · ELEMENT NO. 102

Powered by Motion (motion.dev). Drop it once into a header or footer template: the menu drops in and rolls on hover, headings rise word by word, images wipe open, photos drift as you scroll and an optional curtain opens the page.

Menu entranceText-roll / underline / magnetic hoverMobile menu cascadeWord-by-word headingsImage wipesSoft parallaxIntro curtain
WHAT JUST HAPPENED

Everything below is animated by the one Motion Effects widget at the top of this page — no per-section settings.

INTROCurtain lifts awayA full-screen color panel with your name slides up as the page appears. It removes itself the moment it finishes, so it never blocks a click.
MENUMenu drops inLogo, menu links and buttons fall into place one after another. Hover a link: the text rolls up to a copy of itself.
TEXTHeadings riseBig headings split into words that rise from a mask as they scroll into view — like the line you are reading above.
IMAGES

Every image widget on the page opens with a soft wipe and then drifts a few pixels as you scroll. Choose wipe, settle-from-zoom or fade.

MENU HOVER STYLES

Pick one style for the whole header. Works with every NewsOn Site Header layout, including the mobile drawer and full-screen menus.

ROLLText rollThe label slides up to a fresh copy of itself. Clean and editorial.
UNDERLINEDrawn underlineA line draws in from the left and leaves to the right.
MAGNETICMagneticLinks lean toward your cursor and spring back when you leave.
LIFTLiftA gentle three-pixel lift. The quietest option.
SEE IT ON REAL SITES

Each ready-made site uses Motion Effects with its own menu hover, curtain and pace.