Javascript Animasyon Kütüphaneleri

Published in

Abdullah Karipcin

2 min readJul 29, 2018

En popüler animasyon kütüphaneleri…

1- GreenSock TweenLite

Anime.js’ye göre daha profesyonel olup kullanım zorluğu nedeni ile daha az kullanılmaktadır ancak çok zor olmadığını da söylemeden geçmeyelim. Ayrıca performans konusunda donanım hızlandırma desteği gibi bir çok faktörü içinde barındırarak alanındaki en hızlı kütüphanedir.

greensock/GreenSock-JS

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

github.com

TweenLite animasyon örneği https://codepen.io/ashthornton/full/KRQbMO/

2- Anime.JS

Javascript animasyon kütüphanesi olarak Github’da geliştiricilerin en çok kullandığı kütüphanedir. Basit ve esnek olmasıyla ön plana çıkıyor.

juliangarnier/anime

anime - JavaScript Animation Engine

github.com

3. Velocity

Velocity.js

Velocity.js: An incredibly fast animation engine for motion designers.

velocityjs.org

4. Anijs

Javascript ya da css kodu yazmadan animasyonlar oluşturmak için

AniJS, A Library to Raise your Web Design without Coding

AniJS, Declarative handling library for CSS animations

anijs.github.io

5. Three.js

mrdoob/three.js

three.js - JavaScript 3D library.

github.com

6. Popmotion

Popmotion/popmotion

popmotion - Monorepo for Popmotion and Pose animation packages

github.com

Eğer herhangi bir elemente scroll yapıldığı zaman animasyonu tetiklemek istiyorsanız;

imakewebthings/waypoints

waypoints - Waypoints is a library that makes it easy to execute a function whenever you scroll to an element.

github.com

matthieua/WOW

WOW - Reveal CSS animation as you scroll down a page

github.com

michalsnik/aos

aos - Animate on scroll library

github.com

jlmakes/scrollreveal

scrollreveal - Easy scroll animations for web and mobile browsers.

github.com

janpaepke/ScrollMagic

ScrollMagic - The javascript library for magical scroll interactions.

github.com

Parallax efekti için;

dixonandmoe/rellax

rellax - Lightweight, vanilla javascript parallax library

github.com

CSS temelli animasyon kütüphaneleri

Hover.css - A collection of CSS3 powered hover effects

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on…

ianlunn.github.io

CSShake

Some CSS classes to move your DOM! Easy-to-use classes that will add different kind of shake to each part of your site.

elrumordelaluz.github.io

Animate.css

Edit description

daneden.github.io

Diğer

mattboldt/typed.js

typed.js - A JavaScript Typing Animation Library

github.com

particles.js - A lightweight JavaScript library for creating particles

particles.js is a lightweight JavaScript library for creating particles.

vincentgarreau.com

HubSpot/pace

pace - Automatically add a progress bar to your site. #hubspot-open-source

github.com

ConnorAtherton/loaders.css

loaders.css - Delightful, performance-focused pure css loading animations.

github.com

mckamey/countdownjs

countdownjs - A simple JavaScript API for producing an accurate, intuitive description of the timespan between two Date…

github.com

Granim.js

Create fluid and interactive gradients animations with this small (< 17kB) .js library

sarcadass.github.io

Javascript Animasyon Kütüphaneleri

1- GreenSock TweenLite

greensock/GreenSock-JS

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

2- Anime.JS

juliangarnier/anime

anime - JavaScript Animation Engine

3. Velocity

Velocity.js

Velocity.js: An incredibly fast animation engine for motion designers.

4. Anijs

AniJS, A Library to Raise your Web Design without Coding

AniJS, Declarative handling library for CSS animations

5. Three.js

mrdoob/three.js

three.js - JavaScript 3D library.

6. Popmotion

Popmotion/popmotion

popmotion - Monorepo for Popmotion and Pose animation packages

imakewebthings/waypoints

waypoints - Waypoints is a library that makes it easy to execute a function whenever you scroll to an element.

matthieua/WOW

WOW - Reveal CSS animation as you scroll down a page

michalsnik/aos

aos - Animate on scroll library

jlmakes/scrollreveal

scrollreveal - Easy scroll animations for web and mobile browsers.

janpaepke/ScrollMagic

ScrollMagic - The javascript library for magical scroll interactions.

dixonandmoe/rellax

rellax - Lightweight, vanilla javascript parallax library

Hover.css - A collection of CSS3 powered hover effects

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on…

CSShake

Some CSS classes to move your DOM! Easy-to-use classes that will add different kind of shake to each part of your site.

Animate.css

Edit description

mattboldt/typed.js

typed.js - A JavaScript Typing Animation Library

particles.js - A lightweight JavaScript library for creating particles

particles.js is a lightweight JavaScript library for creating particles.

HubSpot/pace

pace - Automatically add a progress bar to your site. #hubspot-open-source

ConnorAtherton/loaders.css

loaders.css - Delightful, performance-focused pure css loading animations.

mckamey/countdownjs

countdownjs - A simple JavaScript API for producing an accurate, intuitive description of the timespan between two Date…

Granim.js

Create fluid and interactive gradients animations with this small (< 17kB) .js library

Written by Abdullah Karipcin