Trying out GSAP 1.19

Developer
Keegan Brown
Size
3,898 Kb
Views
16,192
  1. Trying out GSAP 1.19 Previews
  2. Trying out GSAP 1.19 HTML Codes
  3. Trying out GSAP 1.19 CSS Codes
  4. Trying out GSAP 1.19 JS Codes

How do I make an trying out gsap 1.19?

What is a trying out gsap 1.19? How do you make a trying out gsap 1.19? This script and codes were developed by Keegan Brown on 16 October 2022, Sunday.

Trying out GSAP 1.19 Previews
IQ Test

Trying out GSAP 1.19 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Trying out GSAP 1.19</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { height: 100%;
}
body { background: #000; overflow: hidden; perspective: 300px; transform-style: preserve-3d;
}
gsap-hero { background-color: white; z-index: 0; display: block; position: absolute; width: 50px; height: 50px; top: 100%; left: 0; transform: translateZ(-500px); pointer-events: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/ModifiersPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Trying out GSAP 1.19 - Script Codes CSS Codes

html, body { height: 100%;
}
body { background: #000; overflow: hidden; perspective: 300px; transform-style: preserve-3d;
}
gsap-hero { background-color: white; z-index: 0; display: block; position: absolute; width: 50px; height: 50px; top: 100%; left: 0; transform: translateZ(-500px); pointer-events: none;
}

Trying out GSAP 1.19 - Script Codes JS Codes

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
TweenLite.lagSmoothing(32, 16);
var vw = window.innerWidth;
var vh = window.innerHeight;
var body = document.body;
var zIndex = 1;
var particles = [];
var Particle = function () { function Particle() { _classCallCheck(this, Particle); var particle = this; this.dy = 0; this.vy = 0; this.time = random(1.5, 3.5); this.gravity = 0.098; this.tl = new TimelineLite({ paused: true, onComplete: particle.recycle, onCompleteScope: particle }); this.hero = document.createElement("gsap-hero"); body.appendChild(this.hero); this.reset(); this.tl.to(particle.hero, particle.time, { backgroundColor: "rgb(0,0,0)", yPercent: -100, rotation: random(-540, 540), //scale: random(0.2, 0.4), x: random(-200, 200), y: random(-vh * 1.85, -vh), z: random(-100, -1000), zIndex: 1, modifiers: { y: function y(_y) { particle.vy += particle.gravity; particle.dy += particle.vy; return particle.dy + _y; } } }); console.log(this); } Particle.prototype.getRGB = function getRGB(c) { return [(c & 0xff0000) >> 16, (c & 0x00ff00) >> 8, c & 0x0000ff].join(','); }; Particle.prototype.spawn = function spawn() { this.dy = this.vy = 0; this.reset(); this.tl.restart(); }; Particle.prototype.reset = function reset() { TweenLite.set(this.hero, { left: random(5, 95) + "%", //scale: random(0.2, 1.2), xPercent: -50, backgroundColor: "rgb(" + this.getRGB(random(12000000, 12001111)) + ")", z: 1, zIndex: 500 }); }; Particle.prototype.recycle = function recycle() { particles.push(this); }; return Particle;
}();
function emit() { interval.restart(true); if (particles.length) { var particle = particles.shift(); particle.spawn(); }
}
function random(min, max) { if (max == null) { max = min;min = 0; } return Math.random() * (max - min) + min;
}
var i = 500;
while (i--) { particles.push(new Particle());
}
var interval = TweenLite.delayedCall(0.01, emit);
Trying out GSAP 1.19 - Script Codes
Trying out GSAP 1.19 - Script Codes
Home Page Home
Developer Keegan Brown
Username keeganbrown
Uploaded October 16, 2022
Rating 3
Size 3,898 Kb
Views 16,192
Do you need developer help for Trying out GSAP 1.19?

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!

Keegan Brown (keeganbrown) Script Codes
Name
Particles with pixi.js
GreenSock SplitText Contest Entry
A CSS Trip through outer space
Particles, Particles, Particles...
Easy-peasy 3D Scrolling Parallax with GSAP
Brute Force Random Traveling Salesman solver
Paint drips up the wall, sometimes.
Grow3.js Starter Pen
Text With Mouse Reactive Soft Shadow
Lava Tiles
Create amazing captions 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!