pixelcoda / content-gsap-animation
TYPO3 CMS extension to have some fun and animate your content elements
Installs: 94
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Type:typo3-cms-extension
Requires
- php: >=8.2.0
- typo3/cms-core: ^12.4 || ^13.4
Requires (Dev)
- b13/container: ^3.1.0
- bk2k/bootstrap-package: ^15.0.0
- friendsofphp/php-cs-fixer: ^3.64
- friendsoftypo3/phpstan-typo3: ^0.9.0
- overtrue/phplint: ^9.0
- phpstan/phpstan: ^1.10
- phpstan/phpstan-deprecation-rules: ^1.1
- phpstan/phpstan-phpunit: ^1.3
- phpstan/phpstan-strict-rules: ^1.5
- typo3/cms-backend: ^13.4
- typo3/cms-belog: ^13.4
- typo3/cms-extbase: ^13.4
- typo3/cms-extensionmanager: ^13.4
- typo3/cms-felogin: ^13.4
- typo3/cms-filelist: ^13.4
- typo3/cms-fluid: ^13.4
- typo3/cms-form: ^13.4
- typo3/cms-frontend: ^13.4
- typo3/cms-indexed-search: ^13.4
- typo3/cms-info: ^13.4
- typo3/cms-install: ^13.4
- typo3/cms-introduction: ^4.7
- typo3/cms-lowlevel: ^13.4
- typo3/cms-rte-ckeditor: ^13.4
- typo3/cms-seo: ^13.4
- typo3/cms-tstemplate: ^13.4
- typo3/cms-workspaces: ^13.4
- typo3/testing-framework: ^7.0.2
README
Overview
GSAP (GreenSock Animation Platform) powered animations for your TYPO3 content elements. This extension provides a simple way to add professional, smooth animations to any content element when it enters the viewport. Perfect for creating engaging and interactive websites without writing complex JavaScript.
What does it do
content_gsap_animation
is an extension for the TYPO3 content management system.
It allows you to set frontend animations to your content if its scrolled into the browsers viewport with bidirectional animation support (animations play in reverse when scrolling back up).\
Dependencies
The extension is developed and tested with TYPO3 12.4 until 13.4 LTS. It has an out of the box bootstrap_package v13, v14 and v15
and fluid_styled_content
support.
Configuration
Include the static TypoScript for Content GSAP Animation: bootstrap_package v13, v14 or v15
or Content GSAP Animation: fluid_styled_content
to your template and you can start animating.
Extending
content_gsap_animation
comes with an extended Default
fluid layout which adds the necessary markup to get the animations working. If you want to extend the layout just copy it to your extension, remove or update the content elements layoutRootPaths
and you're good to go.
Animation System Internals
This section provides details for developers looking to understand or customize the animation system.
Centralized Animation Definitions
The core GSAP animation keyframes (the from
and to
states) are now defined in a centralized JavaScript file:
Resources/Public/JavaScript/Core/animation-definitions.js
.
If you need to add new animation types or modify the fundamental properties (like starting/ending positions, opacity, scale, rotation, etc.) of existing animations, this is the primary file to edit. Both the backend preview and the frontend rendering use these definitions.
Enhanced Backend Preview
The animation preview in the TYPO3 backend has been improved to offer a more accurate visual representation of how content elements will animate. Key improvements include:
- A more content-like placeholder for the preview.
- The preview now accurately reflects the configured
duration
,delay
, andeasing
settings selected in the content element's animation configuration.
Frontend Customization via Data Attributes
While the core animation definitions are centralized, the behavior of individual content element animations on the frontend can be further customized using data-gsap-*
attributes directly in your Fluid templates or content element markup. These attributes include:
data-gsap-duration
: Overrides the default duration (in milliseconds).data-gsap-delay
: Sets a delay before the animation starts (in milliseconds).data-gsap-easing
: Specifies a GSAP easing function (e.g.,power2.inOut
,bounce.out
).data-gsap-once
: Set totrue
if the animation should only play once when scrolling down. By default, animations replay when scrolling up and down past the element.
This approach allows for fine-tuning animations on a per-element basis without altering the core definitions.
More Informations
See the official documentation for more details how to implement content_gsap_animation