DevC

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.

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.

I'll tease out a demo, but here's a short vid that shows what I mean is happening.

Ah it looks like I've done something wrong with my media query, but I can't quite see it. I can get pin-spacer to appear if I load the page in mobile view first then switch to desktop view. Very odd behavior. As you can see below I want to kill any pinning below 655px. useEffect(() => { // Scroll Scenes ScrollTrigger.matchMedia({ '(min-width: 655px)': function () { const scenes = gsap.utils.toArray('#mediaObject') // maybe use dymanic height for pin/scroll ends? const height = (scenes.length - 1) * 200 + '%' // Scenes Timeline const pinTl = gsap.timeline({ scrollTrigger: { trigger: wrapRef.current, pin: listRef.current, start: 'center center', end: `+=${height}`, scrub: 1, anticipatePin: true, }, }) }, }) }, [])

In lieu of full demo, throwing this out there if it's been seen before. Happy to make a demo if this is not enough context. Have you seen this and what was the issue? gsap and scrolltrigger are both loaded and running, but no pin-spacer.

Thanks @OSUblake you lead me on the right path. For browsers of the future, I ended up using the video playback/currentTime as the progress ticker for the timeline. That did the trick. Something like this: function startVideo(timeline) { if (heroVideoRef && heroVideoRef.current && timeline) { const percent = heroVideoRef.current.currentTime / heroVideoRef.current.duration timeline.progress(percent) } }

Tweenings Greetings, I've shared a demo that works okay in codepen, but has many syncing issues in prod (react). I'd like to know if there is a better way to do what I'm doing here. I'm also curious to find some docs on helping gsap get initialized before rendering. Seem to have the odd refresh where my text treatment is all messed up. After initial text and video wipe this should happen: With the frame cuts of the video the span in "The next number is" {1} should update. With the frame cuts the bg gradient should also update. On repeat is should stay in sync with the video. Thanks for any help. First time forum asker.