milko

It's okay Jack! Hopefully somebody will stumble upon this 😁🥰

Hello everybody! I am working on a Vite / JavaScript / Webflow template so it's easier to use JavaScript inside Webflow, and of course GSAP. I have GSAP as a dependency (thank you GS 😍), but when trying to call gsap this namespace gsap is the first one that pops up, so when hitting 'tab' to expand & auto-import, nothing happens. Now you'd say this is not a real problem, and you would be right, but I love better developer experience, and I want to make it easier for non-import-modules guys to get started easily. My jsconfig.json looks like this: { "compilerOptions": { "target": "ES2020" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */, "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */, "removeComments": true /* Strict Type-Checking Options */, "strict": true /* Enable all strict type-checking options. */, /* Additional Checks */ "verbatimModuleSyntax": true, /* Module Resolution Options */ "moduleResolution": "node", "resolveJsonModule": true, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */, /* Advanced Options */ "skipLibCheck": true /* Skip type checking of declaration files. */, "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ /* Do not emit comments to output. */ } } There are a couple of options which I don't totally understand - I saw it in a similar TypeScript/Webflow template (taken from tsconfig.json), where calling gsap popped the gsap library & auto-autoimport in the first position of the expanded menu (pic 2) Edit*: adding vite.config.js code in case it's needed. import { defineConfig } from "vite"; import eslint from "vite-plugin-eslint"; import InjectHMRPlugin from "./config/vite-plugin-inject-hmr.js"; import RedirectRootRequestsPlugin from "./config/vite-plugin-redirect-root-requests.js"; export default defineConfig(({ command }) => { let config = { // Shared configuration across all modes resolve: { alias: { // Make root ("/") point to "src" folder "/": "src", }, }, optimizeDeps: { exclude: ["jquery"], }, server: { host: "localhost", port: 3000, }, build: { rollupOptions: { // Direct string paths without path.resolve input: { main: "./src/main.js", about: "./src/about.js", }, external: ["jquery"], }, }, // ...other shared configurations... }; // Extend config for development environment if (command === "serve") { config = { ...config, // keep the shared config plugins: [InjectHMRPlugin(), RedirectRootRequestsPlugin(), eslint()], server: { ...config.server, // keep the shared server config hmr: { port: 3000, // Can be omitted if it's the same as server port }, }, }; } return config; }); Thank you GreenSock team! ❤️

Webflow Read-Only: https://preview.webflow.com/preview/cfv2colstarter-ba45ccc944d42500d90b08c7?utm_medium=preview_link&utm_source=designer&utm_content=cfv2colstarter-ba45ccc944d42500d90b08c7&preview=4f45f495fffbea24956c1168c351c6e5&workflow=preview CSB: https://codesandbox.io/s/taimen-jn3rn6?file=/index.js Live: https://cfv2colstarter-ba45ccc944d42500d90b08c7.webflow.io/

Thanks @Geoff Dawes Unfortunately this didn't work! @___wtem___ neither did the display:flex ? I've noticed that after expanding the navigation there is a horizontal overflow/overscroll. I have forgotten about the second same #taimen ID, but it seems that this wasn't the problem. Maybe my overall approach is the issue? I mean even if this works, how will I make it always be on top so there is no negative space between the expanded nav and the navbar itself? ?

Hey @Rodrigo! Appreciate your answer maan, thank you! Unfortunately, since this is Webflow, a nocode tool i am unable to reproduce the issue in another container either because it doesnt allow me to export the elements correctly or due to coding inability!

Hello guys!! First of all I have to say how happy I am to finally overcome my fears and get to try the famous 'gsap'! Thank you for your hard work!! Now onto the issue.. Sorry I didn't know where else to grab some help.. I want to implement it in a client's project inside Webflow, and I thought I was doing good but.. Expected output: Taimen logo (#taimen) on first scroll will just be resized to ~300px and after this, scroll continues normally. Ideally no position changes. 1. When serving it from my node/localhost the script loading was instant, but now that it's served from the cloud there is a weird jumping, I think probably after the ScrollTrigger is connected? 2. Although it does somehow works , when opening and closing the .nav-expand from hamburger menu, which is also controlled from gsap, the the resizing of the logo after the scroll and the whole .nav makes a weird flashing/jumping. PS: is my approach to the resizing of the logo on "first scroll" correct? (in case the approach is correct, I can't seem to solve this case: when user has scrolled and the logo is resized - if user clicks the hamburger menu there is a severe white space which breaks the layout (image attached). Probably due to pinning?) Argh. Feeling so lost here. Site link (made in Webflow): https://cfv2colstarter-ba45ccc944d42500d90b08c7.webflow.io/ CodeSandbox (for gsap - they are connected): https://codesandbox.io/s/taimen-jn3rn6?file=/index.js (Inspiration https://www.stord.com/ (but in my case I need only the 1st scroll))