Z Index Tween

Developer
Rodrigo Hernando
Size
2,138 Kb
Views
22,264
  1. Z Index Tween Previews
  2. Z Index Tween HTML Codes
  3. Z Index Tween CSS Codes
  4. Z Index Tween JS Codes

How do I make an z index tween?

Setting z-index property of a relative positioned element and then tween some css properties besides z-index. What is a z index tween? How do you make a z index tween? This script and codes were developed by Rodrigo Hernando on 18 November 2022, Friday.

Z Index Tween Previews
IQ Test

Z Index Tween - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Z Index Tween</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button id="btn1">Tween</button>
<div id="log1">On start the element's z-index is: <span></span></div>
<div id="log2">The element's current z-index is: <span></span></div>
<div id="log3">On complete the element's z index is: <span></span></div>
<div id="div1"></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.9.3/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Z Index Tween - Script Codes CSS Codes

#div1{	position:relative;	width:150px;	height:150px;	background:#00f;	margin-top:10px;
}
#log1, #log2, #log3{	width:300px;	height:30px;	line-height:30px;	padding:10px;	border:solid 1px #000;	background:#E9E9E9;	margin-top:10px;
}

Z Index Tween - Script Codes JS Codes

$(document).ready(function(){
var div1 = $("div#div1"),	log1 = $("div#log1"),	log2 = $("div#log2"),	log3 = $("div#log3"),	btn1 = $("button#btn1"),	tn1 = new TweenMax.to(div1, 2, {top:200, left:300, rotation:360, zIndex:20, paused:true, onStart:tn1Start, onUpdate:tn1Update, onComplete:tn1Complete});
TweenMax.set(div1, {zIndex:50})
function tn1Start()
{	log1.children().html(div1.css('z-index'));
}
function tn1Update()
{	log2.children().html(div1.css('z-index'));
}
function tn1Complete()
{	log3.children().html(div1.css('z-index'));
}
btn1.click(function()
{ log1.children().html('');	log2.children().html('');	log3.children().html('');	tn1.play(0);
});
});
Z Index Tween - Script Codes
Z Index Tween - Script Codes
Home Page Home
Developer Rodrigo Hernando
Username rhernando
Uploaded November 18, 2022
Rating 3
Size 2,138 Kb
Views 22,264
Do you need developer help for Z Index Tween?

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!

Rodrigo Hernando (rhernando) Script Codes
Name
Simple Slider Powered by GreenSock
Circular Bezier
Circular Progress Bar
Simple Drop Down Menu
GSAP Scramble Text Plugin
Toggle Tween Direction
Auto scroll to element offset
Greensock Bezier Morph
Animate SVG Gradient
Bezier Animation with straight paths
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!