Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Design Cart GSAP Slider

Joomla 6 site module for cinematic, fullscreen (or fixed-height) image slideshows powered by GSAP — with 16 transition modes inspired by Codrops.

GitHub About / short description

Paste into the repository About description field (≈1 sentence):

Joomla 6 GSAP image slideshow module with 16 Codrops-inspired transitions, responsive height, autoplay and admin-managed slides — by Paweł Nosko / Design Cart.


Links


What it is

Design Cart GSAP Slider (mod_gsap_slider) is a site module for Joomla 6 (PHP 8.3+). It renders a hero-ready image slider with sixteen GSAP transition timelines, optional overlay content (heading, description, CTA), wheel/drag navigation via GSAP Observer, autoplay with a configurable delay, and responsive height modes for desktop, tablet and mobile.

The animation ideas are adapted from the public Codrops demo by Manoela Ilic (tympanus.net / MIT). Design Cart wraps those timelines in a production Joomla module with a full admin UI, language packs (en-GB / pl-PL), and an update server.

Highlights

  • 16 GSAP animation modes (parallax, skew, 3D flip, colour wipes, shutters, and more)
  • Repeatable slides in the module admin: image, heading, description, button text & link
  • Fullscreen (100vh / 100dvh) or custom height per breakpoint
  • Configurable shutter / wipe colours for modes 11, 12, 15 and 16
  • Nav buttons with optional pulsing glow; wheel / touch / drag via Observer
  • Autoplay with pause on hover/focus
  • Content overlay colour & opacity for readable text on photos
  • GPL-licensed module package suitable for Joomla / JED workflows

Requirements

  • Joomla 6.x
  • PHP 8.3 or newer
  • Modern browser with CSS variables and ES modules

Installation

  1. Download the ZIP from Design Cart or from this repository’s Releases.
  2. In Joomla: System → Install → Extensions and upload the package.
  3. Create a new site module of type Design Cart GSAP Slider.
  4. Add slides, pick an animation mode, set appearance, assign a position and menu items, then publish.

Animation modes (quick list)

  1. Vertical parallax
  2. Vertical skew stretch
  3. Zoom then vertical reveal
  4. Soft fade vertical
  5. Rotated cards
  6. Horizontal stretch wipe
  7. Flash scale-up
  8. Side pop + colour grade
  9. Spin zoom
  10. Diagonal slide
  11. Vertical colour wipe
  12. Horizontal colour cascade
  13. 3D page flip
  14. ScaleX doors
  15. Dual vertical shutters
  16. Multi horizontal shutters

Credits

  • Module author: Paweł Nosko / Design Cart
  • Animation inspiration: Manoela Ilic — Codrops Slideshow Animations (MIT)
  • Libraries: GSAP, GSAP Observer, imagesLoaded (retain their upstream licences)

License

The Joomla module code is licensed under the GNU General Public License version 2 or later. See LICENSE.txt in the package. Upstream demo code and vendor libraries keep their original licence notices.

About

Joomla 6 site module for cinematic, fullscreen (or fixed-height) image slideshows powered by GSAP — with 16 transition modes inspired by Codrops.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages