Clock
How do I make an clock?
A functional clock forked from my original experiment which shows off a weird use for Greensock's new "cycle" feature. http://codepen.io/pyrografix/pen/zvxJpr?editors=001. What is a clock? How do you make a clock? This script and codes were developed by Elliot Geno on 11 September 2022, Sunday.
Clock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Clock</title>
</head>
<body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> <path stroke="#000" stroke-width="30" d="M30 500h100m740 0h100M500 30v100m0 740v100M30 500h100m740 0h100M500 30v100m0 740v100M93 735l87-50m640-370l87-50M265 93l50 87m370 640l50 87M180 315l-87-50m814 470l-87-50M265 907l50-87m370-640l50-87" /> <path id="minutes" stroke="#D4145A" stroke-width="30" d="M500 500V160" /> <path id="hours" stroke="#D4145A" stroke-width="30" d="M500 500V300" /> <path id="seconds" stroke="#D4145A" stroke-width="10" d="M500 500V170" /> <circle cx="500" cy="500" r="30"/>
</svg> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js?r=31 '></script> <script src="js/index.js"></script>
</body>
</html>
Clock - Script Codes JS Codes
var timeline=new TimelineMax();
var duration = 60*60*24;
timeline.add(TweenMax.allTo(["#hours", "#minutes", "#seconds"], duration, {cycle: {rotation: [720, 8640, 518400],ease:[Linear.easeNone, Linear.easeNone, SteppedEase.config(518400/6)]}, transformOrigin: "50% 100%", ease: Linear.easeNone}));
var date = new Date();
timeline.progress(((date.getHours()*60*60)+(date.getMinutes()*60)+date.getSeconds())/duration);
Developer | Elliot Geno |
Username | pyrografix |
Uploaded | September 11, 2022 |
Rating | 3 |
Size | 1,978 Kb |
Views | 46,552 |
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 |
Stained Glass | 2,127 Kb |
Coaster SVG | 2,133 Kb |
Prism | 2,843 Kb |
Dot Hopper - Pagination | 2,579 Kb |
Purple Nurple | 5,008 Kb |
Geometric | 1,977 Kb |
Eye Bee M | 4,047 Kb |
Swarm | 2,384 Kb |
Gnat Attack | 4,914 Kb |
Alternate Tween Properties - TweenMax | 2,215 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 |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
Multi-step GSAP animation | Acacheung | 2,668 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
Slider | Mohammed-fawzy | 2,634 Kb |
RWD- Mostly Fluid Layout Pattern | Marcocastro | 2,312 Kb |
Automatic scroll | Skeurentjes | 4,042 Kb |
Animated skewed panes | NyX | 4,462 Kb |
SVG Animation | Pollardld | 3,133 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
ABVI Menu Discarded | Overdrivemachines | 3,607 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!