TL;DR: Animation Worklet allows you to write imperative animations that run at the device’s native frame rate for that extra buttery jank-free smoothness™, make your animations more resilient against main thread jank and are linkable to scroll instead of time…. Source: https://developers.google.com/web/updates/2018/10/animation-worklet
I’ve always had a great interest in design, illustrations and colour palettes, but having spent the last few years focusing on becoming a better front-end developer, I’ve been left with little time to practice my creative skills…. Source: https://dev.to/agathacco/how-to-create-pure-css-illustrations-and-animate-them—part-1-1j1k
Radial Progress Bars on the web are a great way to display to the user how far through a process they are. There are many ways you can make Radial Progress Bars but I find the easiest is to draw them with SVGs and use Vue (or any other JavaScript libraries) to animate them…. Source: […]
When we build applications, we aim to make them easy on the eye. We want our users to have a smooth experience using it, and to feel our application flowing from one point to another, rather than just jump between screens…. Source: https://scotch.io/tutorials/getting-started-with-component-transitions-in-vue
Ever since i started developing i was fascinated by the vividness of animated applications, they felt alive. And we sure have come a long way, too. There are dozens of tools to choose from today. From tweening libraries to full fledged declarative options, especially in the React world…. Source: https://blog.usejournal.com/why-react-needed-yet-another-animation-library-introducing-react-spring-8212e424c5ce
Animation in React has always been a fuzzy subject. Many people don’t even know how to start looking for something to help them build cool and fun animations for their web projects…. Source: https://medium.com/@joomiguelcunha/amazing-react-animation-with-react-pose-3b67d9eb6e07
I stumbled upon the Animation panel in Chrome’s DevTools the other day and almost jumped out of my seat with pure joy…. Source: https://css-tricks.com/inspecting-animations-in-devtools/
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…. Source: https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/
Today, while I was working, someone sent an interesting little script in a chat group: http://jsbin.com/nijohi/edit?js,output. The original code was written by Martin Kleppe — kudos to him for the short implementation. The code is very simple, but the effect is very interesting…. Source: https://hackernoon.com/how-i-made-a-talking-emoji-using-regular-emojis-and-javascript-fe20e62ba10
My last two projects hurled me into the JAMstack. SPAs, headless content management, static generation… you name it. More importantly, they gave me the opportunity to learn Vue.js. More than “Build a To-Do App” Vue.js, I got to ship real-life, production-ready Vue apps…. Source: https://css-tricks.com/creating-vue-js-transitions-animations/