Jump to content
Search Community

Cassie last won the day on February 23

Cassie had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Cassie last won the day on February 23

Cassie had the most liked content!

About Cassie

Recent Profile Visitors

23,051 profile views
  1. Heya! A few questions, Are you using React or Next? (If you're using Next, try this) // Register the plugin only in the client side if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } Can you try adding useGSAP to your plugin registration? gsap.registerPlugin(useGSAP); If you use this import instead of /all - does it change anything import { DrawSVGPlugin } from "gsap/DrawSVGPlugin"; Let me know!
  2. Hey Andrea, yeah Chrome issue threads are confusing, you're basically just reading notes from members of the team to each other. They're not talking to us. But it's been assigned (is being worked on) - edit - I checked and it looks like it's working for me in the latest version of chrome now.
  3. Heya, As Jack mentioned, there are no 'frames' in GSAP animations. So it would be pretty confusing to have a GUI that works that way. Maybe a stepped ease is what you're after? https://gsap.com/docs/v3/Eases/SteppedEase/ You can step through the progress of a timeline too, if you're using a stepped ease you could step though that number of times? https://codepen.io/GreenSock/pen/NWJQvdy?editors=1011 Good luck with your learning.
  4. Well done pal! 🥳 Looking good
  5. Ah yeah of course, that makes total sense. Thanks for clarifying Jack.
  6. (also just FYI Rodrigo, I logged out the context without using contextSafe and it's being added, I think Jack worked some magic to make callbacks safe).
  7. No obvious issue there, no. It looks like you're registering ScrollTrigger. I wonder if the issue is somewhere else in your code. It would be great to see a minimal demo. Also - FYI Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down. Here is how it works: const container = useRef(); // the root level element of your component (for scoping selector text which is optional) useGSAP(() => { // gsap code here... }, { dependencies: [endX], scope: container }); // config object offers maximum flexibility Or if you prefer, you can use the same method signature as useEffect(): useGSAP(() => { // gsap code here... }, [endX]); // simple dependency Array setup like useEffect() This pattern follows React's best practices. We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/ If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better.
  8. Hmm. There's something baffling going on here. @GreenSock @Rodrigo If I move registerPlugin inside the useGSAP hook and then hard refresh the scrub and snapping stops working https://stackblitz.com/edit/react-g2bts7?file=src%2FAnimationWrapper.js Thanks for the demo @greenchonies
  9. Ah! This is great to hear. Glad it helped a little. So, i use either affinity, boxy or illustrator - personally illustrator's my fave but that's down to years of muscle memory. I usually recommend boxy to people for light tweaking and affinity as a cheaper illustrator alternative. What issues were you having with illustrator? (The top left corner of your artboard is [0,0] so usually I just use that as a rough starting point) A v helpful hack is to use relative paths too, relative paths draw each point relative to the first M command. That means you can change the x and y of the M command to anything and the rest of the path will move along with it. Easy hand-editing for SVG path positions! 🥳 Most editors spit out a mix of absolute and relative path points, so if you try to change the M command you just distort the path 🫠 Affinity allows you to choose relative paths as an export setting which is great. Failing that - this is a helpful tool for adjusting your paths here. https://lea.verou.me/blog/2019/05/utility-convert-svg-path-to-all-relative-or-all-absolute-commands/ Good luck with it all!
  10. If it works it works really! The only reason I can think of is that it's usually bad UX to hijack the scroll away from the user, you're effectively stopping the user from scrolling manually while that tween plays. But if that's not really an issue for you, then crack on!
  11. For sure! No worries. Would you happen to have a link to the video, that would be a huge help to make sure no one else gets the corrupted files. Not quite There are public plugins like ScrollTrigger and club plugins like ScrollSmoother. GSAP and the publicly available plugins are free for everyone to use as long as their usage falls under our standard license (most usage does). There are only two reasons you'd need to pay for anything: If you need the special commercial license that comes with Business memberships. This is only necessary if you're using GSAP in a site/product/game/app for which you're charging MULTIPLE customers a fee. See our licensing for details. If you need one of the members-only plugins like ScrollSmoother. You can use all the plugins for free on codepen, stackblitz and locally with our trial package though https://gsap.com/resources/trial/ We also offer discounts to students, so let me know if you're interested in that and I can DM you a coupon code. Sorry if this was a stressful first encounter with GSAP for you and thanks for deleting that file 💚
  12. I found your repo here - https://github.com/IgCheer/fyrre I noticed that the ScrollSmoother and ScrollTrigger files had been heavily minified (further than we minify them) and the licensing info at the top had been removed. 😬 So, some good news first! I swopped in the latest files and the site works fine. However, This brings me to a slightly awkward conversation - ScrollSmoother is a (paid) club GSAP plugin. If you have an active license this isn't an issue, you can simply just download the latest files to use in the project. However, I don't see a membership on your account. If you acquired these files without realising it was a paid plugin we'd appreciate if you delete that file (even though I think that file is possibly corrupted) or sign up for your own membership for use of the plugins.
  13. @Rodrigo - lols at both of us saying "magic number" and "put it at x: 0 and y: 0"
  • Create New...