GreenSock - Click

Developer
Petr Tichy
Size
2,582 Kb
Views
24,288
  1. GreenSock - Click Previews
  2. GreenSock - Click HTML Codes
  3. GreenSock - Click CSS Codes
  4. GreenSock - Click JS Codes

How do I make an greensock - click?

GreenSock tween on click.Find out more GreenSock code snippets in the GreenSock Cheat Sheet https://ihatetomatoes.net/greensock-cheat-sheet/. What is a greensock - click? How do you make a greensock - click? This script and codes were developed by Petr Tichy on 03 November 2022, Thursday.

GreenSock - Click Previews
IQ Test

GreenSock - Click - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>GreenSock - Click</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1><strong>Green<span>Sock</span></strong> - Click to tween</h1>
<div id="box" class="box"></div>
<div id="boxSmall" class="box"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

GreenSock - Click - Script Codes CSS Codes

html, body { height: 100%;
}
body { background-color: #262626; font-family: 'Open Sans', sans-serif; overflow: hidden;
}
h1 { font-size: 16px; width: 300px; color: #838484; font-weight: 300; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -200px); transform: translate(-50%, -200px); padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.3);
}
h1 span { color: #89c540;
}
h1 strong { color: #fff;
}
.box { background-color: #88ce02; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
#box { width: 100px; height: 100px; cursor: pointer;
}
#boxSmall { width: 50px; height: 50px; background-color: rgba(136, 206, 2, 0.3); z-index: -1;
}

GreenSock - Click - Script Codes JS Codes

var $box = $('#box'), $boxSmall = $('#boxSmall');
$box.on('click', function(e){ TweenLite.to($boxSmall, 0.3, {x:'+=100px'});
});
GreenSock - Click - Script Codes
GreenSock - Click - Script Codes
Home Page Home
Developer Petr Tichy
Username ihatetomatoes
Uploaded November 03, 2022
Rating 3
Size 2,582 Kb
Views 24,288
Do you need developer help for GreenSock - Click?

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!

Petr Tichy (ihatetomatoes) Script Codes
Name
JQuery For a Complete Beginners - Console, Window.Scroll, Window.Resize
Animating SVG With GreenSock
Ihatetomatoes Animation - Crossbrowser
GreenSock - staggerTo with cycle
Happy New Year - GreenSock DrawSVG Animation
GreenSock - TweenLite demo - Start
GreenSock - Scale Box on Hover
Merry Christmallax - Skrollr.js animation
CSS3 Glitch Animation
GreenSock - TweenLite - Comp
Create amazing Facebook ads 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!