Morphist - A simple, high-performance and cross-browser jQuery slider / slideshow / carousel plugin for child objects powered by Animate

  •        12

A simple, high-performance and cross-browser jQuery slider / slideshow / carousel plugin for child objects powered by Animate.css. It cycles through an element's [child] objects containing any content (i.e. images, text, etc) in quick succession and it is a great tool for displaying tweets from Twitter or items from other feeds. It is a spin-off project of Morphext (a simple text rotator).

https://github.com/MrSaints/Morphist

Tags
Implementation
License
Platform

   




Related Projects

Morphext - A simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate

  •    HTML

A jQuery plugin for creating text-based carousels, rotating small or large pieces of text one after the other, just like a slider does with images... This can be a great tool for displaying catch phrases, mission statements, tag lines, and so on. If you would like to achieve a similar effect with more flexibility (e.g. out animation) and with HTML objects rather than text phrases (e.g. unordered list items), please check out Morphist.

radiobox

  •    CSS

A tiny set of CSS3 animations designed for your radio inputs. Include dist/css/boing/boing.min.css instead, if you want to use only the Boing animation, for example.

css-animations.js - A library to work with CSS3 keyframe animations from javascript

  •    Javascript

This library uses the CSS DOM API to access CSS3 keyframe animations, enabling you to do anything you want with them from javascript. You can add, modify, and remove individual keyframes from existing animations, in addition to creating and deleting animations themselves.

checkbox

  •    Javascript

A tiny set of CSS3 animations meant for your checkbox inputs. Include dist/css/yo.min.css instead, if you want to use only the Yo animation, for example.


magic - CSS3 Animations with special effects

  •    CSS

If you want to use magic animations in react, see react-magic repository. This is a sample code on hover with jQuery, first you include the class "magictime" and after your desired animation.

font-awesome-animation - Simple animations using FontAwesome and some CSS3.

  •    CSS

Simple animations using some CSS3 I found on the web. Best used on glyphicons like FontAwesome. See live demo.

animate.css - 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

  •    CSS

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. Add the class animated to the element you want to animate. You may also want to include the class infinite for an infinite loop.

animate.css - Cross-browser CSS3 animations. Plug and play. Do a little dance.

  •    

Cross-browser CSS3 animations. Plug and play. Do a little dance.

micron - a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power

  •    CSS

Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript. Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods.

Donatello - Pure-CSS drawing library for the browser.

  •    Javascript

Donatello is a pure-CSS drawing library for the browser. The API is inspired in part by Raphael.js. All graphical elements are rendered using HTML DOM and CSS. The idea came together from various code snippets I had lying around for drawing circles and lines in other projects. I decided to make an attepmpt at a drawing API using these ideas after using Raphael.js in my Node Knockout team project. Donatello aims to provide a familiar drawing API similar to Raphael and other drawing libraries. Since all rendering is done using HTML and CSS, and a lot of effort is going toward optimizing CSS using graphics acceleration in the major browsers, there is the opportunity to do very efficient and performant drawing in the browser using this technique. In future versions I hope to be able to leverage CSS animations and transitions for efficient hardware-accelerated animations.

animo.js - A powerful little tool for managing CSS animations

  •    CSS

A powerful little tool for managing CSS animations. Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic. ###License All code is open source and licensed under MIT. Check the individual licenses for more information.

bounce.js - Create beautiful CSS3 powered animations in no time.

  •    CSS

Bounce.js is a tool and JS library for generating beautiful CSS3 powered keyframe animations. The tool on bouncejs.com allows you to generate static keyframes that can be used without any extra JavaScript, but if you'd like your application to generate these on the fly, you can use the Bounce.js library. You can also view and download all releases from here.

ScrollTrigger - Triggers classes on html elements based on the scroll position

  •    Javascript

Triggers classes on html elements based on the scroll position. It makes use of requestAnimationFrame so it doesn't jack the users scroll, that way the user / browser keeps their original scroll behaviour. Animations run when the browser is ready for it. The init call takes 3 parameters, the first is a default set of options. The last two are the bindTo and scrollIn parameters. These are optional.

react-animations - A collection of animations for inline style libraries

  •    Javascript

A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. React-animations implements all animations from animate.css.Check out the interactive demo.

Leaflet.AnimatedMarker - A Leaflet plugin to animated a Marker along a polyline

  •    CSS

It uses CSS3 animations to move the marker from point to point at a specific rate (meter per millisecond). For ancient browsers that don't support CSS3, the polyline is chunked into distance segments and moved per interval (not so great). The following code will create an AnimatedMarker that moves along line, assuming a Leaflet.Map called map.

epic-spinners - Easy to use css spinners collection with vue.js integration

  •    Vue

Easy to use css spinners collection with Vue.js integration. Developed by Epicmax. Subscribe to our newsletter to get Epic Spinners updates, our team's stories and Vue.js materials hand-picked by Epicmax.

textillate - A simple plugin for CSS3 text animations

  •    Javascript

A simple plugin for CSS3 text animations

SpinKit - A collection of loading indicators animated with CSS

  •    CSS

Simple loading spinners animated with CSS. See demo. SpinKit uses hardware accelerated (translate and opacity) CSS animations to create smooth and easily customizable animations. You currently need to use an autoprefixer if you want to support all browsers. If you're compiling your SCSS with gulp you can use gulp-autoprefixer, and grunt-autoprefixer if you use grunt.