Animations

RocketCake supports adding animations to any element on a website - by using CSS Animations. This is possible through a very simple interface which still makes it possible to set complex and modern looking animations: You can right-click any element, select "Animations..." and add an animation.

The animation can be set to be started when the element scrolls into the view, when the user clicks or hovers an element, it can be simply shown always and more.

Animation Overview

Animation settings can be named and shared between elements. If you adjust the animation, it will be automatically adjusted on all elements using this animation

There are a couple of built-in animations like fading, bouncing, rotating, blurring, etc which can be easily adjusted.

You can set custom animations with your own keyframes: For that, add a new "custom animation" and set the keyframes as CSS manually.

Animations automatically honor the 'prefers-reduced-motion' setting of users browsers, for example not to trigger discomfort for users with vestibular motion disorders.

It is possible to set the "IterationCount" of animations not only to a number but also to the text "infinite" for infinite animations.

Automatic element hiding

Animations which only trigger when the element comes into view automatically keep track of the element state so you don't have to manually fiddle around with any CSS or element states.

For example, if you set an animation to blend an element in when it comes into view, the element must be set to invisible initially, of course in order to look good. You don't have to do this, this is automatically done by the editor, but only if the element animation has "Fillmode" set to "forwards".

SEO friendly Animations

It's not certain if animated and especially initially invisible elements have a negative impact on SEO. But in that case, if the animation starts with an invisible opacity, RocketCake sets the initial opacity to a value slightly higher than 0, so that the text can still barely be read. In the hope that even non modern crawlers still work with your website nicely.

Additionally animations are implemented so that they are highly backwards compatible and even work with very old browsers - if possible. For example most animations will even work with the ancient Internet Explorer (!).