jxy

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.

Done! The text isn't hard at all. I replaced <div> with <text> and put them in the <svg>. Thanks!

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?

This looks amazing! I will study this later! Thank you!

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

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!

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??

I feel the Greensock website is by design not too beginner/user friendly to keep the barriers to entry high haha?

Love your videos!

Just let you know that I successfully implemented your suggestion - triangle as a clipPath to cover the rest of the circles! Thank you @OSUblake !!

Thanks!

Thanks, Cassie! Let me give this a look!

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?

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!

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 ( // ... ); }