mixitup - A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more

  •        7

MixItUp is a high-performance, dependency-free library for animated DOM manipulation, giving you the power to filter, sort, add and remove DOM elements with beautiful animations. MixItUp plays nice with your existing HTML and CSS, making it a great choice for responsive layouts and compatible with inline-flow, percentages, media queries, flexbox and more.




Related Projects

mixitup - A CSS3 and jQuery Filter & Sort Plugin

  •    Javascript

A CSS3 and jQuery Filter & Sort Plugin

hyperHTML - A Fast & Light Virtual DOM Alternative

  •    HTML

A Fast & Light Virtual DOM Alternative available for NodeJS and NativeScript too. This project exists thanks to all the people who contribute. [Contribute].

nanoJS - Minimal standalone JS library for DOM manipulation

  •    Javascript

nanoJS is around 100 lines of code (0.6 Kb compressed) JavaScript library for basic DOM manipulation. It has jQuery like syntax and supports chaining.

GreenSock-JS - GreenSock's GSAP JavaScript animation library (including Draggable).

  •    Javascript

GSAP is a JavaScript library for creating high-performance animations that work in every major browser. No other library delivers such advanced sequencing, reliability, API efficiency, and tight control while solving real-world problems on over 4 million sites. GSAP works around countless browser inconsistencies; your animations 'just work'. CSS properties, SVG, canvas libraries, custom properties of generic objects, colors, strings...animate anything! At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery! See the "Why GSAP?" article for what makes GSAP so special. Unlike monolithic frameworks that dictate how you structure your apps, GSAP is completely flexible; sprinkle it wherever you want. React, Vue, Angular or vanilla JS - doesn't matter. Simply put, GSAP is the most robust high-performance animation library on the planet, which is probably why every major ad network excludes it from file size calculations.

isotope - :revolving_hearts: Filter & sort magical layouts

  •    HTML

See isotope.metafizzy.co for complete docs and demos.Link directly to Isotope files on unpkg.

specter - Clojure(Script)'s missing piece

  •    Clojure

Specter rejects Clojure's restrictive approach to immutable data structure manipulation, instead exposing an elegant API to allow any sort of manipulation imaginable. Specter especially excels at querying and transforming nested and recursive data, important use cases that are very complex to handle with vanilla Clojure. Specter has an extremely simple core, just a single abstraction called "navigator". Queries and transforms are done by composing navigators into a "path" precisely targeting what you want to retrieve or change. Navigators can be composed with any other navigators, allowing sophisticated manipulations to be expressed very concisely.

css-ripple-effect - Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

  •    CSS

Main advantage of this solution is that there is no DOM manipulation in order to create animation. That means this is faster - it doesn't use JavaScript or jQuery to animate. This solution is also implemented in one of the biggest Bootstrap theming libraries Bootswatch in their Materia theme.

dominus - :syringe: Lean DOM Manipulation

  •    Javascript

This isn't a drop-in replacement for jQuery, but rather a different implementation. Dominus is jQuery minus the cruft, with a footprint of ~4kB minified and gzipped, vs the ~33kB in jQuery. Dominus uses sektor as its selector engine of choice, which is a drop-in replacement for Sizzle, but tens of times smaller in exchange for a more limited feature-set.Just like with jQuery, Dominus exposes a rich API that's chainable to the best of its ability. The biggest difference with jQuery at this level is that the Dominus wrapper is a real array. These arrays have been modified to include a few other properties in their prototype, but they don't change the native DOM array. See poser for more details on that one. All of this means you can .map, .forEach, .filter, and all of that good stuff that you're used to when dealing with JavaScript collections, and at the same time you get some extra methods just like with jQuery.

anime - JavaScript Animation Engine

  •    Javascript

Anime (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects. The targets property defines the elements or JS Objects to animate.

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.

sentineljs - Detect new DOM nodes using CSS selectors (650 bytes)

  •    Javascript

SentinelJS is a tiny JavaScript library that lets you detect new DOM nodes using CSS selectors (650 bytes). SentinelJS uses dynamically-defined CSS animation rules (@keyframes) to hook into browser animationstart events when a new node matching a given CSS selector is added to the DOM. In general this should be more performant than using a Mutation Observer to watch the entire document tree for changes and iterating through all new child nodes recursively. SentinelJS performs one hash key lookup on calls to the animationstart event so the performance overhead is minimal. If you define the animation-name property on a CSS rule that overlaps with the selector in your SentinelJS watch function then only one of those animations will be called which could cause unexpected behavior. To get around this you can trigger SentinelJS watches from your CSS using custom animation names (see below).

domina - A DOM manipulation library for ClojureScript

  •    Clojure

Domina is a jQuery inspired DOM manipulation library for ClojureScript. It provides a functional, idiomatic Clojure interface to the DOM manipulation facilities provided by the Google Closure library. Pull requests are extremely welcome.

ng-directive-testing - Simple example of testing Angular's directives.

  •    Javascript

Directives in AngularJS encapsulate all of the custom DOM manipulation that happens in an AngularJS application. This makes them very crucial part of a bigger Angular app. DOM manipulation is often source of problems, especially when it comes to browser inconsistencies. This is why it is important to cover the directive code with automated tests. Unfortunately many developers consider any kind of DOM manipulation to be too hard to test so this code more often than not lives a sad life of untested code full of creepy bugs. The goal of this example is to show how to test directives easily and become confident that the directive code works and works on all targeted browsers.

laxxx - Simple & light weight (3kb minified & zipped) vanilla javascript plugin to create smooth & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!

  •    Javascript

To increase performance lax.js indexes the list of elements to animate when the page loads. If you're using a library like React, vue.js or EmberJS, it is likely that you are adding elements after the initial window.onload. Because of this you will need to call lax.addElement(domElement) when you add components to the DOM that you want to animate. You can also call lax.removeElement(domElement) when the component unmounts.

learn-vanilla-js - Open source list of paid & free resources to learn vanilla JavaScript


An open source list of paid & free resources to learn vanilla JavaScript. • Feel free to fork this repo and add valuable resources to categories. All PRs will be manually reviewed.

superdom - :flags: Better and simpler ES6 DOM manipulation

  •    Javascript

You can easily manipulate attributes right from the dom node. There are some aliases that share the syntax of the attributes such as html and text (aliases for innerHTML and textContent). There are others that travel through the dom such as parent (alias for parentNode) and children. Finally, class behaves differently as explained below.

Shuffle - Categorize, sort, and filter a responsive grid of items

  •    Javascript

Categorize, sort, and filter a responsive grid of items. This project was inspired by Isotope and Packery.

react-flip-move - Effortless animation between DOM changes (eg

  •    Javascript

This module was built to tackle the common but arduous problem of animating a list of items when the list's order changes. CSS transitions only work for CSS properties. If your list is shuffled, the items have rearranged themselves, but without the use of CSS. The DOM nodes don't know that their on-screen location has changed; from their perspective, they've been removed and inserted elsewhere in the document.

virtual-dom - A Virtual DOM and diffing algorithm

  •    Javascript

Manual DOM manipulation is messy and keeping track of the previous DOM state is hard. A solution to this problem is to write your code as if you were recreating the entire DOM whenever state changes. Of course, if you actually recreated the entire DOM every time your application state changed, your app would be very slow and your input fields would lose focus. virtual-dom is a collection of modules designed to provide a declarative way of representing the DOM for your app. So instead of updating the DOM when your application state changes, you simply create a virtual tree or VTree, which looks like the DOM state that you want. virtual-dom will then figure out how to make the DOM look like this efficiently without recreating all of the DOM nodes.

We have large collection of open source products. Follow the tags from Tag Cloud >>

Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.