The name rAF is a common abbreviation for the core JavaScript animation function: requestAnimationFrame(). It is a highly flexible animation library for HTMLElements, SVGElements, and CSSStyleRules. It includes 99% of CSS animation functionality, but also extends that functionality greatly.
It is a solo open source project about to be released in its first public version 1.0. Hopefully others will contribute in the future.
If you want to skip the formalities and jump right in, the best place to start is the Three Apps (web pages) that test/demonstrate the app and generate starting-point JavaScript code for the configured animation. I am hosting them on my personal site. GitHub Pages will be up when I learn how to fully disable Jekyll...
There are also animation examples in these collections on CodePen:
...coming soon along with v1.0
<h2>Setup</h2>
<p><span class="rAF">rAF</span> is modular. There are currently no packages or minified file. Coming immediately post v1.0. For most users <span>raf.js</span> provides all the exports you need. Here is a typical import statement:</p>
<p><span>import {E, Ez, F, P, PFactory, Easy, Easies, AFrame}<br>from "https://sidewayss.com/raf/src/raf.js";</span></p>
<p>To initializes constants, including the <span>F</span> and <span>P</span> objects containing all the built-in <span>Func</span> and <span>Prop</span> instances, you must run this line of code prior to using any other <span class="rAF">rAF</span> features:</p>
<p><span>PFactory.init();</span></p>
<h2>Features</h2>
<p></p>
<h2>Structure</h2>
<p>The outermost class is <span>AFrame</span>. It has the <span>play()</span> method and contains all the animations in its <span>targets</span> property.</p>
<p>Targets are instances of <span>Easies</span> or <span>ACues</span>.</p>
<p><span>class Easies</span> contains a <span>Set</span> of <span>Easy</span> instances. <span>Easies</span> emulates a <span>Set</span> of <span>Easy</span>s for the iterator, <span>has()</span>, <span>add()</span>, <span>delete()</span>, <span>clear()</span>, <span>values()</span>, and <span>size</span>. Each <span>Easy</span> has a linked list of legs, each with its own timing function.</p>
<p><span>Easies.prototype.targets</span> is an array of <span>MEaser</span> instances. <span>M</span> is for "multi". Each <span>MEaser</span> has an <span>easies</span> property filled with references to <span>Easy</span>s within this <span>Easies.prototype.easies</span>.</p>
<p><span>Easy.prototype.targets</span> is a <span>Set</span> of <span>Easer</span>s.</p>
<p><span>class Easer</span> runs the calculations and applies the values during animation. <span>MEaser</span> is the multi-ease sub-class.</p>
<p><span>Easer</span> inherits from <span>EBase</span>.</p>
<p><span>MEaser</span> inherits from <span>MEBase</span>, which inherits from <span>EBase</span>.</p>
<p>The <span>Prop</span>, <span>Bute</span>, <span>HtmlBute</span>, <span>PrAtt</span>, and <span>Func</span> classes wrap CSS properties, SVG/HTML attributes, and CSS/SVG functions.</p>
<p><span>Ez</span> is a factotem object filled with useful methods and a few properties. The <span>globals.js</span> module has some other useful constant objects, like <span>E</span>.</p>
<h2>Why bother?</h2>
<p>I originally got interested in web animations through animating SVG sheet music scores created and exported to SVG by <a href="https://musescore.org">MuseScore</a> (github repo <a href="https://github.com/musescore/MuseScore">here</a>). I then decided to create a heavily animated personal web site. In that process I consolidated a bunch of common animation code and created the initial version of <span class="rAF">rAF</span>.</p>
<p>Soon thereafter I stepped away from programming for the next five years. Upon my return in April, 2023 I started to update my personal site. I soon realized that CSS had evolved notably and that my core design for <span class="rAF">rAF</span> was outdated and not as clean or complete as I had thought. I was considering seeking gainful employment in programming again, and updating <span class="rAF">rAF</span> seemed like a good way to freshen up my skills and produce a result that would fill in for the gap in my CV.</p>
<p>I don't expect to see a lot of interest in <span class="rAF">rAF</span>. It's a now obscure niche, and there have been many animation libraries produced since Velocity.js took the web by storm well over a decade ago. I was mostly animating SVG, and Velocity doesn't do SVG gradients, among other things, so I built my own stuff.</p>
<p>These days animated video is much more common than web animations, and I can understand why: way more tools for creation and more reliable results. The one advantage that web animations have is their interactivity, but how many interactive animations have you seen beyond the welcome animation on my personal site?</p>
<p>Running a digital video stream through a codec is a lot more reliable than running a JavaScript animation. Browser differences can mostly be ignored. The code has been supremely optimized. Loss of resolution due to bandwidth is friendlier than a stuttering or otherwise malfunctioning animation, and users are more familiar with it. They understand what's to blame.</p>
<p>This is a project built for personal satisfaction & education, a goofy personal website, and to demonstrate that I can still write solid code. I figure there might be a few other people out there who want to do more extreme animations, and maybe they'll find it useful. Maybe I'll even get a few people interested in contributing. Maybe not.</p>
</div>