Upload

Developer
Chris Samuels
Size
3,148 Kb
Views
4,048
  1. Upload Previews
  2. Upload HTML Codes
  3. Upload CSS Codes
  4. Upload JS Codes

How do I make an upload?

Inspired by: https://dribbble.com/shots/1429143-Upload. What is a upload? How do you make a upload? This script and codes were developed by Chris Samuels on 26 January 2023, Thursday.

Upload Previews
IQ Test

Upload - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Upload</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="cloudGroup" xmlns="http://www.w3.org/2000/svg" width="114.333px" height="105.789px" viewBox="0 -6 114.333 105.789"> <g id="fill-loader" stroke="#bfbfbf" fill="#ffffff"> <path id="cloud" stroke-width="5" stroke-miterlimit="10" d="M75.166,77.208 c20.251,0,36.667-16.666,36.667-36.916c0-20.251-16.416-36.792-36.667-36.792c-18.535,0-33.849,13.694-36.311,31.553 c-3.766-2.691-8.374-4.312-13.356-4.312C12.797,30.741,2.5,41.272,2.5,53.975s10.297,23.233,22.999,23.233H75.166z"/> <polyline id="arrow" fill="none" stroke="#BFBFBF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="86.583,46.021 75.354,37.146 63.416,46.021	"/> <polyline id="check" fill="none" stroke="#3DB0FA" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="	70.999,31.583 55.354,51.146 46.416,43.667	"/> <circle id="loading" fill="none" stroke="#3DB0FA" stroke-width="9" stroke-miterlimit="10" cx="57.229" cy="40.313" r="36.813"/> <circle id="loader" fill="none" display="none" stroke="#BFBFBF" stroke-width="9" stroke-miterlimit="10" cx="57.229" cy="40.313" r="36.813"/> </g>
</svg>
<h1>Upload</h1> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=132'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=11'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/plugins/TextPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Upload - Script Codes CSS Codes

body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; padding: 10em 0
}
svg { width: 100%;
}
h1 { color: #bfbfbf; font: 16px/0 Arial,sans-serif; letter-spacing: 2px; margin: 0; padding: 0;
}

Upload - Script Codes JS Codes

var select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s) }, cg = select('#cloudGroup g'), cloud = select('#cloud'), arrow = select('#arrow'), loader = select('#loader'), loading = select('#loading'), check = select('#check'), h1 = select('h1')
MorphSVGPlugin.convertToPath("#loader");
TweenMax.set(arrow, { y:5,
})
TweenMax.set(h1, { scale:1, transformOrigin:"50% 50%", text: { value:"Upload", delimiter:" " }
})
TweenMax.set(loading, { transformOrigin:"50% 50%", rotation:'-90', drawSVG:'0'
})
TweenMax.set(check, { transformOrigin:"50% 50%", drawSVG:'0'
})
TweenMax.to(arrow, 0.7, { y:'-=10', yoyo: true, repeat: -1, morphSVG:"83.541,46.021 75.354,37.146 66.416,46.021", ease:Sine.easeInOut
})
/*
function hover() { TweenMax.to("#fill-loader, #arrow", 0.4, { stroke:"#3db0fa", transformOrigin:"50% 50%" }) TweenMax.to("h1", 0.5, { fill:"#3db0fa", scale:1.2, transformOrigin:"50% 50%" })
}
cg.onmouseover = function(e) { hover();
}
cg.onmouseout = function(e) { TweenMax.to("#fill-loader, #arrow", 0.5, { stroke:"#bfbfbf" }) TweenMax.to("h1", 0.5, { fill:"#bfbfbf", scale:1, transformOrigin:"50% 50%" })
}
*/
function upload() { var tl = new TimelineMax(); tl.to(cloud, 0.9, { transformOrigin:"50% 50%", strokeWidth:9, morphSVG:"#loader", ease:Elastic.easeInOut.config(0.1, 5) }) .to(arrow, 0.9, { x:-17, ease:Expo.easeInOut }, .1) .to(loading, 2, { transformOrigin:"50% 50%", drawSVG:"100%", ease:Circ.easeInOut }, 0.6) .to(arrow, 2, { yoyo: false, rotation: 360, transformOrigin:"50% 50%", ease:Circ.easeInOut }, 0.6) .to(arrow, 1, { rotation: 0, stroke: "#3DB0FA", transformOrigin:"50% 50%", ease:Circ.easeInOut }, '-=0.05') .to("#loading, #cloud", 0.3, { strokeWidth:4, }, '-=0.05') .to(arrow, 0.6, { x: 0, y: 2, transformOrigin:"50% 50%", morphSVG: "#check", ease:Expo.easeInOut }, '-=0.65') .to(h1, 0.9, { color:"#3DB0FA", scale:1.1, text: { value:"Complete", delimiter:" " }, ease:Elastic.easeInOut.config(4, 1.5) }, '-=0.60')
}
cloud.onclick = function(e) { upload();
}
Upload - Script Codes
Upload - Script Codes
Home Page Home
Developer Chris Samuels
Username anycircle
Uploaded January 26, 2023
Rating 3
Size 3,148 Kb
Views 4,048
Do you need developer help for Upload?

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!

Chris Samuels (anycircle) Script Codes
Name
Build Lineup Map - Lineups.io
Code Icon
Keyboard
404 page
Mail Icon
Cart Icon
Temp
CS Logo
Case Study Card
Radar Icon
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!