Playground

Using Motionly for augmenting UX through interactive animations

Motionly animations rendering engine is open and may be integrated in all kinds of situations: design your experience and in case its default UX does not exactly the fit, have the rest of your web page interact with it. Some little JavaScript will do the job.

Gyroscope

Interactive UX

This demo shows how to have the experience animation progress depending on the physical orientation of your device (only works on mobiles equipped with a gyroscopic sensor).

Inner scrolling

Interactive UX

This demo shows in an existing page with some content how to insert a full-height experience which animates while the end-user is scrolling vertically: this offers an animated narrative UX via simple <img> tag.

Pointer

Interactive UX

This demo shows how to move an experience along the pointer or touch position and how to bind its animation progress in real-time to the position.

Overlay

Interactive UX

This demo shows how to display an experience in overlay in an existing content and make its animation progress while scrolling vertically.

Sticky-scroller

Video scrubbing

This demo shows how to use a Motionly experience displayed inside some content, which enables to scrub a video: the animation frame has the same height as the viewport, it progresses following the visitor vertical scrolling. The motion is a fragment of a video.

All UX

CodePen Gallery

This page is the Motionly CodePen gallery. You will find all kinds of UX done with Motionly, experiments. You can view the HTML, the CSS, the JavaScript, fork some pens, understand how they work and how simply Motionly is integrated.

Motionly logo yellow

Go ahead

How to get a demo?

Contact us

Social

Linkedin