Independent Transforms

Developer
GreenSock
Size
2,935 Kb
Views
44,528
  1. Independent Transforms Previews
  2. Independent Transforms HTML Codes
  3. Independent Transforms CSS Codes
  4. Independent Transforms JS Codes

How do I make an independent transforms?

What is a independent transforms? How do you make a independent transforms? This script and codes were developed by GreenSock on 11 June 2022, Saturday.

Independent Transforms Previews
IQ Test

Independent Transforms - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Independent Transforms</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400,700' rel='stylesheet' type='text/css'>
<div id="demo"> <div id="field"> <p>Notice that scale, rotation, and position can be animated independently using different eases and partially overlapping start/end times (impossible with CSS animations).</p> <div id="box">Independent transforms</div> <div id="controls"> <button id="rotation">Spin rotation</button> <button id="rotationX">Spin rotationX</button> <button id="rotationY">Spin rotationY</button> <button id="move">wander (position)</button> </div> </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.11.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Independent Transforms - Script Codes CSS Codes

body { background-color:black; margin: 0; padding: 0; font-family: Signika Negative, sans-serif; font-weight: 300;
}
html, body { height: 100%;
}
#demo { display:table; width:100%; height:100%;
}
#field { position:relative; display:table-cell; height: 100%;	overflow:hidden; text-align: center; vertical-align: middle;
}
#box { color: black; font-size:24px; padding: 10px 16px; border: 2px solid black; background: #9af600; background: linear-gradient(to bottom, #9af600 0%,#71B200 100%); display:inline-block; border-radius: 10px;
}
#field p { position: absolute; color: #999; top: 0px; padding: 0px 20px; text-align: left; z-index: -1000;
}
#controls { position:absolute; color: #999; width: 100%; bottom: 20px; text-align: center;
}
button { margin: 2px;
}

Independent Transforms - Script Codes JS Codes

var $box = $("#box"), $field = $("#field"), rotation = 0, rotationX = 0, rotationY = 0, wanderTween, ignoreRollovers;
//set a perspective on the container so we can see the 3D-ness
TweenLite.set($field, {perspective: 500});
//offset the origin on the z-axis to make the spins more interesting.
TweenLite.set($box, {transformOrigin:"center center -150px"});
//pulsate the box using scaleX and scaleY
TweenMax.to($box, 1.2, {scaleX:0.8, scaleY:0.8, force3D:true, yoyo:true, repeat:-1, ease:Power1.easeInOut});
//on rollover, rotate the box but to avoid excessive spinning, we'll desensitize rollovers during the first second of animation.
$box.hover(function() { if (!ignoreRollovers) { rotation += 360; ignoreRollovers = true; TweenLite.to($box, 2, {rotation:rotation, ease:Elastic.easeOut}); TweenLite.delayedCall(1, function() { ignoreRollovers = false; }); }
}, function() {});
$("#rotation").click(function() { rotation += 360; TweenLite.to($box, 2, {rotation:rotation, ease:Elastic.easeOut});
});
$("#rotationX").click(function() { rotationX += 360; TweenLite.to($box, 2, {rotationX:rotationX, ease:Power2.easeOut});
});
$("#rotationY").click(function() { rotationY += 360; TweenLite.to($box, 2, {rotationY:rotationY, ease:Power1.easeInOut});
});
$("#move").click(function() { if (wanderTween) { wanderTween.kill(); wanderTween = null; TweenLite.to($box, 0.5, {x:0, y:0}); } else { wander(); }
});
//randomly choose a place on the screen and animate there, then do it again, and again.
function wander() { var x = (($field.width() - $box.width()) / 2) * (Math.random() * 1.8 - 0.9), y = (($field.height() - $box.height()) / 2) * (Math.random() * 1.4 - 0.7); wanderTween = TweenLite.to($box, 2.5, {x:x, y:y, ease:Power1.easeInOut, onComplete:wander});
}
Independent Transforms - Script Codes
Independent Transforms - Script Codes
Home Page Home
Developer GreenSock
Username GreenSock
Uploaded June 11, 2022
Rating 4.5
Size 2,935 Kb
Views 44,528
Do you need developer help for Independent Transforms?

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!

GreenSock (GreenSock) Script Codes
Name
Banner Survey
GSAP JS Banner Example
Easing
Support Starter Pen
Progressively reveal dots on a Bezier curve
MorphSVGPlugin from GreenSock
GreenSock Home Page Animation
Simple 3D Hover Flip
Intro TimelineLite - finished
Hide rerun on embedded pens
Create amazing SEO content 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!