Animation

  • CSS Animations vs Web Animations API

    There is a native API for animation in JavaScript known as the Web Animations API. We’ll call it WAAPI in this post. MDN has good documentation on it, and Dan Wilson has a great article series. In this article, we’ll compare WAAPI and animations done in CSS. A note on browser support WAAPI has a […]

    READ MORE
  • Getting Started With The JavaScript Web Animation API

    Getting Started With The JavaScript Web Animation API Danny Markov May 16th, 2017 Adding animations to web interfaces makes pages and apps feel more responsive and interactive. A side menu that smoothly slides out of view provides a much better user experience then a menu that just disappears when you close it. So far creating […]

    READ MORE
  • 7 Ways to Delight Users with Animation

    “Delight” is a word that we’re conference and regulating some-more mostly to report silken moments in a products. Delight is a sorcery that creates us tumble in adore with a product. It’s a core component to essay for when designing. When it comes to providing pleasure or pleasure in a websites and apps, animations minister […]

    READ MORE
  • Making Animations Wait

    I recently launched a CSS animation course for designers and developers wanting to improve their web animation skills. While building the course, I ran into the issue where content would animate before assets had downloaded. This article covers the approach I put together to fix the problem and ensure all animations played when expected. We’ve […]

    READ MORE
  • Building Performant Expand & Collapse Animations

    TL;DR Use scale transforms when animating clips. You can prevent the children from being stretched and skewed during the animation by counter-scaling them. Previously we’ve posted updates on how to create performant parallax effects and infinite scrollers. In this post we’re going to look over what’s involved if you want performant clip animations. If you […]

    READ MORE
  • 20 Sleek CSS Animations and Effects

    If you are searching for stunning CSS animations and effects that will improve your website, check these out! In this article, we gathered some really cool CSS animations in this useful collection of premium elements that will definitely make your website more appealing and will attract more users. See which one of these high-quality elements fit […]

    READ MORE
  • 10 Free Plugins for Adding Animation Effects to WordPress

    Special effects such as smooth scrolling, page transitions or CSS animations can add some welcome personality to your WordPress website. Use them to call attention to important information, enhance UX and take your designs up a notch. Here are some free WordPress plugins you can use to add a variety of effects to your site: […]

    READ MORE
  • How to Create Super-Simple CSS Animation Effects

    Today, we’re going to introduce to you different transitions and effects that can be achieved using CSS alone. Let’s get going! Resources You Will Need to Complete This Tutorial: Images (You can download free images here or you can use your own). Viga Font (Google Font). You can view the demo here and download the […]

    READ MORE
  • Web Animation Workshops in Spring

    Level up your web animation skills with Val Head and Sarah Drasner in this two-day web animation course. You’ll learn everything you need to know to design and code expert level web animation through hands-on exercises and curated examples. Next Workshop: San Francisco, CA: Feb 20-21 Paris, France: TBA

    READ MORE
  • Create an Animated Favicon Loader with JavaScript

    Favicons are a crucial part of online branding, they give a visual cue to users, and help them distinguish your site from others. Although most favicons are static, it is possible to create animated favicons as well. Let’s Talk About the Importance of Favicons Let’s Talk About the Importance of Favicons Online business veterans know […]

    READ MORE
  • Animation in Design Systems

    Our modern front-end workflow has matured over time to include design systems and component libraries that help us stay organized, improve workflows, and simplify maintenance. These systems, when executed well, ensure proper documentation of the code available and enable our systems to scale with reduced communication conflicts. But while most of these systems take a […]

    READ MORE
  • Best Practices For Animated Progress Indicators

    Sponsored Article Best Practices For Animated Progress Indicators By Nick Babich December 7th, 2016 PerformanceUser ExperienceUser Interaction 8 Comments Visibility of system status is one of the most important principles in user interface design. Users want to feel in control of the system they’re using, which means they want to know and understand their current […]

    READ MORE
  • Web Animation Essentials: CSS Animations and Transitions

    Why CSS Animation? Animation is one of the top trends in web design, and some claim motion design is the future of UI. CSS Animations and Transitions offer you performant, flexible ways to implement animation online. If you know the basics of CSS and JavaScript, my course will turn you into a CSS animation pro, […]

    READ MORE
  • How to Add Animated Event Countdown Timer in WordPresss

    Do we wish to supplement an charcterised countdown timer in WordPress? Whether it is an event, a product launch, or a holiday sale, a timer visualizes coercion and builds expectation among your users. In this article, we will uncover we how to supplement an charcterised eventuality countdown timer in WordPress. First thing we need to […]

    READ MORE
  • Create a Staggered Animation Sequence in Adobe Muse

    Create a Staggered Animation Sequence in Adobe Muse. No Coding Skills Required.    In the video tutorial above I go over how to use the Staggered Animations Widget found at http://museforyoushop.com. With this widget you can create a staggered animation sequence with multiple elements – All with just one graphic style name. FEATURES INCLUDE: Animate […]

    READ MORE
  • Web Animation Workshops

    Level up your web animation skills with Val Head and Sarah Drasner in this two-day web animation course. You’ll learn everything you need to know to design and code expert level web animation through hands-on exercises and curated examples. Next Workshops: Austin, TX: November 14-15, 2016 New York, NY: Dec 8-9 2016

    READ MORE
  • 23 Beautiful Mobile App Animations

    If you’re into app design and you’re looking for new ideas on how to create awesome presentations for your clients, then take a look at these 23 beautiful mobile app animations with GIFs! In order to see these mobile app animations moving, click their links and go to the original posts. There you’ll be able […]

    READ MORE
  • More Resources for Accessible Animations

      Tuesday’s article on animations and vestibular disorders may have left you wondering what else you can do to make your animations accessible. Here are a few resources to start learning more about how animation and accessibility can work together: WCAG recommendations This is a good place to start for the basics of accessible animations. […]

    READ MORE
  • 26 Free Animation Tutorials for Web Developers

    The phrase “animation” extends far beyond the shenanigans of Bugs Bunny and Wile E. Coyote. Animation was originally used for cartoons and video production but over time has found its way onto the web.   Old school web animation relied solely on JavaScript or VBScript. Modern CSS3 allows developers to use a mix of JS/CSS […]

    READ MORE
  • The secrets behind Disney’s latest Oscar-winning animation

    There’s a shot early in Big Hero 6 which might make you wide-eyed with admiration. It shows San Fransokyo: a sprawling city of reflective surfaces and varied light sources – a cityscape created by 
a fusion of animation, production design and visual effects.  “From a visual standpoint, the first thing we want to create is […]

    READ MORE