AtomTween 2.0

A lightweight and versatile Javascript CSS Animation Engine for Modern Browsers

• Super lightweight 5KB library, ideal for standard HTML5 banners
• Simple API
• Fast and silky smooth CSS animation
• A plethora of animation properties available including 3D transforms and function calls like onStart and onComplete.
• Animate multiple objects from a single line of code.
• Animation methods include 'to' and 'set'
• Create complex CSS animated sequences with minimal code

API Example

AtomTween's API is modelled on similar lines to GSAP TweenLite with a few minor differences.

// Get element from the DOM
var box1ID = AtomTween.getElement("id", "box1");

// Delay for 2 seconds then apply paramters to several properties over 1 second with an 'ease-in'
AtomTween.to (box1ID, 1, {delay:2, x:500, opacity:0.5, rotate:180, scale:2, ease:"ease-in"});

view example

Usage & Techniques

Sequencing and loops, Pixel Fitting

Properties

delay, set, opacity, left, top, width, height, scale, rotate, x, y, transformOrigin, skewX, skewY, skew, perspective, rotateX, rotateY, rotateZ, translateX, translateY, translateZ, shadow, onComplete, onStart

delay:

// delay: numerical value in seconds d
// delay the animation on element by 5 seconds
AtomTween.to (box1ID, 1, {delay:5, x:800, ease:"ease-out"});

view example

set method:

// set: method used to set properties on an object or objects
// set the x position to 800 and the opacity to 50 on two elements
AtomTween.set ([box1ID, box2ID], {x:800, opacity:50});

view example

opacity:

// opacity: numerical value from 0 to 100
// animate the opacity of two elements to 0 over 5 seconds
AtomTween.to ([box1ID, box2ID ], 5, {opacity:0, ease:"ease-out"});

view example

left:

// left: numerical value based on pixels
// animate element 500px left relative to its parent element
AtomTween.to (box1ID, 1, {left:500, ease:"ease-out"});

view example

top:

// top: numerical value based on pixels
// animate element 230px from the top relative to its parent element
AtomTween.to (box1ID, 1, {top:230, ease:"ease-out"});

view example

width:

// width: numerical value based on pixels
// animate the width of the element to 700px
AtomTween.to (box1ID, 3, {width:700, ease:"ease-out"});

view example

height:

// height: numerical value based on pixels
// animate the height of the element to 1500px
AtomTween.to (box1ID, 1, {height:150, ease:"ease-out"});

view example

scale:

// scale: numerical value ie. 1 = 100%, 2 = 200%
// animate the scale of the element to 200%
AtomTween.to (box1ID, 3, {scale:2, ease:"ease-out"});

view example

rotate:

// rotate: angle in degrees
// rotate elelent clockwise by 180° degrees over 3 seconds
AtomTween.to (box1ID, 3, {rotate:180, ease:"ease-out"});

view example

x:

// x: numerical value in pixels. Use 'x' in preference to 'top' for smoother css transitions
// animate element 500px on the x-axis relative its parent element
AtomTween.to (box1ID, 1, {x:500, ease:"ease-out"});

view example

y:

// y: numerical value in pixels. Use 'y' in preference to 'left' for smoother css transitions
// animate element 240px on the y-axis relative its parent element
AtomTween.to (box1ID, 3, {y:240, ease:"ease-out"});

view example

transformOrigin:

/* transformOrigin: modify the origin of the transformation point of an element
   acceptable paramters: "100% 0%", "20px 100px", 'top right' */
AtomTween.to (box1, 3, {tranformOrigin:"50% 50%", rotate:90, ease:"linear"});
AtomTween.to (box2, 3, {tranformOrigin:"0% 0%", rotate:90, ease:"linear"});
AtomTween.to (box3, 3, {tranformOrigin:"100% 100%", rotate:90, ease:"linear"});

view example

skewX:

// SkewX: string value - angle in degrees plus deg eg. '90deg'
AtomTween.to (box1ID, 4, {skewX:"30deg", ease:"ease-out"});

view example

skewY:

// SkewY: string value - angle in degrees plus deg eg. '45deg'
AtomTween.to (box2ID, 4, {skewY:"30deg", ease:"ease-out"});

view example

skew:

/* Skew: string value x-angle in degrees plus deg
   separated by comma and y-angle in degrees plus deg eg. '90deg, 30deg' */
AtomTween.to (box3ID, 4, {skew:"30deg, 30deg", ease:"ease-out"});

view example

perspective:

// perspective: numerical value from 0-2000
// 150 yields extreme perspective, 2000 yields subtle perspective

// Set perspective for div container
AtomTween.to (containerID, 0, {perspective:500});

view example

rotateX:

// rotateX: angle in degrees
// rotateX clockwise by 90° degrees over 1 second
AtomTween.to (box1ID, 1, {rotateX:90, ease:"ease-out"});

view example

rotateY:

// rotateY: angle in degrees
// rotateY anti-clockwise by 45° degrees over 1 second
AtomTween.to (box1ID, 1, {rotateY:-45, ease:"ease-out"});

view example

rotateZ:

// rotateZ: angle in degrees
// rotateZ clockwise 180° degrees over 1 second
AtomTween.to (box1ID, 1, {rotateZ:180, ease:"ease-out"});

view example

translateX:

// translateX: numerical value in pixels
// translateX -50px
AtomTween.to (box1ID, 4, {translateX:-50, ease:"ease-out"});

view example

translateY:

// translateY: numerical value in pixels
// translateY 50px
AtomTween.to (box2ID, 4, {translateY:50, ease:"ease-out"});

view example

translateZ:

// translateZ: numerical value in pixels
// translateZ -500px
AtomTween.to (box3ID, 4, {translateZ:-500, ease:"ease-out"});

view example

delayedCall:

// delayedCall: function call and time in seconds
AtomTween.delayedCall (endAnimation, 1);
AtomTween.to (box1ID, 4, {x:500, ease:"ease-out"});
function endAnimation () {  
    AtomTween.to (box2ID, 1, {x:550, ease:"ease-out"});
}

view example

Shadow: boxshadow / textshadow:

// boxshadow: Add shadow to any element: h-shadow v-shadow blur spread color
// textshadow: Adds shadow to text. Applies to text content within div elements: h-shadow v-shadow blur-radius color
AtomTween.shadow (box1ID, 	1, {delay:2, boxshadow:'10px 10px 5px 1px rgba(95, 171, 234, 1)', ease:'ease-in-out'}); 		
AtomTween.shadow (text1ID, 	1, {delay:2, textshadow:'10px 10px 5px rgba(95, 171, 234, 1)', ease:'ease-in-out'});

view example

Methods

onComplete:

// onComplete: call function once element animation has finished
AtomTween.to (box1ID, 2, {delay:0, x:500, onComplete:doSomething, ease:"ease-in-out"});
function doSomething () {
    textID.style.display = "block";
}

view example

onStart:

// onStart: call function once element animation has finished
AtomTween.to (box1ID, 2, {delay:3, x:500, onStart:doSomething, ease:"ease-in-out"});
function doSomething () {
    textID.style.display = "block";
}

view example

Techniques

Sequencing and Loops:

var del = 0;   // delay to sequencing animation
var sp	= 0.5; // set speed of animation
var box1ID = AtomTween.getElement("id", "box1");
var box2ID = AtomTween.getElement("id", "box2");
var box3ID = AtomTween.getElement("id", "box3");

function init() {
		del = 0;
		AtomTween.to (box1ID, 1 * sp, {delay:0, x:375, y:130, scale:1, opacity:1, ease:"ease-in-out"});
		AtomTween.to (box2ID, 1 * sp, {delay:0, x:425, y:130, scale:1, opacity:1, ease:"ease-in-out"});
		AtomTween.to (box3ID, 1 * sp, {delay:0, x:475, y:130, scale:1, opacity:1, onComplete:animate, ease:"ease-in-out"});
}

function animate () {

		AtomTween.to (box1ID, 1 * sp, {delay:del+=1 * sp, x:200, opacity:0.5, rotateY:180, rotateZ:45, scale:2, ease:"ease-in-out"});
		AtomTween.to (box2ID, 1 * sp, {delay:del+=1 * sp, scale:2, x:425, y:130, ease:"ease-in-out"});
		AtomTween.to (box3ID, 1 * sp, {delay:del+=1 * sp, x:800, y:130, rotateX:180, ease:"ease-in-out"});

		// Set some random positions
		AtomTween.to (box1ID, 1 * sp, {delay:del+=1 * sp, x:getRnd(800), y:getRnd(200), ease:"ease-in-out"});
		AtomTween.to (box2ID, 1 * sp, {delay:del+=1 * sp, x:getRnd(800), y:getRnd(200), ease:"ease-in-out"});
		AtomTween.to (box3ID, 1 * sp, {delay:del+=0 * sp, x:getRnd(800), y:getRnd(200), onComplete:init, ease:"ease-in-out"});
}

// get random rumber
function getRnd (n) { return Math.round(Math.random() * n) + 1; }

window.addEventListener('load', init);

view example

Pixel-Fitting:

// Smooth transition with x/y
AtomTween.to (xyID, 5, {x:800, y:145, ease:"ease-in-out"});

// Rough jumpy transition with left/top
AtomTween.to (lefttopID, 5, {left:800, top:225, ease:"ease-in-out"});

view example

Copyright (©) 2017, Santa Union Ltd.