BuildUp

Developer
Coran Spicer
Size
3,509 Kb
Views
18,207
  1. BuildUp Previews
  2. BuildUp HTML Codes
  3. BuildUp JS Codes

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 Previews
IQ Test

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');
});
BuildUp - Script Codes
BuildUp - Script Codes
Home Page Home
Developer Coran Spicer
Username cgspicer
Uploaded October 15, 2022
Rating 3
Size 3,509 Kb
Views 18,207
Do you need developer help for BuildUp?

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!

Coran Spicer (cgspicer) Script Codes
Name
Donatello Sprite
FocalCenter.js for jQuery
ExamplesEdit
Hi-rez logo
Header logo that changes
Aaronmarino.com v2 styles
Responsive Mixed with Absolute
Tile with special tiles experiment
Promise example
Fruit Stripe Background
Create amazing sales emails with AI!

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!