Developer Corner¶
Content Animations comes with an out of the box bootstrap_package v12, v11, v10, v9 and v8, fluid_styled_content and higher_education_package v10 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>
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()}')}
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 by Michał Sajnóg which doesn't need jQuery or any other dependency.
It's included inline at the page bottom via page.jsFooterInline
.
Styling¶
The css animations are included inline via page.cssInline
.