New Animation Properties

Everyone can now play with Microthemer’s new CSS animation properties. Just update via your WordPress dashboard now, or grab it from My Downloads. The animation features are being released in two parts. This article announces part one. Please read on to find our what’s included and what’s still to come.

What Animation Features are Included in Part One?

Animate.CSS

Microthemer includes the animate.css library for quickly applying stock animations. The animation-name field includes a dropdown menu listing various preset animations. Scroll through these with the down arrow on your keyboard to find one you like.

Custom Animation via Code View

You can enter a custom animation name in the animation-name field, you are not restricted to the animate.css options in the menu. However, the custom animation (keyframes) will need to be coded via Microthemer’s code view (Ctrl + Alt + C). Alternatively, the custom animation will need to be present in another stylesheet. Tip: if you apply an animate.css animations, Microthemer will include it at the top of active-styles.css. If you go to View > Generated CSS & JS, you can copy the keyframe code to the code view editor as a starter template for your own custom animation.

All of the Animation Properties

All of the CSS properties for running an existing animation are supported. These include:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

As well as the standard animation properties, Microthemer provides two custom options for event-based animation.

Animation Event

Specifies which event should trigger the animation. Events have been categorised as CSS events or JavaScript events.

• CSS events relate to the :hover and :focus pseudo states. They are triggered when the user hovers their mouse over an element, or a form element gains focus.
• JavaScript events require JavaScript to work. And so if you make use of one, Microthemer will include an extra JavaScript file on your website (animation-events.js).
• Currently supported JavaScript events include:
  • inView: triggered whenever an element scrolls in view
  • inView Once: same as inView, but only fires when the element first comes into view
  • click: triggered whenever an element is clicked.
• Please let us know if you would like to see support for additional JavaScript events like mouseOver, mouseOut, mouseEnter, mouseLeave, and blur etc

Animation Event Target

Specifies which element the animation should apply to after a given event.

With regular CSS events (e.g. :hover, :focus), the event target is always the same as the event trigger. If you hover over a button that has a :hover animation rule, the button itself will receive the animation. However, JavaScript events can be more flexible. It’s possible to e.g. click the button, and then animate a different element. The button click could cause previously hidden content to slide down for instance.

The event target field only displays if the event field has been set to a JavaScript event. Once displaying, you can enter any CSS selector into this field. Note: it’s not currently possible to use the selector wizard to directly populate the event target field. But that can be arranged in future if this feature proves popular.

Device-specific Animation

Using Microthemer’s responsive tabs, you can apply animation selectively for different devices. So if you want animation to run on large screens, but not tablet and phones, you could apply the animation via Microthemer’s default Large Desktop tab, which only applies to screens of 1200 pixels or wider. Or if you wanted to animate elements whenever they come into view on large screens, but only once on mobile, you could set the animation event to inView on the Large Desktop tab, and inView Once on the Tablet & Phone tab.

Instant Rendering of Animation Properties

This will be particularly evident for any of you that experience a noticeable delay between applying a style change and seeing the site preview update. Any changes to the animation properties will instantly trigger the animation, without the need to wait for a network connection. This instant rendering of styles will be the norm for all style properties in the near future. It was piloted for animation because timing is an integral part of animation.

Instant style rendering delayed the release of the animation properties by a month or two. But the happy side effect of this is that serious progress has already been made supporting instant rendering for all CSS properties.

Play Button

The play button allows you to preview the animation without having to reload the page (if no animation event is set), or trigger event-based animations with click, hover, scroll etc.

What Animation Features are Still to Come?

We deemed it sensible to refrain from adding certain animation features until instant style rendering has been implemented. That’s because this will involve a fundamental shift: moving server-side functionality that can take several seconds over to the client-side for instant processing in the browser. To avoid rewriting code, the following features will be added after this client-side shift has been completed:

Support for Multiple Animations

With part 1, Microthemer only provides one row of GUI fields for applying one animation per selector. However, it’s possible to define multiple (comma separated) animations when writing CSS  code by hand. And in the future Microthemer will accommodate this by supporting a configurable number of rows. This feature will also apply to transition, background, text-shadow, and box-shadow.

Custom Animation (Keyframes) via GUI Fields

We’ve mocked up, but are still yet to implement, a system for managing custom keyframes in Microthemer. For now I can tell you that it will take inspiration from the current system for managing folders and selectors. And we intend to support editing the raw keyframes code via a code editor and GUI fields interchangeably.

A Timeline for Previewing Keyframes

This one is aspirational. The JavaScript API for manipulating animations may or may not allow for (accurately) jumping between individual keyframes. But if possible, we will provide an animation timeline slider for tracking forwards and backwards.

General Development Roadmap

Taking into account the new and old feature requests that have accumulated, and that some features must follow others, we’ve come up with the following roadmap. Features will be completed in the order stated below:

1. Transition properties
2. A number of small features including:
   1. Remember ‘recently used’ values e.g. ’20px’ for padding, or ‘Roboto’ for Google fonts.
   2. Include ‘search by name’ field in visual Google fonts browser.
   3. ‘Microthemer for Coders’ video explaining SASS and other advanced features.
   4. Improvements to the ‘Quick Create’ options in targeting mode.
   5. Provide an option for selector highlighter tool to remain on.
   6. Elementor integration similar to Beaver Builder integration.
   7. Close / expand all option for MT folders.
   8. Dock to left option for custom code editor.
   9. Make selector portion of inline code editor editable.
   10. Make access to MT configurable – e.g. allow Editors, or restrict to Super Admins.
3. Instant style rendering and loading of UI components (speed optimisations)
4. Support for multiple animation, transition, background, text-shadow, and box-shadow.
5. Support for keyframes and animation timeline (if possible).
6. Transform properties.

Provide Feedback

Please share any improvements requests and general feedback via the following animation forum thread.