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. [Utility & Helpers](/categories/utility) 4. / 5. pixelcoda/content-gsap-animation ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility) pixelcoda/content-gsap-animation ================================ TYPO3 CMS extension for GSAP ScrollTrigger animations on content elements with editor presets, backend preview, Bootstrap Package support and headless-ready animation data. v3.5.17(2mo ago)1411GPL-3.0-or-laterPHPPHP >=8.2.0CI passing Since May 7Pushed 1mo 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 1w ago READMEChangelog (10)Dependencies (58)Versions (36)Used By (0) Content GSAP Animation ====================== [](#content-gsap-animation) [![Content GSAP Animation icon](ext_icon.svg)](ext_icon.svg) GSAP-powered scroll animations for TYPO3 content elements. Editors choose an animation in the content element form; the extension renders the required `data-gsap-*` attributes and initializes GSAP ScrollTrigger in the frontend. [![TYPO3 backend animation settings flow](Documentation/Images/Settings/backend-settings-animation-flow.gif)](Documentation/Images/Settings/backend-settings-animation-flow.gif) Highlights ---------- [](#highlights) - TYPO3 12.4, 13.4 and 14.3+ compatible within the TYPO3 14 release line - Fluid Styled Content support - Bootstrap Package v13, v14 and v15 support - Fade, slide, zoom and flip animation presets - Backend preview with duration, delay and easing support - Full-width premium backend preview with readable dark-mode styling, GSAP GIF preset examples and automatic headless-output indicator - Extended settings for offset, anchor placement, once and mirror behavior - BITV-friendly behavior via `prefers-reduced-motion` - Headless-ready structured animation data for custom renderers and APIs - Local vendored GSAP and ScrollTrigger assets, no CDN dependency Installation ------------ [](#installation) ``` composer require pixelcoda/content-gsap-animation ``` Then run TYPO3 extension setup: ``` vendor/bin/typo3 extension:setup ``` TYPO3 Setup ----------- [](#typo3-setup) For TYPO3 13 and TYPO3 14 projects using Site Sets, add the Site Set dependency: ``` dependencies: - pixelcoda/content-gsap-animation ``` For classic TypoScript templates, include the matching setup for your rendering stack: - `Content GSAP Animation: Fluid Styled Content` - `Content GSAP Animation: Bootstrap Package v13.x` - `Content GSAP Animation: Bootstrap Package v14.x` - `Content GSAP Animation: Bootstrap Package v15.x` The Bootstrap Package number refers to the Bootstrap Package major version, not the TYPO3 major version. Editor Usage ------------ [](#editor-usage) Open a content element and use the **Animation** tab. Select an animation preset and adjust timing. If extended settings are enabled in the extension configuration, editors can also set offset, anchor placement, once and mirror behavior. The backend preview shows the selected animation on a content-card mockup and displays GIF examples for common presets such as fade, slide, zoom and flip. This helps editors compare the animation possibilities without leaving the form. Documentation media: - [Original TYPO3 backend settings flow GIF](Documentation/Images/Settings/backend-settings-animation-flow.gif) - [Styled frontend demo](Documentation/Images/Reports/frontend-styled.png) - [Lighthouse 100 report](Documentation/Images/Reports/lighthouse-100.png) - [Static premium preview](Documentation/Images/Settings/premium-preview.png) - [Animation tab](Documentation/Images/Settings/animation-tab.png) - [Extended settings](Documentation/Images/Settings/extended-settings.png) - [Footer label](Documentation/Images/Settings/footer-label.png) Lighthouse ---------- [](#lighthouse) [![Styled frontend demo](Documentation/Images/Reports/frontend-styled.png)](Documentation/Images/Reports/frontend-styled.png) [![Lighthouse 100 report](Documentation/Images/Reports/lighthouse-100.png)](Documentation/Images/Reports/lighthouse-100.png) Verified on the local TYPO3 test page with an animated content element and bundled GSAP assets: - Performance: 100 - Accessibility: 100 - Best Practices: 100 - SEO: 100 - FCP: 1.2 s - LCP: 1.7 s - TBT: 20 ms - CLS: 0 Accessibility ------------- [](#accessibility) The frontend script respects `prefers-reduced-motion: reduce`. If the visitor has reduced motion enabled, animation attributes are ignored and elements remain visible without transform or opacity animation. Headless Usage -------------- [](#headless-usage) Headless is not an editor setting and there is no toggle to enable it in the content element form. The extension always exposes structured animation data when the data processor is used by the selected TypoScript setup. The data processor exposes both rendered HTML attributes and structured animation data: - `animationSettings`: raw HTML attribute string for Fluid layouts - `gsapAnimationSettings`: legacy raw HTML attribute string - `animationSettingsData`: structured array for headless/API usage - `gsapAnimationSettingsData`: legacy structured array alias Example structured data: ``` { "animation": "fade-up", "duration": 800, "delay": 0, "easing": "power2.out", "offset": 120, "anchorPlacement": "top-center", "once": true, "mirror": false } ``` Custom Fluid layouts can keep using: ``` {f:if(condition: animationSettings, then: '{animationSettings -> f:format.raw()}')} ``` Headless renderers should consume `animationSettingsData` and decide in the frontend application whether to use GSAP, native CSS, framework-native animation or no animation. Keep the reduced-motion decision in the frontend so API responses stay presentation-neutral. In short: editors only choose the animation. Integrators consume `animationSettingsData` in custom Fluid layouts, JSON responses, API resources or headless frontend adapters. Development ----------- [](#development) Install PHP dependencies: ``` composer update --prefer-dist ``` Build JavaScript bundles: ``` cd Resources/Public yarn install yarn build ``` Run checks: ``` composer test composer test:functional ``` Functional tests require TYPO3 Testing Framework database credentials. With DDEV, use root credentials so the test runner can create temporary databases. Documentation ------------- [](#documentation) Full documentation is shipped with the extension: The TYPO3 documentation URL can be enabled once docs.typo3.org has indexed the package. ### Health Score 47 — FairBetter than 93% of packages Maintenance89 Actively maintained with recent releases Popularity15 Limited adoption so far Community10 Small or concentrated contributor base Maturity62 Established project with proven stability Bus Factor1 Top contributor holds 85.7% 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 ~13 days Recently: every ~1 days Total 32 Last Release 65d ago Major Versions 1.0.0 → 3.0.12025-05-07 v1.0.1 → v3.0.62025-05-25 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/18697022?v=4)[casianus](/maintainers/casianus)[@casianus](https://github.com/casianus) --- Top Contributors [![CasianBlanaru](https://avatars.githubusercontent.com/u/23030087?v=4)](https://github.com/CasianBlanaru "CasianBlanaru (36 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (3 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 headlessfrontendTYPO3 CMStypo3content elementsbootstrap\_packagescroll animationfluid\_styled\_contentpixelcodagsapgreensockscrolltriggeranimation-presets ### 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 [friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 103574.3k67](/packages/friendsoftypo3-content-blocks)[typo3/cms-styleguide TYPO3 extension to showcase TYPO3 Backend capabilities 105768.9k39](/packages/typo3-cms-styleguide)[wazum/sluggi TYPO3 extension for URL slug management with inline editing, auto-sync, locking, access control, and redirects 40543.5k](/packages/wazum-sluggi)[jweiland/events2 Events 2 - Create single and recurring events 2168.1k3](/packages/jweiland-events2)[t3sbs/t3sbootstrap Startup extension to use bootstrap 5 classes, components and more out of the box. Example and info: \[www.t3sbootstrap.de\](https://www.t3sbootstrap.de) 2416.7k1](/packages/t3sbs-t3sbootstrap)[baschte/content-animations TYPO3 CMS extension to have some fun and animate your content elements 2292.6k](/packages/baschte-content-animations) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)