Today we’d like to show you how to create a playful slider with an original fragmented look. Each element of the slider will be divided into pieces that will animate in different ways, using Pieces, a library that I’ve created for achieving interesting effects like these easily.
Best jQuery Core Java Script Plugins & Tutorials with Demo
Carbon : Create and Share beautiful Images of your Code
Create and share beautiful images of your source code.Start typing or drop a file into the text area to get started.
Features:
- Import from GitHub gist. Simply append a GitHub gist id to the url
- Customization. Customize things like your image’s syntax theme, window style, and more
- Share quickly. Save your image or Tweet a link with one click
Scrolling Letters Animation with Anime.js
A switching title effect where a fixed text element changes with an animation depending on the scroll position.Recently we’ve stumbled upon a really nice effect on Akademi’s website: the main title of the page moves along as one scrolls down and changes depending on the section that is currently in the viewport. We thought this would be an awesome effect to recreate and play with different animations for the text as it changes. For detecting when a certain section is entered, we use the Intersection Observer API. Note that the API is currently not supported in Safari.
Popmotion : JavaScript Reactive Animation Library
Popmotion is a functional, reactive JavaScript motion library.It allows developers to create animations and interactions from actions.Actions are streams of values that can be started and stopped, like tweens, physics and pointer input.
Actions are unopinionated, so those values can be used to create animations with CSS, SVG, React, Three.js… any API that accepts a number as an input.
Slice Revealer : Simple Reveal Animation with Anime.js
Today we’d like to share a simple reveal animation.The idea is to cover and uncover an image with slices to either hide or show it. The slices can be vertical or horizontal and can come from different directions. Playing with the number of slices, delays and colors, creates a plethora of possible looks for this effect.We are using anime.js for the animations.
TimezZ : Fast Timer plugin for Countdown
Fast timer plugin for countdown and count forward. With this plugin you can easily put a timer on your site, it works both ways. You can use two version, one version is the version for modern browsers with the standards of the ES2017 and the version for old browsers with ES2015 standards. Using the config you can change the tags as letters and numbers, you can also change the text output next to the numbers.
Sequence.js : Step based Animations Slider
Sequence.js is a CSS-driven framework for building responsive touch-enabled step-based animations. It is ideal for creating sliders, presentations, banners and other sorts of dynamic components. Among the several premium plans you will find a free one that grants you with a personal open-source license.
Anime.js : JavaScript Animation Engine
Anime.js is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.
Features:
- Keyframes: Chain multiple animation properties.
- Timeline: Synchronize multiple instances together.
- Playback controls: Play, pause, restart, seek animations or timelines.
- CSS transforms: Animate CSS transforms individually.
- Function based values: Multiple animated targets can have individual value.
- SVG Animations: Motion path, line drawing and morphing animations.
- Easing functions: Use the built in functions or create your own Cubic Bézier curve easing.
