Convert scroll animations from AnimeJS to GSAP by Copilot · Pull Request #11 · PGSCOM/pgscom.github.io

Copilot · 2026-01-19T16:10:10Z

Migrates all scroll-driven animations from AnimeJS to GSAP for cleaner implementation and better mobile performance.

Changes

Animation Library Migration

Replaced anime.timeline() with gsap.timeline() for main scroll timeline and projects section
Switched from timeline.seek(ms) to timeline.progress(0-1) for smoother scroll scrubbing
Converted all anime.stagger() calls to GSAP's native stagger property

Mobile Optimizations

Added gsap.config({ force3D: true }) for GPU-accelerated transforms
Added force3D: true to individual tweens for hardware acceleration
Existing mobile optimizations preserved (30fps frame sequence, reduced cache buffer)

Dependencies

Added gsap@3.12.7
Removed animejs
Using CDN ESM imports for browser modules

// Before (AnimeJS)
const timeline = anime.timeline({ autoplay: false });
timeline.add({ targets: el, scale: [1, 25], duration: 1000 });
timeline.seek(progress * timeline.duration);

// After (GSAP)
const timeline = gsap.timeline({ paused: true });
timeline.fromTo(el, { scale: 1 }, { scale: 25, duration: 1, force3D: true });
timeline.progress(progress);

Screenshot

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

telemetry.astro.build
- Triggering command: /usr/local/bin/node node /home/REDACTED/work/pgscom.github.io/pgscom.github.io/node_modules/.bin/astro build (dns block)
- Triggering command: /usr/local/bin/node node /home/REDACTED/work/pgscom.github.io/pgscom.github.io/node_modules/.bin/astro dev --host 0.0.0.0 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Conviertir todas las animaciones de scroll a la libreria gsap para optimizarlas de una forma limpia. Tambien revisar el uso de recursos para dispositivos moviles.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: PGSCOM <69808296+PGSCOM@users.noreply.github.com>

…en build)

github-actions · 2026-01-20T00:43:23Z

🚀 Preview Publicada:

PGSCOM · 2026-01-20T00:45:59Z

Errores en la animacion de secuencia de imagenes + video: Las imagenes no estan animadas de la misma forma que antes, el video no se reproduce despues de la animacion.

PGSCOM · 2026-02-05T14:26:36Z

Errores en la animacion de secuencia de imagenes + video: Las imagenes no estan animadas de la misma forma que antes, el video no se reproduce despues de la animacion.

Al volverlo a mirar ahora parece que está arreglado. Probablemente fue por culpa de la cache de mi navegador

Copilot

Pull request overview

This pull request migrates scroll-driven animations from AnimeJS to GSAP for improved performance and cleaner implementation, particularly on mobile devices.

Changes:

Replaced AnimeJS with GSAP (v3.12.7) for all scroll animations
Converted timeline API from anime.timeline() to gsap.timeline() with progress-based scrubbing
Added GPU acceleration configuration for mobile optimization
Converted duration units from milliseconds to seconds throughout

Reviewed changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 5 comments.

File	Description
src/pages/index.astro	Converted main scroll timeline and projects section animations from AnimeJS to GSAP, including API conversions and timing adjustments
src/styles/proyectos.css	Updated comment to reflect library change from AnimeJS to GSAP
package.json	Added gsap@3.12.7 dependency and removed animejs
package-lock.json	Updated lockfile with GSAP dependencies and removed AnimeJS-related packages

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-05T14:30:57Z

+    import ScrollTrigger from 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/ScrollTrigger/+esm';
+
+    // Registrar plugins de GSAP
+    gsap.registerPlugin(ScrollTrigger);



The ScrollTrigger plugin is imported and registered but never used in the code. The scroll handling is implemented manually using the scroll event listener. Consider removing the unused import and plugin registration to reduce bundle size and avoid confusion.

Suggested change

import ScrollTrigger from 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/ScrollTrigger/+esm';

// Registrar plugins de GSAP

gsap.registerPlugin(ScrollTrigger);

// Inicialización de animaciones de scroll con GSAP (sin plugins adicionales)

Copilot · 2026-02-05T14:30:57Z

-                    // Declarar el tamaño en vh a partir del tamaño visual actual (incluye transform: scale)
+
+        // Duración total de la timeline en segundos (normalizada a 2 segundos para mapeo con scroll)
+        const TIMELINE_DURATION = 2;


The TIMELINE_DURATION constant is defined but never used in the code. This appears to be a leftover from the migration process. Consider removing it to keep the code clean, or if it was intended for documentation purposes, add a comment explaining its purpose.

Suggested change

const TIMELINE_DURATION = 2;

Copilot · 2026-02-05T14:30:57Z

+		import ScrollTrigger from 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/ScrollTrigger/+esm';
+
+		// Registrar plugins de GSAP
+		gsap.registerPlugin(ScrollTrigger);



The ScrollTrigger plugin is imported and registered but never used in the projects section code. The scroll handling is implemented manually using the scroll event listener. Consider removing the unused import and plugin registration to reduce bundle size and avoid confusion.

Suggested change

import ScrollTrigger from 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/ScrollTrigger/+esm';

// Registrar plugins de GSAP

gsap.registerPlugin(ScrollTrigger);

Copilot · 2026-02-05T14:30:58Z

 	<script type="module">
-    import anime from 'https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.es.js';
+    import gsap from 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/+esm';
+    import ScrollTrigger from 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/ScrollTrigger/+esm';


The CDN import path for ScrollTrigger appears to be incorrect. The path 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/ScrollTrigger/+esm' should likely be 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.js/+esm' or use the correct jsDelivr ESM syntax. Verify this import path works correctly, as an incorrect path would cause a runtime error when the module is loaded.

Suggested change

import ScrollTrigger from 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/ScrollTrigger/+esm';

import ScrollTrigger from 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.js/+esm';

Copilot · 2026-02-05T14:30:58Z

 	<script type="module">
-		import anime from 'https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.es.js';
+		import gsap from 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/+esm';
+		import ScrollTrigger from 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/ScrollTrigger/+esm';


The CDN import path for ScrollTrigger appears to be incorrect. The path 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/ScrollTrigger/+esm' should likely be 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.js/+esm' or use the correct jsDelivr ESM syntax. Verify this import path works correctly, as an incorrect path would cause a runtime error when the module is loaded.

Suggested change

import ScrollTrigger from 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/ScrollTrigger/+esm';

import ScrollTrigger from 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.js/+esm';

Initial plan

db372cb

Copilot AI assigned Copilot and PGSCOM Jan 19, 2026

Copilot started work on behalf of PGSCOM January 19, 2026 16:10 View session

Copilot AI and others added 2 commits January 19, 2026 16:17

Convert scroll animations from AnimeJS to GSAP

b1ef906

Co-authored-by: PGSCOM <69808296+PGSCOM@users.noreply.github.com>

Add GSAP force3D configuration for mobile GPU acceleration

b85a146

Co-authored-by: PGSCOM <69808296+PGSCOM@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Convert all scroll animations to GSAP for optimization~~ Convert scroll animations from AnimeJS to GSAP Jan 19, 2026

Copilot AI requested a review from PGSCOM January 19, 2026 16:22

Copilot finished work on behalf of PGSCOM January 19, 2026 16:22

Add optional dependency for esbuild on Linux x64 platform (Fix error …

8adbafb

…en build)

PGSCOM marked this pull request as ready for review February 5, 2026 14:26

Copilot AI review requested due to automatic review settings February 5, 2026 14:26

PGSCOM merged commit 840e805 into v4 Feb 5, 2026
4 checks passed

Copilot started reviewing on behalf of PGSCOM February 5, 2026 14:27 View session

Copilot AI reviewed Feb 5, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert scroll animations from AnimeJS to GSAP#11

Convert scroll animations from AnimeJS to GSAP#11
PGSCOM merged 4 commits into
v4from
copilot/convert-scroll-animations-gsap

Copilot AI commented Jan 19, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jan 20, 2026

Uh oh!

PGSCOM commented Jan 20, 2026

Uh oh!

PGSCOM commented Feb 5, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	import ScrollTrigger from 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/ScrollTrigger/+esm';
	import ScrollTrigger from 'https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.js/+esm';

Conversation

Copilot AI commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Animation Library Migration

Mobile Optimizations

Dependencies

Screenshot

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

github-actions Bot commented Jan 20, 2026

Uh oh!

PGSCOM commented Jan 20, 2026

Uh oh!

PGSCOM commented Feb 5, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Jan 19, 2026 •

edited

Loading