Timeline visualizer for GSAP Timelines

Developer
Manoz
Size
3,803 Kb
Views
103,224
  1. Timeline visualizer for GSAP Timelines Previews
  2. Timeline visualizer for GSAP Timelines HTML Codes
  3. Timeline visualizer for GSAP Timelines CSS Codes
  4. Timeline visualizer for GSAP Timelines JS Codes

How do I make an timeline visualizer for gsap timelines?

What is a timeline visualizer for gsap timelines? How do you make a timeline visualizer for gsap timelines? This script and codes were developed by Manoz on 14 June 2022, Tuesday.

Timeline visualizer for GSAP Timelines Previews
IQ Test

Timeline visualizer for GSAP Timelines - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Timeline visualizer for GSAP Timelines</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { position: relative; padding: 10px; font-family: Arial,Helvetica,sans-serif; background-color: #fafafa;
}
.container { margin: 0 auto; max-width: 800px; width: 100%;
}
.box { position: relative; width: 60px; height: 60px; margin-bottom: 10px; border-radius: 4px; background: url("http://mwanoz.fr/gsap/cookie.png") no-repeat; -webkit-background-size: cover; background-size: cover;
}
.timeline { margin: 20px auto 0; height: 78px; max-width: 800px; background-color: #00acc1;
}
.timeline p { margin: 0; padding: 5px 0; color: #fff; background-color: #0097a7; text-align: center;
}
.dragger-track { position: relative; width: 100%; margin-top: 20px;
}
#dragger { position: absolute; width: 10px; height: 50px; top: -20px;
}
#dragger div { position: relative; width: 0px; height: 0; border-style: solid; border-width: 20px 10px 0 10px; border-color: #212121 transparent transparent transparent; left: -10px;
}
#dragger div::before { content: " "; position: absolute; width: 20px; height: 50px; top: -20px; left: -10px;
}
#dragger div::after { content: " "; position: absolute; width: 1px; height: 31px; top: -1px; left: -1px; border-left: solid 2px #212121;
}
.buttons { position: absolute; top: 10px; right: 10px;
}
button { display: block; width: 130px; margin-bottom: 10px; padding: 13px 0; border: none; border-radius: 2px; text-transform: uppercase; font: inherit; font-size: 16px; color: #eeeeee; background-color: #2196f3; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: all .1s ease-in; cursor: pointer;
}
button:hover,
button:focus,
button:active { transition: all .1s ease-in;
}
button:hover { background-color: #1e88e5; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
button:focus { box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
button:active { background-color: #1976d2; box-shadow: 0 4px 7px rgba(0, 0, 0, 0.3);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="box"></div> <div class="timeline"> <p id="time">0.00</p> <div class="dragger-track"> <div id="dragger"> <div></div> </div> </div> </div> <div class="buttons"> <button id="play">Play</button> <button id="pause">Pause</button> <button id="reverse">Reverse</button> <button id="time1">timescale(0.25)</button> <button id="time2">timescale(1)</button> <button id="time3">timescale(2)</button> <button id="seek">seek(1.5)</button> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Timeline visualizer for GSAP Timelines - Script Codes CSS Codes

body { position: relative; padding: 10px; font-family: Arial,Helvetica,sans-serif; background-color: #fafafa;
}
.container { margin: 0 auto; max-width: 800px; width: 100%;
}
.box { position: relative; width: 60px; height: 60px; margin-bottom: 10px; border-radius: 4px; background: url("http://mwanoz.fr/gsap/cookie.png") no-repeat; -webkit-background-size: cover; background-size: cover;
}
.timeline { margin: 20px auto 0; height: 78px; max-width: 800px; background-color: #00acc1;
}
.timeline p { margin: 0; padding: 5px 0; color: #fff; background-color: #0097a7; text-align: center;
}
.dragger-track { position: relative; width: 100%; margin-top: 20px;
}
#dragger { position: absolute; width: 10px; height: 50px; top: -20px;
}
#dragger div { position: relative; width: 0px; height: 0; border-style: solid; border-width: 20px 10px 0 10px; border-color: #212121 transparent transparent transparent; left: -10px;
}
#dragger div::before { content: " "; position: absolute; width: 20px; height: 50px; top: -20px; left: -10px;
}
#dragger div::after { content: " "; position: absolute; width: 1px; height: 31px; top: -1px; left: -1px; border-left: solid 2px #212121;
}
.buttons { position: absolute; top: 10px; right: 10px;
}
button { display: block; width: 130px; margin-bottom: 10px; padding: 13px 0; border: none; border-radius: 2px; text-transform: uppercase; font: inherit; font-size: 16px; color: #eeeeee; background-color: #2196f3; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: all .1s ease-in; cursor: pointer;
}
button:hover,
button:focus,
button:active { transition: all .1s ease-in;
}
button:hover { background-color: #1e88e5; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
button:focus { box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
button:active { background-color: #1976d2; box-shadow: 0 4px 7px rgba(0, 0, 0, 0.3);
}

Timeline visualizer for GSAP Timelines - Script Codes JS Codes

/** * Simple timeline visualizer for GSAP * Made with Draggable. * Go check the external JS files. */
$(function() { // Load TimelineMax var tl = new TimelineMax( {onUpdate:updateDragger, paused:true} ); // Stock the container width. var wi = $(".container").width(); // Your timelines stuff here tl.to( ".box", 5, {x: wi - 60, rotation:720, ease:Elastic.easeInOut} ); // Set some vars for the draggable stuff var ti = $( "#time" ); var tr = tl.duration() * 160; // Time in seconds var dr = $( "#dragger" ); // Update the dragger when the timeline is updated. function updateDragger() { TweenLite.set(dr, {x: tr * tl.progress()}); ti.html(tl.time().toFixed( 2 )); } /** Create the dragger with the "Draggable" plugin. * The 'bounds' depends o */ var s = Draggable.create(dr, { type: "x", bounds: {minX: 0, maxX: wi}, onDrag: function(){ tl.progress(this.x / tr).pause(); } }); $( "#play" ).click(function(){ tl.play(); }); $( "#pause" ).click(function(){ tl.pause(); }); $( "#reverse" ).click(function(){ tl.reverse(); }); $( "#time1" ).click(function(){ tl.timeScale(0.25); }); $( "#time2" ).click(function(){ tl.timeScale(1); }); $( "#time3" ).click(function(){ tl.timeScale(2); }); $( "#seek" ).click(function(){ tl.seek(1.5); });
});
Timeline visualizer for GSAP Timelines - Script Codes
Timeline visualizer for GSAP Timelines - Script Codes
Home Page Home
Developer Manoz
Username Manoz
Uploaded June 14, 2022
Rating 3
Size 3,803 Kb
Views 103,224
Do you need developer help for Timeline visualizer for GSAP Timelines?

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!

Manoz (Manoz) Script Codes
Name
CSS3 Loading animations
Twitter Widget
CSS3 Experiments
Lovel 14
Wild title
Advanced css3 transition delays
Playing with GSAP, TimelineMax, Draggable etc...
A Pen by Manoz
Simple and easy Grid
Pure css social buttons box
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!