Animated 3D Journal Collection Carousel for OJS - GSAP Enhanced

Dear OJS community,

I want to share an enhanced visual element I’ve developed to elevate the user experience on academic journal platforms. This is an Animated 3D Journal Collection featuring a carousel that showcases various journal issues with smooth GSAP animations and a direct redirect to OJS archives/publications.

The carousel has been custom-designed using CodePen.io, specifically adapted for academic environments: https://codepen.io/Kevin_Gutier09/pen/XJmNJaO

Key Features:

  • GSAP-powered 3D animations simulating a digital bookshelf
  • Each journal as an interactive “flip book” revealing covers and descriptions
  • Smooth hover effects and elegant transitions
  • Direct navigation to journal archives/publications
  • Optimized for academic UX

Description: This CodePen project showcases an interactive visualization of seven UCA journals using the GSAP library for fluid, dynamic animations. The interface simulates a bookshelf collection where each journal appears as a “flip book” that opens to display its cover and description. The animations deliver an engaging visual experience, providing an elegant, modern way to explore academic publications, titles, and abstracts—like browsing a digitally animated library.

Original design by Filip Zrnzevic, customization and adaptation © Credits to: Gutierrez, Kevin (2025). Created with Codepen.io

Additionally, here’s our recently updated journals portal featuring custom CSS enhancements: [Portal de Revistas UCA]

If you’re interested in implementing this add-on in your OJS platforms, feel free to adapt the code. I’d love to hear your feedback or see implementations!

Best regards,
Kevin Gutiérrez
Librarian
CRAI - Universidad Centroamericana José Simeón Cañas (UCA)

1 Like

Looks nice - but does it meet the accessibility (WCAG) requirements? Please check with https://wave.webaim.org/