Clock

Developer
Size
1,978 Kb
Views
46,552

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 Previews

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);
Clock - Script Codes
Clock - Script Codes
Home Page Home
Developer Elliot Geno
Username pyrografix
Uploaded September 11, 2022
Rating 3
Size 1,978 Kb
Views 46,552
Do you need developer help for Clock?

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!

Elliot Geno (pyrografix) Script Codes
Create amazing marketing copy 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!