Unmove

CSS Animation Library

Deploys by Netlify Deploys by Netlify

Installation

Add CDN to head of HTML document: https://cdn.jsdelivr.net/gh/sieis/unmove@main/dist/unmove.css

Spinner Animation

An infinite spin. Add the class um-spin to anything you want to spin

Crank up the speed. Add the class um-spin-fast to go twice as fast.

Chill out. Add the class um-spin-slow to calm down and go real slow.

Ticker Animation

A horizontal news ticker scrolling animation. Add the class um-news-wrap to a div. This will go around the news ticker area and sets overflow to hiddent.

Add the class um-news-tick to a div within um-news-wrap.

Then add the class um-news-item to each item you want to be in the news ticker.

Currently works best with 7 items because of the spacing used for and between items to create seemless infinite scroll. Also include a duplicate copy of the imgs directly following the initial 7 in order for there to be no breaks in the imgs as they scroll.

If you don't want the scrolling to stop when you hover over an item, add no-hover. And add reverse to have it scroll from left to right: um-news-tick-reverse-no-hover

Created by Eamonn
Open-source on GitHub