Multi-step GSAP animation
How do I make an multi-step gsap animation?
What is a multi-step gsap animation? How do you make a multi-step gsap animation? This script and codes were developed by Amanda Cheung on 15 November 2022, Tuesday.
Multi-step GSAP animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Multi-step GSAP animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg viewBox="0 0 100 100"> <circle class="circle" fill="#96a2d2" cx="50" cy="50" r="84"/> <g class="cross"> <path class="cross--left" d="M95,96c-0.3,0-0.5-0.1-0.7-0.3l-90-90c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l90,90c0.4,0.4,0.4,1,0,1.4 C95.5,95.9,95.3,96,95,96z"/> <path class="cross--right" d="M5,96c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l90-90c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-90,90C5.5,95.9,5.3,96,5,96z"/> </g> <g class="half"> <path class="half__shell" d="M50,37.5c-6.9,0-12.5,5.6-12.5,12.5S43.1,62.5,50,62.5S62.5,56.9,62.5,50S56.9,37.5,50,37.5z M49,60.4 c-5.3-0.5-9.5-5-9.5-10.4s4.2-9.9,9.5-10.4V60.4z M51,60.4V39.6c5.3,0.5,9.5,5,9.5,10.4S56.3,59.9,51,60.4z"/> <path class="half--pink" fill="#ed4385" d="M39.5,50c0,5.5,4.2,9.9,9.5,10.4V39.6C43.7,40.1,39.5,44.5,39.5,50z"/> <path class="half--teal" fill="#6fcbdc" d="M51,39.6v20.9c5.3-0.5,9.5-5,9.5-10.4S56.3,40.1,51,39.6z"/> </g>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Multi-step GSAP animation - Script Codes CSS Codes
body { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: black;
}
svg { padding: 50px; width: 100px;
}
.circle { display: none;
}
Multi-step GSAP animation - Script Codes JS Codes
var circle = $(".circle"), cross = $(".cross"), crossLeft = $(".cross--left"), crossRight = $(".cross--right"), halfPink = $(".half--pink"), halfTeal = $(".half--teal"), halfShell = $(".half__shell"), half = $(".half"), svg = $("svg"), tl = new TimelineMax();
tl.to (half, 0, { scale: "8", transformOrigin: "center" }) .from(halfPink, 1, { y: "-100vh", ease: Back.easeOut.config(.5) }) .from(halfTeal, 1, { y: "100vh", ease: Back.easeOut.config(.5), delay: -1 }) .to (half, 1, { rotation: "45deg", ease: Back.easeIn, }) .to (half, 1, { rotation: "90deg", ease: Back.easeIn }) .to (half, 1, { rotation: "135deg", ease: Back.easeIn }) .to (half, 1, { rotation: "180deg", ease: Back.easeIn }) .to (half, 1, { scale: 4, ease: Back.easeIn }) .to (circle, 0, { display: "initial", delay: -1 }) .to (cross, 0, { scale: 4, transformOrigin: "center", delay: -1 }) .to (svg, 1, { rotation: "45deg", ease: Back.easeIn, }) .to (svg, 1, { rotation: "90deg", ease: Back.easeIn }) .to (svg, 1, { rotation: "135deg", ease: Back.easeIn }) .to (svg, 1, { rotation: "180deg", ease: Back.easeIn }) .to (half, 1, { scale: 2, ease: Back.easeIn }) .to (cross, 1, { scale: 2, delay: -1, ease: Back.easeIn })
;
Developer | Amanda Cheung |
Username | acacheung |
Uploaded | November 15, 2022 |
Rating | 3 |
Size | 2,668 Kb |
Views | 16,192 |
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!
Name | Size |
Dobot wireframe | 1,507 Kb |
GSAP rising block | 2,417 Kb |
GSAP chomping cheezburger | 5,008 Kb |
Transparent tooltip with border | 1,927 Kb |
SVG Sprite Animation | 1,512 Kb |
A Pen by Amanda Cheung | 1,572 Kb |
Open close icon animation | 1,822 Kb |
GSAP rising block with reflection | 2,516 Kb |
Why Make Sense - Hot Chip | 1,659 Kb |
Link transition and keyframe animation demo | 1,681 Kb |
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!
Name | Username | Size |
Portfolio Page | KaylaMT | 1,983 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
LeMandinque | Aadesida | 9,046 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
RWD Conversion Practice | Jxqr97 | 2,743 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!