Playing with GSAP, TimelineMax, Draggable etc...

Developer
Manoz
Size
2,956 Kb
Views
42,504
  1. Playing with GSAP, TimelineMax, Draggable etc... Previews
  2. Playing with GSAP, TimelineMax, Draggable etc... HTML Codes
  3. Playing with GSAP, TimelineMax, Draggable etc... CSS Codes
  4. Playing with GSAP, TimelineMax, Draggable etc... JS Codes

How do I make an playing with gsap, timelinemax, draggable etc...?

Just playing with GSAP, TimelineMax, Draggable etc.... What is a playing with gsap, timelinemax, draggable etc...? How do you make a playing with gsap, timelinemax, draggable etc...? This script and codes were developed by Manoz on 14 June 2022, Tuesday.

Playing with GSAP, TimelineMax, Draggable etc... Previews
IQ Test

Playing with GSAP, TimelineMax, Draggable etc... - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Playing with GSAP, TimelineMax, Draggable etc...</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="box one"></div> <div class="box two"></div> <div class="box three"></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>

Playing with GSAP, TimelineMax, Draggable etc... - Script Codes CSS Codes

body { position: relative; padding: 10px; font-family: Roboto,Arial,Helvetica,sans-serif; background-color: #fafafa;
}
.container { margin: 0 auto; max-width: 960px; 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; background-size: cover;
}
.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); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; cursor: pointer;
}
button:hover, button:focus, button:active { -webkit-transition: all .1s ease-in; 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 { margin-top: 20px; height: 82px; 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-track #dragger { position: absolute; width: 10px; height: 50px; top: -20px;
}
.dragger-track #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-track #dragger div::before { content: " "; position: absolute; width: 20px; height: 50px; top: -20px; left: -10px;
}
.dragger-track #dragger div::after { content: " "; position: absolute; width: 1px; height: 31px; top: -1px; left: -1px; border-left: solid 2px #212121;
}

Playing with GSAP, TimelineMax, Draggable etc... - Script Codes JS Codes

(function($) { var tl = new TimelineMax( {onUpdate:updateDragger, paused:true} ); var wi = $( ".container" ).width(); tl.to( ".one", 2.5, {x: wi - 60, rotation:720, ease:Elastic.easeInOut} ) .to( ".two", 4, {x: wi - 60, rotation:720, ease:Bounce.easeOut}, "-=2") .to( ".three", 2.5, {x: wi - 60, rotation:720, ease:Bounce.easeOut}, "-=1" ); var ti = $( "#time" ); var tr = tl.duration() * 160; var dr = $( "#dragger" ); function updateDragger() { TweenLite.set(dr, {x: tr * tl.progress()}); ti.html(tl.time().toFixed( 2 )); } var s = Draggable.create(dr, { type: "x", bounds: {minX: 0, maxX: wi}, onDrag: function(){ tl.progress(this.x / tr).pause(); } }); console.log( "Container width: " + wi); $( "#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); });
})(jQuery);
Playing with GSAP, TimelineMax, Draggable etc... - Script Codes
Playing with GSAP, TimelineMax, Draggable etc... - Script Codes
Home Page Home
Developer Manoz
Username Manoz
Uploaded June 14, 2022
Rating 3
Size 2,956 Kb
Views 42,504
Do you need developer help for Playing with GSAP, TimelineMax, Draggable etc...?

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
Twitter Widget
Share Widget UI
Pure css social buttons box
CSS3 Experiments
CSS3 Loading animations
Toggle button in pure CSS
Advanced css3 transition delays
A Pen by Manoz
Lovel 14
Stunning CSS box-shadow
Create amazing Facebook ads 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!