Jump to content
Search Community

Race Condition with CSS

DevC test
Moderator Tag

Recommended Posts

I have an astro project using a few react components. In the app wrapper I'm loading a couple `.css` files (reset, base, etc.) Within the react components I'm importing a `.scss` file. Locally things are fine, but in prod it looks as if only those base `.css` files are being applied. Surely there's a correct way to use gsap with component.jsx + component.scss structure.

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

There's no way for me to create a demo of my build pipeline in codesandbox. Hoping someone has encountered this before. It's a simple as this:

If I import my css file in the top level wrapper (Layout.jsx) everything works. If I import the css in the component (Component.jsx) the stylesheet does not make it to prod.

Link to comment
Share on other sites

Hi @DevC, a minimal demo is not your whole project and definitely not your whole build pipeline. Just a few lines of code demonstrating the issue you're encountering.

 

Here is a basic setup on CodeSandbox with React, if you could recreate the issue on there, we'll be happy to take a look. Having just a description of the problem isn't very helpful it could be anything at that point, as stated before "the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc."

Link to comment
Share on other sites

Hi @DevC,

 

Sorry to hear about the issues you are having. I've never used astro before so I'm not aware of any issue like this.

 

You mentioned that the styles are fine when imported at the top level but become missing when imported at component level. I assume that you are trying to use CSS Modules for your styles? If that's the case you should check Astro's docs about that specific configuration. CSS Modules come out of the box in a few build systems such as Next, Vue and it's ecosystem use their own way for scoping styles (which is far more robust and clearer IMHO), but in others like Create React App and Vite you have to config that by hand.

 

On top of that I never heard of GSAP messing up the import of any file in a build system so this is new to me and my best guess is that GSAP has nothing to do with this.

 

Please share as many details as possible about the setup you have and also check with Astro's support to see if they can shed some light on this.

 

Happy Tweening!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

That sounds like you're running GSAP before the "document" even exists. Obviously GSAP needs the document to exist before it can do things like document.querySelectorAll(). Again, it's super difficult to troubleshoot blind (without a minimal demo), but I'd recommend making sure that the document exists before you try running any GSAP-related code. Perhaps that's a lifecycle issue in the framework you're using. 🤷‍♂️

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...