-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
77 lines (72 loc) · 7.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
<title>rAF</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<main id="content">
<div id="title">
<object data="img/rAFoffset.svg" type="image/svg+xml" style="width:180px; height:180px;"></object>
<h1 class="nudge-down">JavaScript Animation Library</h1>
</div>
<h2>What is it?</h2>
<p>The name <span class="rAF">rAF</span> is a common abbreviation for the core JavaScript animation function: <span>requestAnimationFrame()</span>. 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.</p>
<p> 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.</p>
<h2>Getting started</h2>
<p>If you want to skip the formalities and jump right in, the best place to start are the <a href="apps/">3 Apps</a> that test & demonstrate the library and generate starting-point JavaScript code. They are also available on <a href="https://sidewayss.github.io/rAF/apps/">GitHub Pages</a>, in a less stable but more up-to-date state.</p>
<p>There are also animation examples in these collections on CodePen:</p>
<p><i>...coming soon along with v1.0</i></p>
<p><a href="docs/raf-by-class.html">Properties and Methods by Class</a> catalogs classes and constants you might want to use. The current state of documentation is skeletal. Hopefully the examples, apps, and app instructions will help to fill things in.</p>
<p>The GitHub repository is here: <a href="https://github.com/sidewayss/rAF">github.com/sidewayss/rAF</a></p>
<h2>Setup</h2>
<p><span class="rAF">rAF</span> is modular. There are currently no packages or minified file. Should be coming your way soon after 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, Easy, Easies, AFrame, rAFInit}<br>from "https://sidewayss.com/raf/src/raf.js";</span></p>
<p>You must execute this method prior to using any other <span class="rAF">rAF</span> features:</p>
<p><span>rAFInit();</span></p>
<p>It initializes constants that are used internally, many of which you will use too. Among those are the <span>E</span>, <span>Ez</span>, <span>F</span>, and <span>P</span> objects listed in the <span>import</span> example above.</p>
<h2>Features</h2>
<p><span class="rAF">rAF</span> provides a flexible, structured, and compact way to create and execute CSS, SVG, and HTML animations of two types:</p>
<ul>
<li>Gradual value changes controlled by timing patterns</li>
<li>Cue-based animations, where timing cues trigger animation events that can span elements and properties</li>
</ul>
<p>It also provides an alternate paradigm for setting properties/attributes where the property sets the value on the element, not the other way around. There are advantages.</p>
<h3>Features CSS doesn't have:</h3>
<ul>
<li>Multiple timing patterns for a single property, within and across functions</li>
<li>Eased steps, for timing and values separately</li>
<li>Max and min limits by argument by element</li>
<li>Animate the same property differently across elements in a single animation</li>
<li><a href="https://colorjs.io">Color.js</a> integration</li>
<li>For two-legged easings:</li>
<ul>
<li class="sub">Not just `inOut`, there are `outIn`, `inIn`, and `outOut` settings</li>
<li class="sub">Adjustable mid point for the value</li>
<li class="sub">Adjustable split point for time</li>
<li class="sub">Adjustable gap in time between the two legs</li>
</ul>
<li><i>and more...</i></li>
</ul>
<h3>Goals, Assumptions, and Approach:</h3>
<ul>
<li>Normalize all things similar across CSS and SVG</li>
<li>Allow for the animation of every property/attribute and function in full detail</li>
<li>Minimize the amount of code that runs during each animation frame</li>
<li>Allow for different coding styles with lenient syntax and shorthand aliases</li>
<li>Make it fully object-oriented within the confines of JavaScript</li>
<li>Assume a "modern browser" that supports ES7*</li>
<li>Provide callbacks for flexibility and meeting as-yet-unknown requirements</li>
<li>Create a way to test user GPU power and develop methods for handling low-end vs high-end GPUs</li>
<li class="asterisk">The biggest browser compatibility issue for rAF is <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties">private properties</a>, which have <a href="https://caniuse.com/?search=private%20class">limited support</a> in pre-2021 browser versions. I have considered converting all the <span>#</span> to <span>_</span>, but the more time that passes, the less it matters. Maybe it's something for a minified/transpiled version.</li>
</ul>
<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>, my fork is <a href="https://github.com/sidewayss/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 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 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 online than all but the most basic web animations. Why? More tools for creation and more reliable results. The one advantage that web animations have is interactivity, but how many interactive animations have you seen? <i>see <a href="https://sidewayss.com">my homepage</a>'s interactive greeting</i></p>
<p>I built this library for personal satisfaction / education, a goofy homepage, and to demonstrate that I can still design and build solid software. I figure there might be a few other people out there who want to do more extreme animations and could find it useful. Maybe some will even want to contribute.</p>
</main>
</body>
</html>