Slack Loader Animation
How do I make an slack loader animation?
Slack Loader animation remake attempt using greensock. What is a slack loader animation? How do you make a slack loader animation? This script and codes were developed by Kasper on 30 January 2023, Monday.
Slack Loader Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slack Loader Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 479 269.5" enable-background="new 0 0 479 269.5" xml:space="preserve">
<g id="Dots"> <ellipse class="red" transform="matrix(0.944 -0.3298 0.3298 0.944 -49.2464 74.4669)" fill="#E21564" cx="194.8" cy="182.4" rx="14.5" ry="14.5"/> <ellipse class="yellow" transform="matrix(0.944 -0.3298 0.3298 0.944 -43.702 104.3141)" fill="#EBA823" cx="285.6" cy="181" rx="14.5" ry="14.5"/> <ellipse class="blue" transform="matrix(0.944 -0.3298 0.3298 0.944 -12.8423 99.3078)" fill="#70CBDE" cx="286.3" cy="87.5" rx="14.5" ry="14.5"/> <ellipse class="green" transform="matrix(0.944 -0.3298 0.3298 0.944 -18.7975 68.3809)" fill="#38BB93" cx="192.1" cy="89.6" rx="14.5" ry="14.5"/>
</g> <g id="Bars"> <path id="green-bar" fill="#38BB93" d="M235.6,214.2L235.6,214.2c7.6-2.6,11.5-10.9,8.9-18.4L205.8,84.7 c-2.6-7.6-10.9-11.5-18.4-8.9l0,0c-7.6,2.6-11.5,10.9-8.9,18.4l38.7,111.1C219.8,212.8,228,216.8,235.6,214.2z"/> <path id="red-bar" fill="#E21564" d="M310.7,157.4L199.6,196c-7.6,2.6-15.8-1.4-18.4-8.9l0,0c-2.6-7.6,1.4-15.8,8.9-18.4L301.2,130 c7.6-2.6,15.8,1.4,18.4,8.9v0C322.3,146.5,318.3,154.7,310.7,157.4z"/> <path id="yellow-bar" fill="#EBA823" d="M242.2,56.2L242.2,56.2c-7.6,2.6-11.5,10.9-8.9,18.4l38.7,111.1c2.6,7.6,10.9,11.5,18.4,8.9 l0,0c7.6-2.6,11.5-10.9,8.9-18.4L260.6,65.2C258,57.6,249.7,53.6,242.2,56.2z"/> <path id="blue-bar" fill="#70CBDE" d="M180.1,139.8l111.1-38.7c7.6-2.6,11.5-10.9,8.9-18.4v0c-2.6-7.6-10.9-11.5-18.4-8.9 l-111.1,38.7c-7.6,2.6-11.5,10.9-8.9,18.4l0,0C164.3,138.4,172.5,142.4,180.1,139.8z"/>
</g>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Slack Loader Animation - Script Codes CSS Codes
body { text-align:center;
}
svg { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:600px; height:600px;
}
#Dots { opacity:0;
}
Slack Loader Animation - Script Codes JS Codes
MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");
var barsOutTl = new TimelineMax(), rotateTl = new TimelineMax(), shrinkGrowTl = new TimelineMax(), masterTl = new TimelineMax({repeat:-1,repeatDelay:0.75}), barsInTl = new TimelineMax(),
bars = $('#blue-bar,#green-bar,#red-bar,#yellow-bar')
TweenMax.set(bars,{css:{'mix-blend-mode': 'multiply'}})
// bars out
barsOutTl.to("#blue-bar",0.30,{morphSVG:{shape:".blue"},ease:Power0.easeIn},'out')
.to("#green-bar",0.30,{morphSVG:{shape:".green"},ease:Power0.easeIn},'out-=0.01')
.to("#red-bar",0.30,{morphSVG:{shape:".red"},ease:Power0.easeIn},'out+=0.05')
.to("#yellow-bar",0.30,{morphSVG:{shape:".yellow"},ease:Power0.easeIn},'out+=0.04')
// rotate
rotateTl.to('#Bars',0.4,{rotation:'+=180',transformOrigin:'50% 50%',ease: Linear.easeNone})
.to('#Bars',0.4,{rotation:'+=180',transformOrigin:'50% 50%',ease: Power0.easeNone})
// shrink
shrinkGrowTl.to("#blue-bar",0.15,{xPercent:'-90%',yPercent:'75%',ease: Expo.easeIn},'shrink')
.to("#green-bar",0.15,{xPercent:'85%',yPercent:'73%',ease: Expo.easeIn},'shrink')
.to("#red-bar",0.15,{xPercent:'85%',yPercent:'-75%',ease: Expo.easeIn},'shrink')
.to("#yellow-bar",0.15,{xPercent:'-75%',yPercent:'-75%',ease: Expo.easeIn},'shrink')
// grow
.to("#blue-bar",0.15,{xPercent:'0%',yPercent:'0%',ease: Power4.easeIn},'grow')
.to("#green-bar",0.15,{xPercent:'0%',yPercent:'0%',ease: Power4.easeIn},'grow')
.to("#red-bar",0.15,{xPercent:'0%',yPercent:'0%',ease: Power4.easeIn},'grow')
.to("#yellow-bar",0.15,{xPercent:'0%',yPercent:'0%',ease: Power4.easeIn},'grow')
// bars in
barsInTl.to("#blue-bar",0.6,{morphSVG:{shape:"#blue-bar"},ease: Back.easeInOut.config(1)},'in')
.to("#green-bar",0.6,{morphSVG:{shape:"#green-bar"},ease: Back.easeInOut.config(1)},'in')
.to("#red-bar",0.6,{morphSVG:{shape:"#red-bar"},ease: Back.easeInOut.config(1)},'in')
.to("#yellow-bar",0.6,{morphSVG:{shape:"#yellow-bar"},ease: Back.easeInOut.config(1)},'in')
masterTl.add(barsOutTl,'Start') .add(rotateTl,'Start+=0.10') .add(shrinkGrowTl,'Start+=0.53') .add(barsInTl,'Start+=1')
masterTl.timeScale(1.1)
Developer | Kasper |
Username | kdbkapsere |
Uploaded | January 30, 2023 |
Rating | 3 |
Size | 2,991 Kb |
Views | 6,072 |
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 |
Animated Logo | 3,779 Kb |
Unknown Pleasures WIP | 18,874 Kb |
A Pen by kasper | 5,021 Kb |
Social Icon Fun | 2,037 Kb |
Tiles | 3,681 Kb |
Microscope Testtube Animation | 3,383 Kb |
Growing Heart Animation | 2,109 Kb |
Login Form | 2,321 Kb |
Love | 4,092 Kb |
Bootstrap Template | 1,292 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 |
CSS Infinite 360 | APinix | 5,564 Kb |
Search field | Jamesbarnett | 2,100 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
Ball physics | Blackkbot | 3,874 Kb |
Basic template | Tomcat | 1,675 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Yuliya v krylova | Rafszul | 37,351 Kb |
A Pen by Rob Levin | Roblevin | 2,787 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 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!