Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. They say a picture is worth 1,000 words so here are 13,000:

Download it from from aescripts + aeplugins: https://aescripts.com/bodymovin/

Or get it from the adobe store https://exchange.adobe.com/creativecloud.details.12557.html CC 2014 and up.

• download the ZIP from the repo.
• Extract content and get the .zxp file from '/build/extension'
• Use the ZXP installer from aescripts.com.

• Close After Effects
  

• Extract the zipped file on build/extension/bodymovin.zxp to the adobe CEP folder:
  WINDOWS:
  C:\Program Files…

Parallax Engine that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead.

Check out the demo to see it in action!

• 1. Getting started
  • 1.1 Installation
  • 1.2 Preparations
  • 1.3 Run Parallax
• 2. Configuration
  • 2.1 Programmatic vs Declarative
  • 2.2 Configuration Options
• 3. Methods
• 4. Development
  • 4.1 Running the Project
  • 4.2 Opening an Issue
  • 4.3 Known Issues
• 5. FAQ
• 6. Information
  • 6.1 License
  • 6.2 Contributors

1. Add <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script> to your markup
2. Done!

Many thanks to the fine folks over at cdnjs for hosting our library.

1. Head over to the releases Section
2. Download compiled.zip from the latest release
3. Extract the ZIP archive and locate the parallax.js and parallax.min.js files
   • Use parallax.js if you want to snoop around in the code
   • Use…

Simple, lightweight Flat Surface Shader written in JavaScript for rendering lit Triangles to a number of contexts. Currently there is support for WebGL, Canvas 2D and SVG. Check out this demo to see it in action.

Simply put, FSS uses the Lambertian Reflectance model to calculate the color of a Triangle based on an array of Light sources within a Scene.

A Light is composed of a 3D position Vector and 2 Color objects defining its ambient & diffuse emissions. These color channels interact with the Material of a Mesh to calculate the color of a Triangle.

A Triangle is constructed from 3 Vertices which each define the x, y and z coordinates of a corner. Based on these 3 Vertices, a forth 3D Vector is automatically derived at the center of the Triangle – this is…

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Demo | Tutorial

• Download/Install
• How To Use
  • A. Copy and Paste an Effect
  • B. Reference Hover.css
  • A Note on the display property
  • Using Icon Effects
• What's Included?
  • css
  • scss/less
  • Other
• Browser Support
• Using Grunt for Development
• Using Sass/LESS for Development
  • _hacks
  • _mixins
  • _options
• Contribute to Hover.css
• Licenses
  • Commercial License
  • Open-Source License
• Hire Ian Lunn

• NPM: npm install hover.css --save
• Bower: bower install hover --save
• Download Zip

Hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd…

A plugin that displays customizable markers upon progress bars of the video with Video.js. This could be used to show video breaks and show overlaid text on the video when playback reaches the specific break point.

See here

JSBin Demo can be found here

• Display markers on progress bar, with hover-over tooltips
• Display break overlays
• Flexible styling
• Support dynamically adding and removing markers

• Download master with git -- git clone git@github.com:spchuang/videojs-markers.git

• Download zip/tar files for newest release

• Download through bower -- bower install videojs-markers

Add the 'videojs.markers.js' plugin and stylesheet after including videojs script

<link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<link href="videojs.markers.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.2/video.js"></script>
<script src='../src/videojs.markers.js'></script>

To add breaks in the video, simply add a new time (in seconds) in the list of breaks option.

// initialize video.js
var video

Creating a dynamic grid layout has never been easier. With Magic Grid, all you have to do is specify a container and listen for changes. A few other configuration options are available for convenience but it's all very simple. Check it out live on JSFIDDLE. You can read about the implementation details on CodeBurst.

Note: Every item in the grid must have the same width.

This question is addressed in the article:

Implementing a grid layout can quickly turn into a tricky task. If you have grid items that are always the same height, then you can probably make do with a Flexbox grid or some other CSS grid implementation. However, if you’re dealing with user-generated content, chances are, you don’t have the luxury of equal height components. One longer…

SVG component to create placeholder loading, like Facebook cards loading.

This is a Vue port for react-content-loader.

• Completely customizable: you can change the colors, speed and sizes.
• Create your own loading: use the online tool to create your custom loader easily.
• You can use it right now: there are a lot of presets already.
• Performance
  • Tree-shakable and highly optimized bundle.
  • Pure SVG, so it's works without any javascript, canvas, etc.
  • Pure functional components.

⚠️ The latest version is compatible with Vue 3 only. For Vue 2 & Nuxt 2, use vue-content-loader@^0.2 instead.

With npm:

npm i vue-content-loader

Or with yarn:

yarn add vue-content-loader

CDN: UNPKG | jsDelivr (available as window.contentLoaders)

👀👉 Demo: CodeSandbox

<template&gt
  <content-loader></content-loader>
</template>

<script>
import { ContentLoader } from 'vue-content-loader'

export default {
  components: {
    ContentLoader,
  },
}

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).

• ⚙️ Customizable: Feel free to change the colors, speed, sizes, and even RTL;
• 👌 Plug and play: with many presets to use, see the examples;
• ✏️ DIY: use the create-content-loader to create your own custom loaders easily;
• 📱 React Native support: same API, as same powerful features;
• ⚛️ Really lightweight: less than 2kB and 0 dependencies for web version;

• Getting Started
• Usage
  • Native
• Options
• Examples
• Troubleshooting
• Similar packages
• Development

npm i react-content-loader --save

yarn add react-content-loader

npm i react-content-loader react-native-svg --save

yarn add react-content-loader react-native-svg

CDN from JSDELIVR

There are two ways to use it:

1. Presets, see the examples:

import ContentLoader, { Facebook } from 'react-content-loader'
const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook /

linxtion.com/demo/react-image-gallery

React image gallery is a React component for building image galleries and carousels

• Mobile swipe gestures
• Thumbnail navigation
• Fullscreen support
• Custom rendered slides
• RTL support
• Responsive design
• Tons of customization options (see props below)

React Image Gallery requires React 16.0.0 or later.

npm install react-image-gallery

# scss file import
@import "~react-image-gallery/styles/scss/image-gallery.scss";

# css file import
@import "~react-image-gallery/styles/css/image-gallery.css";

# js file import (using webpack)
import "react-image-gallery/styles/css/image-gallery.css";

Need more example? See example/app.js

import ImageGallery from "react-image-gallery";
// import stylesheet if you're not already using CSS @import
import "react-image-gallery/styles/css/image-gallery.css";
const images = [
  {
    original: "https://picsum.photos/id/1018/1000/600/",
    thumbnail: "https://picsum.photos/id/1018/250/150/",
  },
  {
    original: "https://picsum.photos/id/1015/1000/600/",
    thumbnail: "https://picsum.photos/id/1015/250/150/",
  },
  {
    original: "https://picsum.photos/id/1019/1000/600/",
    thumbnail: "https://picsum.photos/id/1019/250/150/",
  },
];

class MyGallery extends

Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — https://webslides.tv/demos.

Simply choose a demo and customize it in seconds. Latest version: webslides.tv/webslides-latest.zip.

The download includes demos and images (devices and logos). All content is for demo purposes only. Images are property of their respective owners.

webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

• Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
• Slide counter.
• Permalinks: go to a specific slide.
• Autoslide.
• Click to nav.
• Simple CSS alignments. Put content wherever you want (vertical centering...)
• 40+ components…

A lightweight library for manipulating and animating SVG, without any dependencies.

SVG.js is licensed under the terms of the MIT License.

npm install @svgdotjs/svg.js

yarn add @svgdotjs/svg.js

https://cdnjs.com/libraries/svg.js
https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js
https://unpkg.com/@svgdotjs/svg.js

Check svgjs.dev to learn more.

or

import {Motion, spring} from 'react-motion';
// In your render...
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  {value => <div>{value.x}</div>}
</Motion>

Animate a counter from 0 to 10. For more advanced usage, see below.

• Npm: npm install --save react-motion

• Bower: do not install with bower install react-motion, it won't work. Use bower install --save https://unpkg.com/react-motion/bower.zip. Or in bower.json:

{
  "dependencies": {
    "react-motion": "https://unpkg.com/react-motion/bower.zip"
  }
}

then include as

<script src="bower_components/react-motion/build/react-motion.js"></script>

• 1998 Script Tag:

<script src="https://unpkg.com/react-motion/build/react-motion.js"></script>
(Module exposed as `ReactMotion`)

Works with React-Native v0.18+.

• Simple Transition
• …

Rellax is a buttery smooth, super lightweight, vanilla javascript parallax library. Update: Rellax now works on mobile (v1.0.0).

• Demo Website

npm install rellax --save

yarn add rellax

<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>

if you're old school like us download and insert rellax.min.js in your html

<div class="rellax">
  I’m that default chill speed of "-2"
</div>
<div class="rellax" data-rellax-speed="7">
  I’m super fast!!
</div>
<div class="rellax" data-rellax-speed="-4">
  I’m extra slow and smooth
</div>

<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
<script>
  // Accepts any class name
  var rellax = new Rellax('.rellax');
</script>

<script>
  // Also can pass in optional settings block
  var rellax = new

Dynamics.js is a JavaScript library to create physics-based animations

To see some demos, check out dynamicsjs.com.

Download:

• GitHub releases
• npm: npm install dynamics.js
• bower: bower install dynamics.js

Include dynamics.js into your page:

<script src="dynamics.js"></script>

You can animate CSS properties of any DOM element.

var el = document.getElementById("logo")
dynamics.animate(el, {
  translateX: 350,
  scale: 2,
  opacity: 0.5
}, {
  type: dynamics.spring,
  frequency: 200,
  friction: 200,
  duration: 1500
})

You also can animate SVG properties.

var path = document.querySelector("path")
dynamics.animate(path, {
  d: "M0,0 L0,100 L100,50 L0,0 Z",
  fill: "#FF0000",
  rotateZ: 45,
  // rotateCX and rotateCY are the center of

The motion graphics toolbelt for the web.

mo · js is a javascript motion graphics library that is a fast, retina ready, modular and open source. In comparison to other libraries, it has a different syntax and code animation structure approach. The declarative API provides you a complete control over the animation, making it customizable with ease.

The library provides built-in components to start animating from scratch like html, shape, swirl, burst and stagger, but also bring you tools to help craft your animation in a most natural way. Using mojs on your site will enhance the user experience, enrich your content visually and create delightful animations precisely.

Mojs is published on the NPM registry, so you can install it through the command line interpreter using your favorite package manager. This is the best way to install the…

reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at revealjs.com.

The framework comes with a powerful feature set including nested slides, Markdown support, Auto-Animate, PDF export, speaker notes, LaTeX typesetting, syntax highlighted code and an extensive API.

Want to create reveal.js presentation in a graphical editor? Try https://slides.com. It's made by the same people behind reveal.js.

Hakim's open source work is supported by GitHub sponsors. Special thanks to:

Your app, enterprise-ready. Start selling to enterprise customers with just a few lines of code. Add Single Sign-On (and more) in minutes instead of months </a> </td>

• 🚀 Install reveal.js
• 👀 View the demo presentation
• 📖 Read the documentation
• 🖌 Try the visual editor for reveal.js at Slides.com
• 🎬 Watch the reveal.js video…

A simple and easy jQuery plugin for CSS animated page transitions.

http://git.blivesta.com/animsition/

Install : nodejs npm gulp

$ git clone https://github.com/blivesta/animsition.git
$ cd animsition
$ git checkout -b patch-1
$ npm install && gulp

Build

$ gulp build

Build -> Watch

$ gulp

cdnjs

• dist/css/animsition.css
• dist/css/animsition.min.css
• dist/js/animsition.js
• dist/js/animsition.min.js

To contribute to animsition, clone this repo locally and commit your code.
Please check that everything works before opening a pull-request.

• @blivesta (Maintainer)
• @ungki (Maintainer)
• @gauravpadia (Maintainer)
• @munsonbh
• @triq6
• @shgtkshruch
• @vburlak
• @wpexplorer
• @armbull
• @kkirsche
• @justbartlett
• @brianmontanaweb
• @Superpencil
• @tegansnyder
• @nvartolomei

Released under the MIT license.

• @numixtech
• @gauravpadia
• @asalamwp

(ThreeJS demo) - (source)

A high-level module to convert a SVG <path> string into a 3D triangulated mesh. Best suited for silhouettes, like font icon SVGs.

Built on top of cdt2d by @mikolalysenko, and various other modules.

npm install svg-mesh-3d --save

Here is an example using a simple path:

var svgMesh3d = require('svg-mesh-3d')

var path = 'M305.214,374.779c2.463,0,3.45,0.493...'
var mesh = svgMesh3d(path)

The returned mesh is a 3D indexed "simplicial complex" that can be used in ThreeJS, StackGL, etc. It uses arrays for vectors and follows the format:

{
  positions: [ [x1, y1, z1], [x2, y2, z2], ... ],
  cells: [ [a, b, c], [d, e, f] ]
}

Or, to load a mesh in…

Round, flat, designer-friendly pseudo-3D engine

View complete documentation and live demos at zzz.dog.

• zdog.dist.min.js minified, or
• zdog.dist.js un-minified

Link directly to Zdog JS on unpkg.

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>

npm: npm install zdog

Bower: bower install zdog

Create 3D models with Zdog by adding shapes. See Getting started for a walk-through of this demo.

let isSpinning = true;
let illo = new Zdog.Illustration({
  element: '.zdog-canvas',
  zoom: 4,
  dragRotate: true,
  // stop spinning when drag starts
  onDragStart: function() {
    isSpinning = false;
  },
});

// circle
new Zdog.Ellipse({
  addTo: illo,
  diameter: 20,
  translate: { z: 10 },
  stroke: 5,
  color: '#636',