Movatterモバイル変換

[0]ホーム
URL:

Motion

Motion

Motion

Motion

A modern animation library for JavaScript and React

A modern animation library for JavaScript and React

npm install motion

npm install motion

npm install motion

Motionmakesanimation

Motionmakesanimation

Motionmakesanimation

simple,fun,andlimitless.

simple,fun,andlimitless.

simple,fun,andlimitless.

Gobeyondthebrowserwithsupersmooth

Gobeyondthebrowserwithsupersmooth

Gobeyondthebrowserwithsupersmooth

springs,layoutanimations,timelines

springs,layoutanimations,timelines

springs,layoutanimations,timelines

andmuch,muchmore.

andmuch,muchmore.

andmuch,muchmore.

  • Free

    Completely free to use and open-source under the MIT license.

  • Tiny

    Minianimate is 90% smaller than its GSAP equivalent,scroll 75% smaller.

  • Production-ready

    Written in TypeScript, with extensive test coverage.

  • Hybrid engine

    The power of JS animations with the performance of hardware acceleration.

  • Motion's pick-up-and-play API is easy to start and fun to master.

    Examples:

  • Animate every transform axis independently, without needing multiple elements.

    Examples:

  • Go beyond time-based animations with real spring physics for great-feeling animations.

    Examples:

  • Motion uses browser APIs for hardware accelerated scroll-linked and scroll-triggered animations.

    Examples:

  • Motion for React makes it easier than ever to animate elements as they exit the DOM.

    Examples:

  • Animate between different layouts with Motion's industry-leading layout animation engine.

    Examples:

  • Hover, press and drag gestures that feel native, not “webby”

    Examples:

  • Variants, stagger and timelines make it easy to precisely orchestrate animations.

    Examples:

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.divanimate={{ scale:1.2 }} />

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.div animate={{ scale:1.2 }} />

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.div animate={{ scale:1.2 }} />

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.div animate={{ scale:1.2 }} />

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.div animate={{ scale:1.2 }} />

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.div animate={{ scale:1.2 }} />

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.div animate={{ scale:1.2 }} />

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.div animate={{ scale:1.2 }} />

  • Motion's pick-up-and-play API is easy to start and fun to master.

    Examples:

  • Animate every transform axis independently, without needing multiple elements.

    Examples:

  • Go beyond time-based animations with real spring physics for great-feeling animations.

    Examples:

  • Motion uses browser APIs for hardware accelerated scroll-linked and scroll-triggered animations.

    Examples:

  • Motion for React makes it easier than ever to animate elements as they exit the DOM.

    Examples:

  • Animate between different layouts with Motion's industry-leading layout animation engine.

    Examples:

  • Hover, press and drag gestures that feel native, not “webby”

    Examples:

  • Variants, stagger and timelines make it easy to precisely orchestrate animations.

    Examples:

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.divanimate={{ scale:1.2 }} />

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.div animate={{ scale:1.2 }} />

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.div animate={{ scale:1.2 }} />

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.div animate={{ scale:1.2 }} />

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.div animate={{ scale:1.2 }} />

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.div animate={{ scale:1.2 }} />

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.div animate={{ scale:1.2 }} />

// JavaScript
animate(".ball", { scale:1.2 })

// React
<motion.div animate={{ scale:1.2 }} />

  • Motion One's pick-up-and-play API is easy to start and fun to master.

    Examples:

  • Go beyond CSS by animating transforms on every axis.

    Examples:

  • Go beyond time-based animations with real spring physics for great-feeling animations.

    Examples:

  • Motion One uses browser APIs for beautiful scroll-linked and scroll-triggered animations.

    Examples:

  • Motion One for React makes it easier than ever to animate elements as they exit the DOM.

    Examples:

  • Animate between different layouts with Motion One's industry-leading layout animation engine.

    Examples:

  • Animate transforms on every axis independently, with full control over timing.

    Examples:

  • Animate transforms on every axis independently, with full control over timing.

    Examples:

  • Motion One's pick-up-and-play API is easy to start and fun to master.

    Examples:

  • Go beyond CSS by animating transforms on every axis.

    Examples:

  • Go beyond time-based animations with real spring physics for great-feeling animations.

    Examples:

  • Motion One uses browser APIs for beautiful scroll-linked and scroll-triggered animations.

    Examples:

  • Motion One for React makes it easier than ever to animate elements as they exit the DOM.

    Examples:

  • Animate between different layouts with Motion One's industry-leading layout animation engine.

    Examples:

  • Animate transforms on every axis independently, with full control over timing.

    Examples:

  • Animate transforms on every axis independently, with full control over timing.

    Examples:

OurSponsors

Motion is made possible thanks to our amazing sponsors.

OurSponsors

Motion is made possible thanks to our amazing sponsors.

OurSponsors

Motion is made possible thanks to our amazing sponsors.

Courses

Motion for React has video and interactive courses built by the best educators in the world.

Premium components

Motion+ grants access to premium React components, starting withCursor andAnimateNumber.

All components are built in TypeScript and supported by a strong test suite. Install via npm, with source access via our private Github repo.

Showcase

All the beautiful sites featured in theFramer gallery are powered by Motion.

Here are some more amazing interactions made by developers with its flexible APIs.

DelightthewebwithMotion

[8]ページ先頭
©2009-2025 Movatter.jp