touch5 / t5-sal-animation
Adding the possibility to animate content elements on page scrolling
Requires
- typo3/cms-backend: ^12.4 || ^13.4
Requires (Dev)
- typo3/testing-framework: ^8.0.0
Replaces
- typo3-ter/t5-sal-animation: 1.5.49
- dev-main
- 1.5.49
- 1.5.48
- 1.5.47
- 1.5.46
- 1.5.45
- 1.5.44
- 1.5.43
- 1.5.42
- 1.5.41
- 1.5.40
- 1.5.39
- 1.5.38
- 1.5.37
- 1.5.36
- 1.5.35
- 1.5.34
- 1.5.33
- 1.5.32
- 1.5.31
- 1.5.30
- 1.5.29
- 1.5.28
- 1.5.27
- 1.5.26
- 1.5.25
- 1.5.24
- 1.5.23
- 1.5.22
- 1.5.21
- 1.5.20
- 1.5.18
- 1.5.17
- 1.5.16
- 1.5.15
- 1.5.13
- 1.5.12
- 1.5.11
- 1.5.10
- 1.5.9
- 1.5.8
- 1.5.7
- 1.5.6
- 1.5.5
- 1.5.4
- 1.5.3
- 1.5.2
- 1.5.0
- 1.4.9
- 1.4.8
- 1.4.7
- 1.4.6
- 1.4.5
- 1.4.4
- 1.4.3
- 1.4.2
- 1.4.1
- 1.4.0
- 1.3.9
- 1.3.8
- 1.3.7
- 1.3.6
- 1.3.5
- 1.3.4
- 1.3.3
- 1.3.2
- 1.3.1
- 1.3.0
- 1.2.9
- 1.2.8
- 1.2.7
- 1.2.6
- 1.2.5
- 1.2.4
- 1.2.3
- 1.2.2
- 1.2.1
- 1.2.0
- 1.1.9
- 1.1.8
- 1.1.7
- 1.1.6
- 1.1.5
- 1.1.4
- 1.1.3
- 1.1.2
- 1.1.1
- 1.1.0
- 1.0.10
- 1.0.9
- 1.0.8
- 1.0.7
- 1.0.6
- 1.0.5
- 1.0.4
- 1.0.1
- 1.0.0
This package is auto-updated.
Last update: 2025-07-31 13:09:38 UTC
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
- In the TYPO3 backend, go to Extensions module
- Click on "Get Extensions"
- Search for "t5_sal_animation"
- 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
- Edit any content element in the TYPO3 backend
- Go to the "Animation" tab
- Select an animation type from the dropdown
- 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
Author
Michael Scheunemann
Touch5
Email: info@touch5.net