Category Archives: Tools and methods

Reproducing A Clever Animation Product, Part 16

Today I wanted to further rearrange the transition definitions so they more closely matched those used by the Greensock animation product I’ve been emulating. A screenshot from their demo video is shown here: The next step is to move the … Continue reading →

Posted in Tools and methods | Tagged , , | Leave a comment

Reproducing A Clever Animation Product, Part 15

After completing yesterday’s post I started digging into combining multiple CSS transforms for individual elements. I was inspired to do this because I realized that if multiple transforms were applied to an element then the string returned by referencing element.style.transform … Continue reading →

Posted in Tools and methods | Tagged , , , | Leave a comment

Reproducing A Clever Animation Product, Part 14

Today I shortened up the way transforms are specified. Rather than specify the type of transform and its explicit starting and ending values I combined the information using object literals. Here are the new specifications, each listed after the old … Continue reading →

Posted in Tools and methods | Tagged , , , | Leave a comment

Reproducing A Clever Animation Product, Part 13

Today I made sure the left and right arrows could be used to advance the animation forwards or backwards by the current increment. I also highlighted the increment on the buttons used to set it. I also learned that the … Continue reading →

Posted in Tools and methods | Tagged , , , , | Leave a comment

Reproducing A Clever Animation Product, Part 12

If we have the full animation state specified for every animation step then one of the easiest things we can do is to change the speed of the animation by changing the increment, which is shown below. Clicking on any … Continue reading →

Posted in Tools and methods | Tagged , , | Leave a comment

Reproducing A Clever Animation Product, Part 11

Here is the updated version that uses the information in the bcTransformList to build the cleanest possible stream of transformation events in the bcActivitiesList. The need for a separate structure to hold the initial and final states of the animation … Continue reading →

Posted in Tools and methods | Tagged , , | Leave a comment

Reproducing A Clever Animation Product, Part 10

Continuing on from yesterday, once we get the transforms into a nice compact list in time order by type and by element we can go ahead and define the tweens for each type of transformation stream. However, I noticed that … Continue reading →

Posted in Tools and methods | Tagged , , | Leave a comment

Reproducing A Clever Animation Product, Part 9

Yesterday’s attempt wasn’t too bad; I needed to fix the declaration and use of the object that holds the transform information (yesterday’s form only works if you initialize the internal member values with literals) and I needed to tweak a … Continue reading →

Posted in Tools and methods | Tagged , , | Leave a comment

Reproducing A Clever Animation Product, Part 8

I found it necessary to create a list of elements that will be transformed during the animation. Within each list of elements there will be a sublist of transform types. Within each list of transform types there will be a … Continue reading →

Posted in Tools and methods | Tagged , , | Leave a comment

Reproducing A Clever Animation Product, Part 7

Drawing things out graphically is always good to clarify thoughts, so I’ve done that with the problem at hand. Here I show the array of animation steps in a shorthand form. The red areas show steps where multiple assignments are … Continue reading →

Posted in Tools and methods | Tagged , , | Leave a comment