T3 Templates T3 Templates

Animations

From version 1.6.0 of t3templates_base it is possible to animate every content element.

The basis of the animation is the CSS framework Animate.css. Basically, AnimateCSS offers the following setting options:

  1. Effect
  2. Delay
  3. Duration
  4. Run through

Regardless of the setting, the animation only starts after the element is or would become visible in the viewport.

Tab Animation inside editing form of a content element

Type

All animations from Animate.css are supported. These can be selected by a simple selection field:Type.

The selection, as well as all other settings, can be found in the new tab of each content element: Animation.

Delay

The Delay is a delay that can be set if you don't want the animation to start immediately. The unit of time is seconds, which means that the element is not visible for X seconds and then comes into visibility with the animation after X seconds.

If the element is not yet in the viewport, then the delay will only start when it comes into the viewport.

The viewport is the visible part, i.e. the part that is currently being viewed in the browser.

Duration

The Duration controls the playback speed of the animation. The shorter the duration, the faster the animation runs.

Run through

The Run through setting allows an animation to run more than 1x. Each run occurs immediately at the end of the previous run. So there is no time interruption.

You can also set here that the animation should run in an endless loop.