using requestAnimationFrame instead of setInterval to create the animation loop. Using setInterval can be unreliable, and requestAnimationFrame provides better performance, particularly on mobile devices.
using the animate() method to animate the cubes. While this method is easy to use, it may not provide the smoothest animation performance. A better approach is to use requestAnimationFrame()
requestAnimationFrame > setInterval
https://garden.bradwoods.io/notes/javascript/web-api/intersection-observer https://developer.mozilla.org/en-US/docs/Web/API/Element/animate https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats
https://css-tricks.com/css-animations-vs-web-animations-api/
I had hoped that the performance optimizations of this API would mean we could escape the use of will-change and the totally hacky translateZ — and eventually, it might. However, at least in the current browser implementations, these properties can still be helpful and necessary in dealing with jank issues.
However, at least if you have a delay on your animation, you don’t need to worry about using will-change -> it gets addressed in the waapi
element.style.animationPlayState = "paused" We already have a variety of events triggered by CSS that we can utilise in our JavaScript code : animationstart, animationend, animationiteration and transitionend
Using requestAnimationFrame() can be more efficient than CSS animations in some cases because it allows for more precise control over the animation, and can be combined with other JavaScript features to create complex animations. However, it's important to be mindful of the amount of work being done on the main thread when using requestAnimationFrame(), as too much work can still cause jank. Optimizing animations by minimizing the amount of work being done on the main thread is key to creating smooth animations.
element clip-path CSS property can use the SVG Path attributes for animated transitions. The same number of vertices in the path cannot change but only manipulated when animating. transition-property transition: [property] [duration] [timing-function] [delay]; transition-property The transition-property defines the CSS property where the transition over the element will be applied. We can also apply a transition to a single property (e.g., background-color or transform) or to all the properties in the rule-set. div {transition-property: all; transition-property: transform; } https://blog.logrocket.com/understanding-animation-transition-timing-functions-css/#:~:text=There%20are%20two%20ways%20to,changes%20over%20a%20specific%20duration. There are two ways to animate web elements in CSS: the animation and transition properties. The animation property allows you to change the properties of an element over a specific duration, and needs @keyframes. The transition property defines how an element changes over a specific duration. animation:
https://tympanus.net/codrops/2013/05/22/examples-of-pseudo-elements-animations-and-transitions/ Only supported by modern browsers like Firefox, IE10 and recently Chrome (see this updated support table for more info) Does not work in mobile browsers yet Pseudo-elements cannot be identified by ID Pseudo-elements don’t appear in the DOM. Pseudo-elements can’t be animated with JavaScript
https://cssanimation.rocks/pseudo-elements/ double colon :: to denote pseudo-elements (as opposed to pseudo-classes like :hover, :first-child). When adding pseudo-elements, needs 'content' property before they can be made visible on the page. button::after { content: ''; position: absolute; top: -50%; right: -50%; bottom: -50%; left: -50%; background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0)); transform: rotateZ(60deg) translate(-5em, 7.5em); } button:hover::after, button:focus::after {animation: sheen 1s forwards;} @keyframes sheen {100% {transform: rotateZ(60deg) translate(1em, -9em);}} transform:translate(-50%, -50%); // center the element transform:translateX(-50%); // center the element horizontally A little bit of both. The simplest way that I like use is by creating a seperate function that you want to run asynchronously, then linking it to a callback that is scheduled to run by the FreeRTOS scheduler:
https://savjee.be/blog/multitasking-esp32-arduino-freertos/ As long as you don't create too many long-running tasks and be mindful of which core is running what, it's been incredibly reliable in my experience. My biggest use case for this is keeping an active display, like those 64x64 RGB LED Panels, fed with pixel data from a display buffer using one core fully pegged to the task, then using the second core for wifi and display buffer updates. In Arduino land, since loop runs on a specific core, you can basically put your 'constantly running code' in the loop, and schedule the tasks to run on the other core in setup().
https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/ Reflowing and repainting the entire page at each step of the animation (even incrementally) sounds really slow, especially for a large and complex layout. It would be much more effective just to paint two separate images — one for the A element and one for the entire page without the A element — and then simply offset those images relative to each other. In other words, composing the images of cached elements would be faster. We stumble upon implicit composing, One or more non-composited elements that should appear above a composited one in the stacking order are promoted to composite layers, much more often than you might think. A browser will promote an element to a compositing layer for many reasons, just a few of which are: 3D transforms: translate3d, translateZ and so on;
elements; animation of transform and opacity via Element.animate(); animation of transform and opacity via СSS transitions and animations; position: fixed; will-change; filter; mobile devices don’t have as much memory as desktops. For example, a not-so-old-yet iPhone 6 ships with 1 GB of shared memory (i.e. memory used for both RAM and VRAM). Considering that at least one third of this memory is used by the operating system and background processes, another third by the browser and the current page (a best-case scenario for a highly optimized page without a ton of frameworks), we’re left with about 200 to 300 MB for GPU effects, at most. And the iPhone 6 is a pretty expensive high-end device; more affordable phones contain much less memory on board.
Misc https://www.joshwcomeau.com/gradient-generator/ https://www.colourlovers.com/api/palettes/top?jsonCallback=? https://www.vantajs.com/?effect=dots https://maxhodak.com/writings/index.html https://blog.logrocket.com/css-before-after-custom-animations-transitions/#before-pseudo-element https://tympanus.net/codrops/2013/05/22/examples-of-pseudo-elements-animations-and-transitions/ https://cssanimation.rocks/pseudo-elements/ ## Techniques background image behind a blobby svg clip path html-> image or div w/ text to crop w mask css-> animate background-x-position css-> background-image, -attachment: fixed, -size: cover, -position: center css-> -webikit-mask-image:(url) & -repeat: no-repeate; mask-type, -size, -position mask-image: linear-gradient(to bottom, transaprent 10%, black) -> dampends image animate inset box-shadow https://codepen.io/lonekorean/pen/KKVdQPX Useful Articles https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax_percent https://css-tricks.com/almanac/properties/m/mask-image/ https://css-tricks.com/almanac/properties/s/shape-outside/ https://css-tricks.com/almanac/properties/c/clip-path/ https://css-tricks.com/animating-with-clip-path/ https://css-irl.info/experimental-layouts/ https://cssanimation.rocks/pseudo-elements/ https://www.joshwcomeau.com/css/designing-shadows/ https://www.joshwcomeau.com/css/make-beautiful-gradients/ https://garden.bradwoods.io/notes/css/3d https://github.com/codrops/OnScrollPathAnimations/ https://github.com/codrops/CaptionHoverEffects https://github.com/codrops/ShapeHoverEffectSVG https://blog.logrocket.com/css-before-after-custom-animations-transitions/#before-pseudo-element https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations Resources https://www.toptal.com/designers/htmlarrows/arrows/ https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css https://bennettfeely.com/clippy/ https://animista.net/play/text/focus-in https://svg-path-visualizer.netlify.app/ https://yqnn.github.io/svg-path-editor/ https://cssbud.com/css-generator/css-glow-generator/#search-header https://getwaves.io/ https://www.blobmaker.app/ http://csshero.org/mesher/ https://shadows.brumm.af/ https://ui.glass/generator/# http://css3generator.com/ http://www.cssfiltergenerator.com/ https://maxbittker.github.io/broider/ https://www.svgrepo.com/ https://tympanus.net/codrops/2021/06/01/trigonometry-in-css-and-javascript-introduction-to-trigonometry/ https://tympanus.net/codrops/2021/06/02/trigonometry-in-css-and-javascript-getting-creative-with-trigonometric-functions/ https://tympanus.net/codrops/2021/06/04/trigonometry-in-css-and-javascript-beyond-triangles/ https://tympanus.net/codrops/2021/12/07/coloring-with-code-a-programmatic-approach-to-design/ https://css-tricks.com/animating-with-clip-path/ clip-path can use, clip-paths(% relative), or a url to a SVG