Content Animations

Content Animations 

Classification

content_animations

Version

2.5

Language

en

Description

This extension allows you to set nice animations to your content elements if they are scrolled into the browsers viewport.

Keywords

animations,scroll,effects,content,fx,aos,animate,fluid,styled,higher,eduction,package

Copyright

2024

Author

Sebastian Richter

Email

info@baschte.de

License

This document is published under the Open Publication License available from http://www.opencontent.org/openpub/

Rendered

Tue, 11 Nov 2025 11:41:42 +0000

The content of this document is related to TYPO3, a GNU/GPL CMS/Framework available from www.typo3.org.

Table of Contents

Introduction 

What does it do? 

This extension allows you to set frontend animations to your content elements if they're scrolled into the browsers viewport.

Screenshot 

Preview of animation in TYPO3 Backend

The animations TYPO3 backend preview just after installation

Installation 

The extension needs to be installed as any extension of TYPO3 CMS.

If you use composer you can simply get this extension via composer req baschte/content-animations.

Setup 

If installed and activated just include the static typoscript to your site template and you're good to go.

Editor Corner 

As editor you can set an animation to your content elements if you go to the Animation tab.

The screenshot below shows you how to set a animation. You have the possibility to set the animation speed and the delay of that content element as well individually.

Screenshot 

Preview of animation in TYPO3 Backend

The animations TYPO3 backend preview just after installation

Developer Corner 

Content Animations comes with an out of the box bootstrap_package v15, v14 and v13 and fluid_styled_content support. Just include the static typoscript of your used extension (for example Bootstrap Package) into the site template and you're good to go. This extension extends the Default Fluid Layout for the necessary data-attributes to get the animation stuff working in the frontend.

Constants 

The following global typoscript constants are available:

Parameter Data type Description Default
plugin.tx_content_animations.aos-easing option set the global easing of all animations ease
plugin.tx_content_animations.aos-once boolean should the animation only happen once true
plugin.tx_content_animations.aos-mirror boolean should the element animate out while scrolling past them false

Example 

Here is an example of what the rendered HTML should look like

<div id="c21563" class="frame frame-default frame-type-textpic ..." data-aos="fade-up" data-aos-duration="800" data-aos-delay="0" data-aos-once="true" data-aos-easing="ease" data-aos-mirror="false">
    ...
</div>
Copied!

Extending 

If you use your own Layouts and want to support content_animations please make sure that the Content Animations: Basic Configuration is included in your TS-Template and that the snippet is included in the outer html tag of your content elements. This will add all the necessary attributes and settings to the html tag.

{f:if(condition: animationSettings, then: '{animationSettings -> f:format.raw()}')}
Copied!

LayoutRootPath 

Content Animations extends the layoutRootPaths with the key 100 in all typoscript includes except Content Animations: Basic Configuration.

If you don't want that please overwrite or delete it via lib.contentElement.layoutRootPaths.100 > in your template

Javascript 

Content Animations uses the AOS library basis by Michał Sajnóg and now the updated fork by Benjamin Ammann which doesn't need jQuery or any other dependency.

It's included inline at the page bottom via page.jsFooterInline.

Administrator Corner 

Content Animations comes with some features which can be deactivated via the extension settings.

Settings 

Feature Data type Description Default |
hideFooterAnimationLabel boolean Hide the Animation Footer Label false |
disableAddAnimationsTab boolean Disable the automatic append of the Animations tab to all CTypes false |
extendedAnimationSettings boolean Activate extended animation settings (for advanced users only) false |

Animation Tab 

You can disable the automatic appending of the Animation Tab to all CTypes. The Tab is added by default.

Animation Tab

Advanced Animation Settings 

You can enable advanced animation settings for all CTypes (offset, anchorPlacement etc...). These settings are disabled by default.

Advanced Animation Settings

ChangeLog 

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

2.5.5 - 2025-11-11 

FEATURE 

  • [FEATURE] add content blocks support

2.5.4 - 2025-03-24 

BUGFIX 

  • [BUGFIX] full PHP 8.4 support
  • [BUGFIX] remove unnecessary animation attributes for empty values

2.5.3 - 2024-12-23 

BUGFIX 

  • [BUGFIX] version constraints for TYPO3

2.5.2 - 2024-11-25 

Tasks 

  • [TASK] remove unnecessary inline css

2.5.1 - 2024-11-18 

Features 

  • [FEATURE] full TYPO3 13 support

2.4.3 - 2024-05-18 

Bugfixes 

  • [BUGFIX] fixing typing issues
  • [BUGFIX] show fallback language value
  • [BUGFIX] show footer label within container elements
  • [BUGFIX] optimizing animation field preview

2.4.2 - 2023-07-25 

Bugfixes 

  • [BUGFIX] js include in AnimationPreviewField

2.4.1 - 2023-07-11 

Features 

  • [TASK] Add official support for the Bootstrap Package v14

2.4.0 - 2023-04-26 

Features 

  • [TASK] Add TYPO3 v12 LTS support and remove support below TYPO3 v10 - (Special thanks to Benni Mack)
  • [TASK] switching outdated version of aos to forked and maintained simple-aos library

Breakings 

  • [!!!][TASK] removed support for TYPO3 v8 and v9
  • [!!!][TASK] removed support for Higher Education Package v10

2.3.2 - 2022-01-13 

Bugfixes 

  • [BUGFIX] PHP 8.1 compatibility

2.3.1 - 2021-10-14 

Bugfixes 

  • [BUGFIX] add missing ext key to composer.json

2.3.0 - 2021-10-13 

Features 

  • [FEATURE] TYPO3 11 LTS support

Bugfixes 

  • [BUGFIX] fixing inline js include

2.2.0 - 2021-09-12 

Features 

  • [FEATURE] adding support for TYPO3 11.*
  • [FEATURE] adding support for Bootstrap Package v12.0.*

2.1.0 - 2020-04-13 

Features 

  • [FEATURE] adding support for TYPO3 10.4.*

2.0.1 - 2020-02-21 

Features 

  • [FEATURE] add typoscript include for basic configuration without fluid layout overwrite for custom packages

2.0.0 - 2020-02-20 

Features 

  • [!!!][FEATURE] introducing AnimationSettingsProcessor to get and render given animation settings into the html
  • [FEATURE] updating to latest AOS library
  • [FEATURE] possibility to enable advanced animation settings
  • [FEATURE] global switch to disable the animation tab for all CTypes

1.2.1 - 2019-07-14 

Features 

  • [FEATURE] add support for version 11 of bootstrap_package

1.2.0 - 2019-04-11 

Features 

  • [FEATURE] adding a new and simple fade animation
  • [!!!][FEATURE] using the same library in the backend for the animation preview as in the frontend to animate the elements
  • [FEATURE] render the animation value as a label to the preview of any content element => can be deactivated via the extension setting
  • [FEATURE] option to deactivate the behaviour where the animation tab is appending to all CTypes => can be also deactivated via the extension setting

Bugfixes 

  • [BUGFIX] fixing the support for the higher_eductaion_package

1.1.0 - 2019-03-21 

Tasks 

  • [!!!][TASK] restructured internal paths of typoscript and fluid layouts

Features 

  • [!!!][FEATURE] adding build in support for bootstrap_package, fluid_styled_content and higher_eductaion_package

1.0.5 - 2019-03-20 

Bugfixes 

  • [BUGFIX] fixing problem where animations in backend are not shown as in the frontend

1.0.4 - 2019-03-18 

Bugfixes 

  • [BUGFIX] fixing support for TYPO3 8 LTS

1.0.3 - 2019-03-18 

Features 

  • [FEATURE] remove the ext:form dependency from AnimationPreview - thx to @jmverges

1.0.2 - 2019-03-13 

Features 

  • [FEATURE] adding new animation preview in TYPO3 backend for better orientation.

1.0.1 - 2019-03-04 

Bugfixes 

  • [BUGFIX] fixing default css classes in Default layout for fluid_styled_content.

1.0.0 - 2019-03-04 

  • first release of content_animations.