Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by jxy

  1. https://brilliant.org/courses/geometry-fundamentals/angles-and-lengths/triangle-sides-and-angles/2/ I have a paid membership of brilliant.org. Not sure if you can view this content. Let me know if you want a shared account.
  2. Done! The text isn't hard at all. I replaced <div> with <text> and put them in the <svg>. Thanks!
  3. Hi @OSUblake, I successfully incorporated your solution into my project! Quick question, how to scale this animated SVG so that it fits in containers of all sizes?
  4. This looks amazing! I will study this later! Thank you!
  5. Hi @OSUblake, here is the CodeSanbox link: https://codesandbox.io/s/stoic-curran-kekt9?file=/src/App.js You have been really helpful! Thank you! I just upgraded my account to "shockingly green" because of helpful people like you haha
  6. Hi all, I tried to set up a Codepen for this but I'm so green that I haven't figured out how exactly, so bear with me... The letters "a", "b", "c" are in a separate div overlapping the svg element. My questions is, how would you keep the letters "a", "b", "c" in between their respective angles as you drag the handles, as in the clip below? Any pointers will be appreciated... thanks!
  7. Hi Cassie, sorry let me take that back. 😅 As a noob, I find everything related to web development overwhelming, not just limited to learning about GSAP. But I do sometimes found the site a bit hard to browse. For example, when I was eating out just now, I took out my phone to log on greensock.com to check out the draggable plugin page. Initially the page didn't load for a long 10 seconds, showing me a page with header and footer but empty content, before it fetches content from server, which then caused what I believe is called Cumulative Layout Shift. When the page finally loads, it looks like this on my chrome/iphone: https://imgur.com/e3Y9ffh Granted, this is not a big issue at all! And I feel soooo grateful for something like GSAP exists to make animation sooo much easier! Ideally though I want the documentation to be like https://tailwindcss.com/ By the way, love your personal website! The design! All the animations are delightful! Especially your avatar animation! I have always been wanting to ask, how did you make the" pens flowing out like water" effect?😃
  8. I feel the Greensock website is by design not too beginner/user friendly to keep the barriers to entry high haha😜
  9. Just let you know that I successfully implemented your suggestion - triangle as a clipPath to cover the rest of the circles! Thank you @OSUblake !!
  10. Thanks, Cassie! Let me give this a look!
  11. Thanks! So there isn't a more intuitive way to update the angle shapes (which are svg <path> elements ) other than vanilla javascript? Is there a better tool / plugin to deal with such things?
  12. I have been trying to achieve something like this: Where one can drag the "handles"(the blue and yellow circles) to change the shape of the triangle. My understanding is that I would need to somehow change the "d" attribute of the "path" to make this work. The closest draggable plugin example I could find is this: https://codepen.io/GreenSock/pen/wgapaY But it's changing the "points" attributes of a polygon, not the "d" attributes. I also looked at morphSVG plugin but it seemed to be used for animating the morphing from one shape to another very different shape. Any pointers, please? Thank you!
  13. I fixed this! You are so right! Simply placing gsap.registerPlugin(Draggable); inside of useEffect hook fixed this! Thank you so much!! So far my experience with Greensock has been awesome! Something like this: import React, { useEffect } from "react"; import { gsap } from "gsap/dist/gsap"; import Draggable from "gsap/dist/Draggable"; export default function Component() { useEffect(() => { gsap.registerPlugin(Draggable); Draggable.create('#draggablediv', { }); //... }, []); return ( // ... ); }
  14. Thanks for your reply! I was trying to import gsap and Draggable into an empty create-next-app (no animation code at all). I placed gsap.registerPlugin(Draggable) right below where I import gsap and Draggable. It didn't work: triangle.js: import React from "react"; import { gsap } from "gsap/dist/gsap"; import Draggable from "gsap/dist/Draggable"; gsap.registerPlugin(Draggable); function Triangle() { return ( <></> ); } export default Triangle; index.js: import Triangle from '../components/triangle'; export default function Home() { <Triangle /> } Where else should I place the gsap.registerPlugin(Draggable); code then? Thank you!
  15. I installed the zip file by running "npm install ./gsap-bonus.tgz", then tried to import the "Draggable" plugin but failed. If I import like this: import { gsap } from "gsap"; import { Draggable } from "gsap/Draggable"; gsap.registerPlugin(Draggable); ... I get this error: If I import like this: import { gsap } from "gsap/dist/gsap"; import { Draggable } from "gsap/dist/Draggable"; gsap.registerPlugin(Draggable); ... I get this error: PS: I successfully installed and imported the plugin into a "create-react-app" boilerplate project. So there must be compatibility issues with Next.js 12 and gsap....?
  16. Hi @OSUblake I am on Chrome/Mac. Here's the console message. The webpage worked in Incognito mode though, not sure what blocked it in regular mode. Yes, i am using Nextjs! Thanks for your tip!
  17. Hi, thank you for your reply! I have successfully installed customEase and I can see it in my node_modules folder. How to import CustomEase into my React project then? Like I said the installation page isn't working. It shows the same (wrong) import code whatever modules I check on.
  18. The installation page is confusing to me . And I can hardly find how to install "CustomEase" for React. All the links are circular and unclear. https://greensock.com/docs/v3/Installation