Author
Antanas Marcelionis
Comments
Start the Conversation
It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
In this article, I want to show off the flexibility and real power of amCharts 4. We’re going to learn how to combine multiple charts that run together with animations that form a movie experience. Even if you’re only interested in creating a different kind of animation that has nothing to do with charts, you can still use this library, since it’s more than making charts. The core of amCharts is made to help with everything SVG: creation, layout, … Read article
A nicely detailed tutorial by Kirupa that gets into how you might provide a UI with persisted options that control whether animations run or not.
The trick is custom properties that control the movement:
body {
--toggle: 0;
--playState: "paused";
}
Which are used within animations and transitions:
.animation {
animation: bobble 2s infinite;
animation-play-state: var(--playState);
}
.transition {
transition: transform calc(var(--toggle) * .15s) ease-in-out;
}
… Read article During the past few months, I’ve been actively teaching myself how to draw and animate SVG shapes. I’ve been using CSS transitions, as well as tools like D3.js, react-motion and GSAP, to create my animations.
One thing about animations in general and the documentation these and other animation tools recommend is using easing functions. I’ve been working with them in some capacity over the years, but to be honest, I would never know which function to choose … Read article
In a recent post, Zach Saucier demonstrated the awesome things that the DOM allows us to do, thanks to the <canvas></canvas>
element. Taking a snapshot of an element and manipulating it to create an exploding animation is pretty slick and a perfect example of how far complex animations have come in the last few years.
ABeamer is a new animation ecosystem that takes advantage of these new concepts. At the core of the ecosystem is the web browser animation … Read article
Some of the most inspiring examples I’ve seen of front-end development have involved some sort of page transitions that look slick like they do in mobile apps. However, even though the imagination for these types of interactions seem to abound, their presence on actual sites that I visit do not. There are a number of ways to accomplish these types of movement!… Read article