Relating to animations on the net, builders must measure the animation’s necessities with the suitable expertise — CSS or JavaScript. Many animations are manageable with CSS however JavaScript will at all times present extra management. With doc.getAnimations
, nonetheless, you should utilize JavaScript to handle CSS animations!
The doc.getAnimations
methodology returns an array of CSSAnimation
objects. CSSAnimation
supplies a bunch of details about the animation: playState
, timeline
, impact
, and occasions like onfinish
. You may then modify these objects to regulate animations:
// Make all CSS animations on the web page twice as quick doc.getAnimations().forEach((animation) => { animation.playbackRate *= 2; }); // Cease all CSS animations on the web page doc.getAnimations().forEach((animation) => { animation.cancel(); });
How may adjusting CSS animations on the fly be helpful to builders? Perhaps use the Battery API to cease all animations when the machine battery is low. Presumably to cease animations when the consumer has scrolled previous the animation itself.
I really like the way in which you should utilize JavaScript to change CSS animations. Builders used to want to decide on between CSS and JavaScript — now we’ve the instruments to make them work collectively!
LightFace: Fb Lightbox for MooTools
One of many net parts I’ve at all times cherished has been Fb’s modal dialog. This “lightbox” is not like others: no darkish overlay, no obnoxious animating to measurement, and it would not attempt to do “an excessive amount of.” With Fb’s dialog in thoughts, I’ve created LightFace: a Fb lightbox…
Digital camera and Video Management with HTML5
Shopper-side APIs on cell and desktop gadgets are rapidly offering the identical APIs. In fact our cell gadgets received entry to a few of these APIs first, however these APIs are slowly making their technique to the desktop. A kind of APIs is the getUserMedia API…
Create a Dynamic Desk of Contents Utilizing MooTools 1.2
You’ve got most likely observed that I draw back from writing actually lengthy articles. Listed below are just a few the reason why: Most website guests are coming from Google and simply need a straight to the purpose, bail-me-out ASAP reply to a query. I’ve observed that I’ve a tough time…
Hyperlink Nudging with CSS3 Animations
One of many extra standard and easy results I’ve featured on this weblog over the previous yr has been linking nudging. I’ve created this impact with three flavors of JavaScript: MooTools, jQuery, and even the Dojo Toolkit. Fortunately CSS3 (virtually) permits us to ditch…