BuildUp
How do I make an buildup?
What is a buildup? How do you make a buildup? This script and codes were developed by Coran Spicer on 15 October 2022, Saturday.
BuildUp - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>BuildUp</title>
</head>
<body> <div class="container" style="width: 1024px; height: 768px; background: gray;"> <div class="square" style="display: block; width: 100px; height: 100px; background-color: blue; opacity: 0;" data-anim data-anim-type="move fade rotate" data-anim-starting-x="500" data-anim-starting-y="400" data-anim-starting-z="40" data-anim-ending-x="100" data-anim-ending-y="200" data-anim-ending-z="-100" data-anim-starting-rotation-z="-40" data-anim-ending-rotation-z="90" data-anim-value=".75" data-anim-duration="3" ></div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
BuildUp - Script Codes JS Codes
/**
*
* Build Up Animation
* Page build animations declared through markup
*
* @author Coran Spicer
* Uses GSAP for animation; primarily TimelineMax
*
**/
var BuildUp = function( sel, options, callback ) { // get the data-tagged elements for animation var $container = $(sel), $animElements = $container.find('[data-anim]'); // set up a master timeline for this page build var animQueue = new TimelineMax(options); if ( $animElements.length == 0 ) { // fallback for a page without any animated elements animQueue.to('',0,{}); } // sort by queue values $animElements.sort( function(a,b) { var queueA = parseInt( $(a).attr('data-anim-queue')); var queueB = parseInt( $(b).attr('data-anim-queue')); return (queueA < queueB) ? -1 : ( queueA > queueB ) ? 1 : 0; }); this.revert = function() { animQueue.pause(0,true); animQueue.remove(); animQueue = undefined; } // iterate over queue $animElements.each( function(i) { var subQueue, animTypes = $(this).data('anim-type').split(' '); if ( animTypes.length > 1 ) { subQueue = new TimelineMax( ) for ( var i=0; i<animTypes.length;i++) { var offset = i > 0 ? $(this).data('anim-duration') : 0; subQueue.add( delegateTimeline(this, animTypes[i]), '-='+offset ); } animQueue.add( subQueue, $(this).data('anim-offset') ); console.log( animQueue ); } else { animQueue.add( delegateTimeline( this, animTypes[0]), $(this).data('anim-offset') ); } }); function delegateTimeline(sel,type) { var type = type, value = $(sel).data('anim-value'), duration = $(sel).data('anim-duration'), direction = $(sel).data('anim-dir'), offset = $(sel).data('anim-offset'), delay = $(sel).data('anim-delay'); // add animation to timeline with properties per animation name switch(type) { case 'fade': // set the value of the animation to value, if defined, otherwise, check for direction and then default to fade out var val = ( value != undefined ) ? value : ( ( direction === 'in' ) ? 1 : .01 ); return new Fade(sel,val,duration,delay); break; case 'slide': // set the value of the animation to value, if defined, otherwise, check for upwards direction and then default to slide down from full height // note: in this implementation we're assuming a viewport height of 768, and a preset css of -768 for down, and 768 up var val = ( value != undefined ) ? value : ( ( direction === 'up' ) ? 0 : 0 ); return new Slide(sel,val,duration,delay); break; case 'flick': // set the anim's end point based on direction var startRotation = $(sel).data('anim-starting-rotation'), startPosX = $(sel).data('anim-starting-position-x'), startPosY = $(sel).data('anim-starting-position-y'), endRotation = $(sel).data('anim-ending-rotation'), endPosX = $(sel).data('anim-ending-position-x'), endPosY = $(sel).data('anim-ending-position-y'); return new Flick(sel,startRotation,startPosX,startPosY,endRotation,endPosX,endPosY,duration,delay); break; case 'scale': // set the anim's end point based on direction var startScale = $(sel).data('anim-starting-scale'), endScale = $(sel).data('anim-ending-scale'); return new Scale(sel, startScale, endScale, duration, delay); break; case 'move': // set the anim's end point based on direction var startPosX = $(sel).data('anim-starting-x'), startPosY = $(sel).data('anim-starting-y'), startPosZ = $(sel).data('anim-starting-z'), endPosX = $(sel).data('anim-ending-x'), endPosY = $(sel).data('anim-ending-y'), endPosZ = $(sel).data('anim-ending-z'); return new Move(sel, startPosX, endPosX, startPosY, endPosY, startPosZ, endPosZ, duration, delay ); break; case 'rotate': // set the anim's end point based on direction var startRotationX = $(sel).data('anim-starting-rotation-x'), startRotationY = $(sel).data('anim-starting-rotation-y'), startRotationZ = $(sel).data('anim-starting-rotation-z'), endRotationX = $(sel).data('anim-ending-rotation-x'), endRotationY = $(sel).data('anim-ending-rotation-y'), endRotationZ = $(sel).data('anim-ending-rotation-z'), perspective = $(sel).data('anim-ending-perspective'); return new Rotate(sel, startRotationX, endRotationX, startRotationY, endRotationY, startRotationZ, endRotationZ, perspective, duration, delay ); break; default: // do nothing. } }
}
// animation name definitions
var Fade = function( element, value, duration, delayBefore ) { // Fade in animation for general use of fading something this.tl = new TimelineMax({delay:delayBefore}); this.tl.to(element,duration,{autoAlpha:value}); return this.tl;
}
var Slide = function( element, value, duration, delayBefore ) { // Slide in animation for general use of sliding something vertically this.tl = new TimelineMax({delay:delayBefore}); this.tl.to(element,duration,{y:value}); return this.tl;
}
var Flick = function( element, startRotation, startPosX, startPosY, endRotation, endPosX, endPosY, duration, delay ) { // Combination of moving an element along the x & y axes and while rotating this.tl = new TimelineMax({delay:delay}); this.tl.to(element,0,{ rotationZ: endRotation, x: endPosX, y: endPosY }); this.tl.from(element,duration,{autoAlpha: 0.01, rotationZ: startRotation, x: startPosX, y: startPosY }); this.tl.to(element,duration,{autoAlpha: 1}, '-='+duration); // currently included, but should eventually we should support assigning multiple types of animations return this.tl;
}
var Scale = function( element, startScale, endScale, duration, delay ) { // Scale an element along both its width and height this.tl = new TimelineMax({delay:delay}); this.tl.set(element,{ scale: endScale }); this.tl.from(element,duration,{ scale: startScale }); this.tl.to(element,duration,{autoAlpha: 1}, '-='+duration); // currently included, but should eventually we should support assigning multiple types of animations return this.tl;
}
var Move = function( element, startPosX, endPosX, startPosY, endPosY, startPosZ, endPosZ, duration, delay ) { // Move an object along x, y, & z axes if ( endPosZ || startPosZ ) CSSPlugin.defaultTransformPerspective = 500; this.tl = new TimelineMax({delay:delay}); this.tl.set(element,{ x: startPosX, y: startPosY, z: startPosZ }); this.tl.to(element,duration,{ x: endPosX, y: endPosY, z: endPosZ }); return this.tl;
}
var Rotate = function( element, startRotationX, endRotationX, startRotationY, endRotationY, startRotationZ, endRotationZ, perspective, duration, delay ) { // Rotate an element this.tl = new TimelineMax({delay:delay}); this.tl.set(element,{ rotationX: startRotationX, rotationY: startRotationY, rotationZ: startRotationZ, transformPerspective: perspective }); this.tl.to(element,duration,{ rotationX: endRotationX, rotationY: endRotationY, rotationZ: endRotationZ }); return this.tl;
}
// page script
$(window).ready(function(){ var animation = new BuildUp('.container');
});
Developer | Coran Spicer |
Username | cgspicer |
Uploaded | October 15, 2022 |
Rating | 3 |
Size | 3,509 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
SMITE spinner | 2,508 Kb |
FocalCenter.js for jQuery | 3,462 Kb |
Aaronmarino.com v2 styles | 2,863 Kb |
ExamplesEdit | 1,592 Kb |
Fruit Stripe Background | 2,758 Kb |
A Pen by Coran Spicer | 2,815 Kb |
Album 88 Tuner | 9,852 Kb |
SMITE Ward Icon | 3,236 Kb |
Hi-rez logo | 5,938 Kb |
Responsive Mixed with Absolute | 2,495 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
About Mazano | Kiti | 2,585 Kb |
Pure CSS read more toggle | Idered | 2,344 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
ASCII triangle image overlay | Mitchdot | 2,200 Kb |
Boxes | H3l1um | 2,563 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!