Animating non-CSS property
How do I make an animating non-css property?
Example, how to animate the property of an HTML DOM element with pure Javascript, scrollLeft in this case.. What is a animating non-css property? How do you make a animating non-css property? This script and codes were developed by Matthias Dittgen on 26 August 2022, Friday.
Animating non-CSS property - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animating non-CSS property</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 id="info"> <h1>Animating non-CSS property (scrollLeft)</h1> <p>with vanilla Javascript and easing</p>
</div>
<div id="wrapper"> <div id="content">Example, how to animate the property of an HTML DOM element with pure Javascript, scrollLeft in this case.</div>
</div>
<input type="text" id="scrollLeft" value="0"><br>
<select id="easings"></select><br>
<button id="btnR">right</button>
<button id="btnL">left</button> <script src="js/index.js"></script>
</body>
</html>
Animating non-CSS property - Script Codes CSS Codes
html,
body { width: 100%; height: 100%; margin: 0;
}
body{ position: relative; background-color: #333333;
}
#info { margin: 12px 0 0 12px;
}
h1 { color: #eeeeee; font-size: 21px; font-weight: normal; margin: 0;
}
p, a { margin: 3px 0 0 0; color: #cccccc; font-size: 13px;
}
#wrapper{ margin: 15px; width: 350px; height: 80px; background-color: #ccc; overflow: auto;
}
#content{ padding: 0 12px; margin: 0; white-space: nowrap; font-family: sans-serif; font-size: 32px; font-weight: normal; line-height: 65px; color: #333;
}
input,
select { width: 150px; padding: 0; border: none; margin: 12px 0 0 12px;
}
input { text-align: right;
}
button { margin: 12px 0 0 12px;
}
Animating non-CSS property - Script Codes JS Codes
var main = function() { var sel = function (id) { return document.getElementById(id); }; var w = sel('wrapper'); var c = sel('content'); var v = sel('scrollLeft'); var s = sel('easings'); var e, o; for (e in easings) { o = document.createElement('option') o.innerHTML = e; s.appendChild(o); } var updateV = function (time) { v.value = w.scrollLeft; requestAnimationFrame(updateV); }; updateV(); var tween = function (start, end, duration, easing) { var delta = end - start; var startTime; if (window.performance && window.performance.now) { startTime = performance.now(); } else if (Date.now) { startTime = Date.now(); } else { startTime = new Date().getTime(); } var tweenLoop = function (time) { var t = (!time ? 0 : time - startTime); var factor = easing(null, t, 0, 1, duration); w.scrollLeft = start + delta * factor; if (t < duration && w.scrollLeft != end) requestAnimationFrame(tweenLoop); } tweenLoop(); }; sel('btnR').addEventListener('click', function (e) { tween(0, w.scrollWidth - w.offsetWidth, 2000, easings[s.value]); }); sel('btnL').addEventListener('click', function (e) { tween(w.scrollWidth - w.offsetWidth, 0, 2000, easings[s.value]); }); tween(0, w.scrollWidth - w.offsetWidth, 2000, easings.easeOutBounce);
};
// xBrowser requestAnimationFrame()
(function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); };
}());
// common easing equations by Rob' Penner :)
var easings = { // x = extra // t = current time or position // b = begin value // c = change or delta of value // d = duration / total time or position easeInQuad: function (x, t, b, c, d) { return c*(t/=d)*t + b; }, easeOutQuad: function (x, t, b, c, d) { return -c *(t/=d)*(t-2) + b; }, easeInOutQuad: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }, easeInCubic: function (x, t, b, c, d) { return c*(t/=d)*t*t + b; }, easeOutCubic: function (x, t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b; }, easeInOutCubic: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t + b; return c/2*((t-=2)*t*t + 2) + b; }, easeInQuart: function (x, t, b, c, d) { return c*(t/=d)*t*t*t + b; }, easeOutQuart: function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }, easeInOutQuart: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t*t + b; return -c/2 * ((t-=2)*t*t*t - 2) + b; }, easeInQuint: function (x, t, b, c, d) { return c*(t/=d)*t*t*t*t + b; }, easeOutQuint: function (x, t, b, c, d) { return c*((t=t/d-1)*t*t*t*t + 1) + b; }, easeInOutQuint: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; return c/2*((t-=2)*t*t*t*t + 2) + b; }, easeInSine: function (x, t, b, c, d) { return -c * Math.cos(t/d * (Math.PI/2)) + c + b; }, easeOutSine: function (x, t, b, c, d) { return c * Math.sin(t/d * (Math.PI/2)) + b; }, easeInOutSine: function (x, t, b, c, d) { return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; }, easeInExpo: function (x, t, b, c, d) { return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; }, easeOutExpo: function (x, t, b, c, d) { return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }, easeInOutExpo: function (x, t, b, c, d) { if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; }, easeInCirc: function (x, t, b, c, d) { return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; }, easeOutCirc: function (x, t, b, c, d) { return c * Math.sqrt(1 - (t=t/d-1)*t) + b; }, easeInOutCirc: function (x, t, b, c, d) { if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; }, easeInElastic: function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, easeOutElastic: function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; }, easeInOutElastic: function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; }, easeInBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; }, easeOutBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, easeInOutBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; }, easeInBounce: function (x, t, b, c, d) { return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; }, easeOutBounce: function (x, t, b, c, d) { if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } }, easeInOutBounce: function (x, t, b, c, d) { if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; }
};
main();
Developer | Matthias Dittgen |
Username | matths |
Uploaded | August 26, 2022 |
Rating | 3 |
Size | 3,794 Kb |
Views | 34,408 |
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 |
Draw some line art | 3,145 Kb |
1x1 trainer | 2,566 Kb |
Moving lines illusion while scrolling | 3,358 Kb |
Text-shadow outline demo | 2,218 Kb |
Text-shadow fireworks | 2,430 Kb |
SVG Button | 1,927 Kb |
Centering something | 2,199 Kb |
Additive color mix with triangles | 2,760 Kb |
D3 bar chart experiment | 2,838 Kb |
WIP | 2,592 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 |
Mostly Fluid | Mccreath | 3,308 Kb |
P1 | Vivi_Lai | 1,533 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
Board Site | IndianaLuft | 10,542 Kb |
P5.js data visualization | Enginarslan | 2,233 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
Foundation 5 Menu - Accessibility | Xporter | 1,999 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Responsive Advert | James_zedd | 2,354 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 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!