Animated 3D Journal Collection Carousel for OJS - GSAP Enhanced

kahernandezg
Tue, 14 Apr 2026 16:48:15 +0000
Community Showcase

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)

2 posts - 2 participants