896terv8iygaedv

Thanks again. Thinking broadly, what is the GSAP logic then for moving some element into the trigger and then keeping it in the trigger area while animations happen? It all makes sense to me when everything is already in the trigger area. But when something is above the trigger area and needs to move into it, how does the thinking go...?

Thanks Rodrigo. Can you explain why "pinning the blue rectangle and moving it on the Y axis as well" is a problem? Additionally, the phone should never be opacity 0 or hidden. What is the purpose of adding the .phone-container display flex around the phone? I'm trying to modify a fork of your code now. Thanks again.

The blue border represents the outline of a mobile phone. The .info images are the images that will appear inside the "phone" (#phoneBorder). Intended Behavior: 1. On load, the phone is positioned absolute slightly above the marina image. The phone should become fixed to the center of the viewport when the center of the phone meets the center of the viewport on scroll. 2. When the phone then meets the center of #animationContainer, it should become fixed for the duration of the "infos" animation using scrollTrigger. 3. When the user scrolls to the footer, the phone should remain in center of #animationContainer and the infos should remain on the last .info. When the user scrolls back up, the entire sequence should reverse. I thing I'm pretty close. Please assist. An example of the behavior can be found here: https://mobile-app.marriott.com/en-us

Thanks Cassie. Thanks Jack. Your replies have cleared everything up for me. This forum and you all are the best!

Check out my Codepen. I tried to make it as barebones as possible. The desired effect is that clicking the button morphs the SVG. Why isn't this working? Why does GSDevTools show the timeline is 0:00 when tl.pause() exists, but shows 2:50 when it's removed? Why is the duration 2:50 when I have it set to duration 2? Edit: I've updated the code below and commented out GSDevTools.create() as suggested. Now it's working.

@b1mind You're a saint for sticking with me. Thank you! To summarize for any others that happen upon this thread. I'm using Astro.js framework. Hosting on Netlify. Astro uses Vite. My issue was two-fold. 1. I needed to follow @b1mind's advice and create a .npmrc file in my project root dir, not my system's home dir, as I had been doing. Secondly, I needed to add the GSAP auth code as an ENV in Netlify. Finally, I needed to edit my .npmrc file exactly as @b1mind described it (of course using whatever your Netlify ENV name is e.g. GSAP_TOKEN, NPM_TOKEN etc) 2. Now onto the Vite issue. @b1mind is also correct that the files need to a) be import from dist and b) have the filetype appended. This means do: import { DrawSVGPlugin } from "gsap/dist/DrawSVGPlugin.js"; and NOT: import { DrawSVGPlugin } from "gsap/DrawSVGPlugin"; Alright, that's it! Hope this helps someone else.

Interesting, when I "clear cache and deploy" on Netlify, I'm now back to it complaining that it can't match my "shockingly" subscription to auth i.e. build fails because it can't authenticate. Soooo, I'm guessing the filepath changes I've been pushing COULD work, but I don't know since Netlify is using some cached files. I need to fix this authentication issue. Not sure how.

@b1mind I changed the file path and appended filtetype, but no dice. However, what did you mean by "AND env var"? I've set the .npmrc file per GSAP install instructions. But I haven't set an env file or added env to Netlify. I know how to add the auth to Netflify env, but now how to access it once that's done (or if doing this even matters as the GSAP instructions don't mention it and I'm not doing SSR).

Leaving another update. I changed directions and tried the Zip installation method instead of Private Registry: https://greensock.com/docs/v3/Installation#ZIP As expected, the result is the same. A core team member of Vite and Astro implies here that this is likely an issue on GSAP's end, but there doesn't seem to be much reason given: https://github.com/vitejs/vite/issues/2789 It does link here https://publint.bjornlu.com/gsap@3.10.4 and states the "GSAP doesn't export files properly" as of June 2022. Not sure what to make of that. Is Greensock doing anything behind the scenes with accessing these private plugin files that I am not able to see? In my simplistic view, the private files are in node_modules/gsapDrawSVGPlugin and therefore should be accessible with import { DrawSVGPlugin } from "gsap/DrawSVGPlugin"; That is exactly what works for non-membership plugins. For example, I am loading ScrollTrigger.js in this manner. Deploy runs fine. No problem. What is it in the membership plugins that is different?

FWIW, I am not using SSR

OK, I am now back to the original error message. While debugging, I wound up with an extra line in package.json "dependencies": { "@astrojs/tailwind": "^3.0.1", "gsap/shockingly": "^3.11.4" "astro": "^2.0.16", "gsap": "npm:@gsap/shockingly@^3.11.4", "swup": "^3.0.5", "tailwindcss": "^3.2.7" } Removing "gsap/shockingly": "^3.11.4" got Netlify to stop complaining about an authentication mismatch. Now I'm back to [vite]: Rollup failed to resolve import "gsap/DrawSVGPlugin"

This is quite a bear to deal with. First, yes I did mean /dist. I have tried the solutions to no avail. And actually, the last solution from @Prasanna is getting a new error message from Netlify: I generated a new Auth Token. I have several times deleted and recreated .npmrc I've run npm cache clean --force I've cleared cache and deployed from netlify I have run both: npm install @gsap/shockingly npm install gsap@npm:@gsap/shockingly I'm not sure why my current token (which is in my npmrc) is not connecting with my shockingly subscription.

I'm getting an error on the members-only DrawSVGPlugin when I deploy to Netlify. I'm using Astro, which builds the site with Vite. Everything works fine on my local instance. I've followed Greensock install instructions. Screenshot of my npmrc is attached. I can see gsap and DrawSVGPlugin.js in /gsap in node_modules: My script in Astro: <script> import { gsap } from "gsap"; import { DrawSVGPlugin } from "gsap/DrawSVGPlugin"; gsap.registerPlugin(DrawSVGPlugin); gsap.from(".designer-text svg path", { delay: 0.8, duration: 1.125, stagger: 0.125, drawSVG: "0%", }); </script> Locally, the script is working fine. Netlify Deploy Message: I have also tried import from gsap/dev... but this did not work either. Exact same error. I can of course load the plugin as an external script but would like to solve the issue and stay consistent with imports and npm. Any help is appreciated.