Grid Reveal Effects with Anime.js

Grid Reveal Effects with Anime.js

Some experiments with the new staggering system of Anime.js where we try different effects for hiding and showing thumbnails in an image grid.

Recently, a new version of anime.js was released. One of the great new features is its staggering system that makes complex follow through and overlapping animations really simple. We wanted to give it a try and experiment with this new feature on an image grid with many thumbnails.

LiveSmart Video Chat with jQuery & NodeJs

LiveSmart Video Chat with jQuery & NodeJs

LiveSmart Video Chat is a standalone web application with video, audio, recording, screen sharing and file transfer face-to-face communication channels and integrated chat. It has own push notification server, that is based on Socket.io or Rachet PHP websocket libraries. It does not require any additional installations or third party logins and accounts. You can set a highly customizable contact button on your web site so that your visitors can directly call you if you are online.

Hummingbird : A tiny and fast jQuery Treeview Plugin

Hummingbird : A tiny and fast jQuery Treeview Plugin

Hummingbird is a tiny and fast jQuery Treeview Plugin.

Features: 

  • Display hierarchical tree structures.
  • Based on simple pseudo HTML lists or full HTML structures.
  • Tri-state logic.
  • Manual and programmatical check, uncheck, collapse, expand, etc.
  • Supports n-tuple nodes, i.e. doubles, triplets, etc.
  • Supports disabled nodes, checked or unchecked.
  • Get checked/unchecked items programmatically.
  • Add and remove nodes dynamically.
  • Filter nodes.
  • Supports HTML5 data-* attribute to embed custom data.
  • Supports Font Awesome icons.
  • Search function.

Lemon-JS : An accessible Rendering Engine in JavaScript

Lemon-JS : An accessible Rendering Engine in JavaScript

Lemon-JS is an accessible rendering engine in javaScript.The goal of this project is to stay simple to make people understand and experiment with 3D rendering.

Features:

  • Access to the low level API
  • Rendering queues and commands system
  • Lights support
  • Shaders
  • Scene management (nodes, hierrachy, …)
  • Separated “engine” logic from the low level part
  • Post processing
  • Loading models, sprites, videos and custom mesh

Text Distortion Effects using Blotter.js

Text Distortion Effects using Blotter.js

Distortion effects have become quite popular over the past two years and now many extraordinary website designs have some unique form of this intriguing trend. Today we’d like to share two demos with you that show how to use Blotter, a three.js and Underscore.js powered API for drawing artsy text effects. We used it to distort text on scroll and on mouse move.

CSSans Pro – The Colourful, Sassy, CSS Font

CSSans Pro - The Colourful, Sassy, CSS Font

CSSans Pro is a just-for-fun CSS project.

x-spreadsheet : A web-based JavaScript Spreadsheet

x-spreadsheet : A web-based JavaScript Spreadsheet

x-spreadsheet is a web-based JavaScript(canvas) spreadsheet.

Custom Cursor Effects with Paper.js

Custom Cursor Effects with Paper.js

A collection of five demos and a tutorial on how to create animated custom cursor effects for interactive elements like navigations, galleries and carousels.In the following tutorial we’ll take a look at how to create a magnetic noisy circle cursor for navigation elements. We’ll be using Paper.js with Simplex Noise.

AlaSQL : JavaScript SQL Database Library

AlaSQL : JavaScript SQL Database Library

AlaSQL.js – JavaScript SQL database for browser and Node.js. Handles both traditional relational tables and nested JSON data (NoSQL). Export, store, and import data from localStorage, IndexedDB, or Excel.

Layer Motion Slideshow with CSS Grid & TweenMax

Layer Motion Slideshow with CSS Grid & TweenMax

Today we’d like to share yet another CSS Grid-powered slideshow with you. The idea is to show and hide images with a reveal effect and add a parallax like effect to the main image and the title. For the title we’ve added two copied layers with an outline style which creates an interesting motion effect. For the animations we use TweenMax.