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?
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:
As well as the standard animation properties, Microthemer provides two custom options for event-based animation.
- 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.
- 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.
Animation Event Target
Specifies which element the animation should apply to after a given event.
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.
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
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:
- Transition properties
- A number of small features including:
- Remember ‘recently used’ values e.g. ’20px’ for padding, or ‘Roboto’ for Google fonts.
- Include ‘search by name’ field in visual Google fonts browser.
- ‘Microthemer for Coders’ video explaining SASS and other advanced features.
- Improvements to the ‘Quick Create’ options in targeting mode.
- Provide an option for selector highlighter tool to remain on.
- Elementor integration similar to Beaver Builder integration.
- Close / expand all option for MT folders.
- Dock to left option for custom code editor.
- Make selector portion of inline code editor editable.
- Make access to MT configurable – e.g. allow Editors, or restrict to Super Admins.
- Instant style rendering and loading of UI components (speed optimisations)
- Support for multiple animation, transition, background, text-shadow, and box-shadow.
- Support for keyframes and animation timeline (if possible).
- Transform properties.
Please share any improvements requests and general feedback via the following animation forum thread.