Categories
JavaScript Web development

Bishops Swap Game

The Bishops Swap Game is a classic puzzle from the 7th Guest. Here is the start position of it: The end position is the same, except that the black and white bishops have swapped: the black bishops are on the top row, the white bishops are on the bottom row. Move the bishops to get […]

Categories
Animation JavaScript Web development

Move eased dot along a curve

In the Bezier curve, perceived as a graph, the horizontal axis shows the time passed, on a scale of zero (at the start) to one (at the end point). The vertical axis shows the progress in distance covered, also from zero (no progress) to one (loop completed), although progress can dive below zero or exceed […]

Categories
Animation JavaScript

Move a dot along a path

Create a dot moving along a path using SVG and JavaScript

Categories
Animation CSS JavaScript Web development

Animation on page load

To bring a webpage to life, you may want to start an animation when the content of the page appears. For example, a text or an image fades in, or moves to certain position, or grows to a certain size, etc.
Here is a basic method to kick off a page load transition