Skip to content

Instantly share code, notes, and snippets.

View ajmeyghani's full-sized avatar
😀
Hello!

AJ Meyghani ajmeyghani

😀
Hello!
46 followers · 42 following
View GitHub Profile
@ajmeyghani
ajmeyghani / anime-squares.js
Created August 22, 2018 18:31
const boxesAnimation = window.anime({
targets: '.js-box',
translateY: [150, 50],
backgroundColor: (el, i, t) => {
const r = 58 + (i * 12);
const g = 35 + (i * 12);
const b = 220;
const color = `rgb(${r}, ${g}, ${b})`;
return color;
},
@ajmeyghani
ajmeyghani / squares.css
Created August 22, 2018 18:30
html, body {
padding: 0;
margin: 0;
background-color: #25275a;
width: 100%;
height: 100%;
}
.box {
width: 50px;
height: 150px;
@ajmeyghani
ajmeyghani / squares.html
Created August 22, 2018 18:08
HTML markup for the squares animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/squares.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<title>Anime Animation</title>
</head>
<body>
<div class="boxes">
@ajmeyghani
ajmeyghani / anime-multiple-box-animation.js
Created August 22, 2018 18:07
Animating multiple boxes with Anime
const boxesAnimation = anime({
targets: '.js-box',
translateX: (elm, index, t) => index * 50,
scale: 2,
easing: 'easeInOutSine',
delay: (elm, index, t) => index * 20,
duration: 1200,
loop: true,
direction: 'alternate',
});
@ajmeyghani
ajmeyghani / anime-simple-animation.js
Created August 22, 2018 18:06
Simple Anime animation
anime({
targets: '#box',
translateX: 200,
});
@ajmeyghani
ajmeyghani / animejs-anatomy.js
Created August 22, 2018 18:06
Anatomy of an animation object
{
/* Animation Targets: div, .box, #sky, etc... */
/* Animatable Properties: height, opacity, color, translateX, etc ... */
/* Property Parameters: duration, delay, easing, etc... */
/* Animation Properties: loop, direction, autoplay, etc... */
}
@ajmeyghani
ajmeyghani / create-anime-object.js
Created August 22, 2018 18:05
Create an empty Anime object
const animeObject = anime({
/* describe animation */
});
@ajmeyghani
ajmeyghani / flatten.js
Created March 24, 2017 23:17
Flattening an Array of array of array of ..... arrays.
var assert = require('assert');
/**
* Flattens array that are nested at n levels.
* @param {Array} arr The array to be flattened
* @return {Array} New array with flattened elements.
* ----------------------------------------------------------
*/
function flatten(arr) {
if(!arr) {
return [];