Search the Community
Showing results for tags 'codesandbox'.
Found 2 results
-
Hey guys, I'm relatively new to GSAP and using custom code (for Webflow). I've used GSAP core in Codesandbox pretty easily before, but I've joined club GSAP and feel like a noob 🤣 I'm studying front end dev at the moment but this is for a project that's due sooner than I can finish it so hoping the GSAP community can help! Basically I'm trying to set up the scramble text plugin. I've uploaded three files (from the "src" folder, not sure if this is correct); ScrambleTextPlugin.js, strings.js and TextPlugin.js, idk why at some point in the 800 videos and articles I read I wound up with these. In my script.js file I'm importing the plugin from the gsap folder within the project, then registering it. I'm trying to scramble text on hover, this is the current config but it's not working in Webflow (I've linked the Codesandbox script in Webflow for this script.js file only, not sure if I need to link the gsap files too?): import { gsap } from "gsap"; import { ScrambleTextPlugin } from "./gsap/ScrambleTextPlugin.js"; // Adjust the path as needed gsap.registerPlugin(ScrambleTextPlugin); const scrambler = document.querySelector(".scramble-text"); if (scrambler) { scrambler.addEventListener("mouseenter", () => { gsap.to(scrambler, { duration: 0.5, scrambleText: { text: scrambler.textContent, chars: "upperCase", }, }); }); scrambler.addEventListener("mouseleave", () => { gsap.to(scrambler, { duration: 0.5, scrambleText: { text: scrambler.textContent, }, }); }); } Any help would be greatly appreciated.
-
Hi, To learn gsap, I copied by hand an existing code from an online tutorial. The behavior seems different on live update and page load. On page load, the last animation is triggered a second time after the others. Do you know why ? It must be very easy but I am totally new to gsap. My code copied by hand is here: https://codesandbox.io/s/learn-gsap-create-react-app-forked-3kc74k?file=/src/App.js and the original is here : https://github.com/wrongakram/GSAP-imageReveal/blob/master/src/App.js I copied/pasted the original code in my project in the 'codeOriginalGitHub.js' file Thanks
