Creative View Mode Switch Animation with CSS & jQuery

    Creative View Mode Switch Animation with CSS & jQuery

    A creative views switch animation with grid and list viewing modes made with CSS3, jQuery, Masonry and GSAP’s TweenMax.

    Create Smooth WebGL Transitions on Scroll using Phenomenon

    Create Smooth WebGL Transitions on Scroll using Phenomenon

    A tutorial on how to transition WebGL instances in a smooth way based on the scroll position using three.js and Phenomenon.

    HTML Schedule build with HTML5, CSS3 and Javascript

    HTML Schedule build with HTML5, CSS3 and Javascript

    Milbytes Schedule has been built with HTML5, CSS3 and Javascript. This control allows you to visualize events in a grid inside your web page. It has many parameters to define its behavior, visualization and you can capture actions generated when you interact with the elements of the schedule.

    Brilliant Animated Testimonials Page with JavaScript

    Brilliant Animated Testimonials Page with JavaScript

    An animated testimonials page made with GSAP’s TweenMax which will help you to impress your customers.

    lax.js : JavaScript Plugin for awesum Scroll Effects

    lax.js : JavaScript Plugin for awesum Scroll Effects

    Lax.js  is a simple & light weight (2kb 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!

    Microsite Concept with Rotating Background

    Microsite Concept with Rotating Background

    An animated microsite concept with rotating background made with CSS3, jQuery and GSAP’s TweenMax. A microsite is an individual web page or small cluster of web pages that act as a separate entity for a brand. A microsite typically lives on its own domain, but some exist as a subdomain. Companies have different reasons for investing in microsites. Microsites have the advantage of opening wide out-of-the-box thinking and strategy and can be used to help brands achieve a number of things. For example, some companies have used them to highlight a specific campaign or target specific buyer personas. Others have used them to tell a short story or to inspire a specific call-to-action.

    jQuery Plugin to Detect Device Type : js.device.selector

    jQuery Plugin to Detect Device Type : js.device.selector

    ES6 class and jQuery Plugin which get the current Device Type and Display Type of a Browser while making CSS Breakpoints available in JavaScript.

    This solution make it possible to define your breakpoints only once (in CSS) and pass them automatically into JavaScript.

    iSVG : Converts SVG images into Inline SVG Code

    iSVG : Converts SVG images into Inline SVG Code

    Transforms short svg html notations into inline svg, which can be styled via css. jQuery based. Configurable. Easy api

    Image Distortion Effects with SVG Filters

    Image Distortion Effects with SVG Filters

    Today we would like to share three animated distortion effects by SVG filters that we apply to an image when hovering a text link. We use feTurbulence and feDisplacementMap to create different kinds of fragment and wave-like distortions. These kind of effects have become quite popular and there are many variations.

    Iro.js : HSV color picker widget for JavaScript

    Iro.js : HSV color picker widget for JavaScript

    Iro.js is a HSV color picker widget for JavaScript with a modern, SVG-based user interface.

    Features:

    • Simple: Low friction API, with robust support for hex, rgb, hsl and hsv color formats.
    • Extendable: Tweak the library to your requirements with Plugins and custom UI elements
    • Consistent behaviour: Works across all modern browsers and devices, including touchscreens.
    • Small footprint: 7kb minified and gzipped, with absolutely no jQuery or extra css/images in sight.
    • Great design: The controls are designed to be intuitive and responsive, plus they’re built with SVG so they look super crisp at any resolution.
    • Transparency support: Optional transparency slider with the transparency plugin.