PHPackages                             pixelcoda/content-gsap-animation - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. pixelcoda/content-gsap-animation

ActiveTypo3-cms-extension

pixelcoda/content-gsap-animation
================================

TYPO3 CMS extension to have some fun and animate your content elements

v3.0.8(11mo ago)0337↓100%[1 PRs](https://github.com/CasianBlanaru/pixelcoda-content-gsap-animation/pulls)GPL-3.0-or-laterPHPPHP >=8.2.0CI passing

Since May 7Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/CasianBlanaru/pixelcoda-content-gsap-animation)[ Packagist](https://packagist.org/packages/pixelcoda/content-gsap-animation)[ Docs](https://www.pixelcoda.de)[ RSS](/packages/pixelcoda-content-gsap-animation/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)Dependencies (29)Versions (13)Used By (0)

Content GSAP Animation
======================

[](#content-gsap-animation)

[![Content GSAP Animation Icon](ext_icon.svg)](ext_icon.svg)

Overview
--------

[](#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

[](#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

[](#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

[](#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

[](#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
--------------------------

[](#animation-system-internals)

This section provides details for developers looking to understand or customize the animation system.

### Centralized Animation Definitions

[](#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

[](#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`, and `easing` settings selected in the content element's animation configuration.

### Frontend Customization via Data Attributes

[](#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 to `true` 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
-----------------

[](#more-informations)

See the [official documentation](https://docs.typo3.org/p/pixelcoda/content-gsap-animation/main/en-us/) for more details how to implement content\_gsap\_animation

###  Health Score

40

—

FairBetter than 88% of packages

Maintenance70

Regular maintenance activity

Popularity13

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity56

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 57.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~2 days

Total

10

Last Release

349d ago

Major Versions

1.0.0 → 3.0.12025-05-07

v1.0.1 → v3.0.62025-05-25

### Community

Maintainers

![](https://www.gravatar.com/avatar/639e33866578c6312793535f5e9f2509229e5872e72974d830209df8ae0be50f?d=identicon)[casianus](/maintainers/casianus)

---

Top Contributors

[![CasianBlanaru](https://avatars.githubusercontent.com/u/23030087?v=4)](https://github.com/CasianBlanaru "CasianBlanaru (4 commits)")[![google-labs-jules[bot]](https://avatars.githubusercontent.com/in/842251?v=4)](https://github.com/google-labs-jules[bot] "google-labs-jules[bot] (3 commits)")

---

Tags

toolsfrontendTYPO3 CMStypo3Animationspixelcoda

###  Code Quality

Static AnalysisPHPStan

Code StylePHP CS Fixer

Type Coverage Yes

### Embed Badge

![Health badge](/badges/pixelcoda-content-gsap-animation/health.svg)

```
[![Health](https://phpackages.com/badges/pixelcoda-content-gsap-animation/health.svg)](https://phpackages.com/packages/pixelcoda-content-gsap-animation)
```

###  Alternatives

[baschte/content-animations

TYPO3 CMS extension to have some fun and animate your content elements

2083.5k](/packages/baschte-content-animations)[bk2k/bootstrap-package

Bootstrap Package delivers a full configured frontend theme for TYPO3, based on the Bootstrap CSS Framework.

357891.4k72](/packages/bk2k-bootstrap-package)[apache-solr-for-typo3/solr

Apache Solr for TYPO3 - Apache Solr for TYPO3 is the enterprise search server you were looking for with special features such as Faceted Search or Synonym Support and incredibly fast response times of results within milliseconds.

1473.0M32](/packages/apache-solr-for-typo3-solr)[in2code/femanager

Modern TYPO3 Frontend User Registration.

49745.4k6](/packages/in2code-femanager)[helhum/typoscript-rendering

Can render a TypoScript path by URL, especially useful for Ajax dispatching

68653.7k12](/packages/helhum-typoscript-rendering)[beechit/fal-securedownload

Secure download of assets. Makes it possible to secure FE use of assets/files by setting permissions to folders/files for fe\_groups.

37569.0k3](/packages/beechit-fal-securedownload)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)