Hi @DevC , @Rodrigo, @mvaneijgen
I'm trying to integrate GSAP with Astro. In my index.astro file I'm importing gsap as below:
---
import { gsap } from 'gsap';
import Layout from '../layouts/LayoutLanding.astro';
gsap.set("svg", {transformPerspective:600, transformOrigin:"50% 50%"})
gsap.to("svg", {rotationX:360, duration:10, repeat:-1, ease:"none"})
gsap.to("svg", {rotationY:360, duration:15, repeat:-1, ease:"none"})
gsap.to("svg", {rotation:90, duration:6, repeat:-1, yoyo:true, ease:"power2.inOut"})
---
This is throwing a console error:
Cannot read properties of undefined (reading 'querySelectorAll')
/Users/hickie/Documents/Websites/Astro/triangulate/node_modules/gsap/dist/gsap.js:640:175
639 | toArray = function toArray(value, scope, leaveStrings) {
> 640 | return _context && !scope && _context.selector ? _context.selector(value) : _isString(value) && !leaveStrings && (_coreInitted || !_wake()) ? _slice.call((scope || _doc).querySelectorAll(value), 0) : _isArray(value) ? _flatten(value, leaveStrings) : _isArrayLike(value) ? _slice.call(value, 0) : value ? [value] : [];
| ^
641 | },
642 | selector = function selector(value) {
643 | value = toArray(value)[0] || _warn("Invalid scope") || {};
If I try and run the js using <script >
gsap.set("svg", {transformPerspective:600, transformOrigin:"50% 50%"})
gsap.to("svg", {rotationX:360, duration:10, repeat:-1, ease:"none"})
gsap.to("svg", {rotationY:360, duration:15, repeat:-1, ease:"none"})
gsap.to("svg", {rotation:90, duration:6, repeat:-1, yoyo:true, ease:"power2.inOut"})
</script> then I get a uncaught referenceError: gsap is not defined.
There's little online to give clear instructions about how to integrate Astro and GSAP so was hoping you might be able to shed a little bit of light on how you've gone about implementing this.
Any help would be very appreciated.
Thanks