README

Overview

The SAL Animation extension for TYPO3 allows you to add scroll animations to any content element on your website. It integrates the lightweight sal.js (Scroll Animation Library) into TYPO3, providing an easy-to-use interface for editors to add various animation effects to content elements.

Features

• Add animations to any content element
• Choose from multiple animation types (fade, slide, zoom, flip)
• Configure animation duration, delay, and easing functions
• Option to repeat animations when scrolling back up
• Compatible with TYPO3 v11.5, v12.4, and v13.4

Installation

Using Composer

composer require touch5/t5-sal-animation

From TYPO3 Extension Repository

1. In the TYPO3 backend, go to Extensions module
2. Click on "Get Extensions"
3. Search for "t5_sal_animation"
4. Install the extension

Configuration

After installation, include the static TypoScript template "t5 sal Animation" in your site template.

TypoScript Constants

You can configure whether animations should repeat when scrolling back up:

plugin.t5_sal_animation {
    # Set to true if animations should repeat when scrolling back up
    repeat = false
}

Usage

Adding Animations to Content Elements

1. Edit any content element in the TYPO3 backend
2. Go to the "Animation" tab
3. Select an animation type from the dropdown
4. Configure animation settings:
   • Duration: How long the animation should take (200-2000ms)
   • Delay: How long to wait before starting the animation (5-1000ms)
   • Easing: The transition timing function to use

Available Animation Types

• Fade: Simple fade-in effect
• Slide: Slide from different directions (up, down, left, right)
• Zoom: Zoom in or out
• Flip: Flip from different directions (up, down, left, right)

Easing Functions

The extension provides numerous easing functions to control how the animation progresses over time:

• linear
• ease, ease-in, ease-out, ease-in-out
• Various cubic, circ, expo, quad, quart, quint, sine, and back timing functions

How It Works

The extension adds a new tab to all content elements where editors can configure animation settings. These settings are stored in a FlexForm field and processed during page rendering.

When a page loads, the sal.js library is initialized, which detects elements with animation attributes as they enter the viewport and applies the specified animations.

Technical Details

• Adds a FlexForm field to the tt_content table
• Uses TYPO3's DataProcessing to process the FlexForm values
• Includes sal.js and sal.css in the page output
• Initializes sal.js with the configured settings

Compatibility

• TYPO3 v11.5.0 - v13.4.x
• Modern browsers that support CSS animations

License

This extension is licensed under GPL-2.0-or-later.

Support and Contribution

• Report issues on Bitbucket
• For commercial support, contact Touch5

Author

Michael Scheunemann
Touch5
Email: info@touch5.net