Greensock 3D Preloader Spinner

Developer
Rodrigo Hernando
Size
2,373 Kb
Views
18,216
  1. Greensock 3D Preloader Spinner Previews
  2. Greensock 3D Preloader Spinner HTML Codes
  3. Greensock 3D Preloader Spinner CSS Codes
  4. Greensock 3D Preloader Spinner JS Codes

How do I make an greensock 3d preloader spinner?

Inspired by this pen by David DeSandro: http://codepen.io/desandro/pen/igHbGI came up with the idea of creating a 3D preloader spinner using Greensock Animation Platform.. What is a greensock 3d preloader spinner? How do you make a greensock 3d preloader spinner? This script and codes were developed by Rodrigo Hernando on 16 November 2022, Wednesday.

Greensock 3D Preloader Spinner Previews
IQ Test

Greensock 3D Preloader Spinner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Greensock 3D Preloader Spinner</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="title">3D Rotating Preloader Spinner<br>Powered by Greensock Animation Platform
</div>
<div id="container"> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></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.4/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Greensock 3D Preloader Spinner - Script Codes CSS Codes

body{ margin:0; background:#333;
}
#title{ font-size:28px; font-family: "Trebuchet MS"; font-weight: bold; color:#FFF; text-align:center;
}
.div1{ width:20px; height:20px; background:#fff; position:absolute; border-radius:50%;
}
#container{ position:relative; top:100px; left:50%; margin-left:-150px; width:300px;
}

Greensock 3D Preloader Spinner - Script Codes JS Codes

var loaderItems = $("div.div1"), loaderAmount = loaderItems.length, container = $("div#container"), angle = 360 / loaderAmount, tl = new TimelineMax({ paused: true, repeat: -1, delay: 1.15 }), //Spin velocity, smaller the value, faster it rotates spinSpeed = 0.05;
TweenMax.set(container, { perspective: 300
});
$.each(loaderItems, function(i) { var alpha = (0.1 * i) + .3; TweenMax.set($(this), { left: 150, top: 100 }); TweenMax.to($(this), 1, { rotationY: ((i + 1) * angle), transformOrigin: '50% 50% -100px', autoAlpha: alpha }); tl.set(loaderItems, { rotationY: ('+=' + angle), transformOrigin: '50% 50% -100px', ease: Linear.easeNone, delay: spinSpeed })
});
tl.play();
Greensock 3D Preloader Spinner - Script Codes
Greensock 3D Preloader Spinner - Script Codes
Home Page Home
Developer Rodrigo Hernando
Username rhernando
Uploaded November 16, 2022
Rating 4
Size 2,373 Kb
Views 18,216
Do you need developer help for Greensock 3D Preloader Spinner?

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
Update tween progress with Draggable
Transform Orign
Greensock Draggable latest update
Toggle Tween Direction
Circular Progress Bar
Simple Drop Down Menu
Z Index Tween
Greensock Bezier Morph
Circular Bezier
Spinning Images
Create amazing blog posts 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!