Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Cassie last won the day on April 16

Cassie had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Cassie last won the day on April 16

Cassie had the most liked content!

Community Reputation

306 Leader

About Cassie

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

642 profile views
  1. This one is horrifyingly wonderful https://codepen.io/ste-vg/pen/VwPVZLx
  2. Truly truly cursed codepens
  3. Ah, I misunderstood, easily fixed - just need to add another little tween at the beginning. I updated the pen.
  4. Ah! Amazing. Thanks so much for this Blake.
  5. Amazing. My approaches always feel so clumsy next to yours. 😂 I really want to get more comfortable with utilising maths more in coding over the next while. I tidied mine up a little more. Pretty happy with how jolly it feels. Might pop it on my website. https://codepen.io/cassie-codes/pen/LYxBZEG?editors=0010
  6. Yup. Set myself up for that one.
  7. Everyone was a beginner at some point, even the super smart folks like Blake. ☺️ You have to be bad at something before you're good at it! There's no magic matrix knowledge-download.
  8. Not exactly like the example button - a lot less liquidy, but fun nonetheless! https://codepen.io/cassie-codes/pen/15d1e3d339a64bbed746895dff4990b9?editors=0010
  9. You could use gsap.utils.toArray() to get all the regions, pop and shift the first and last item out and then add them to the timeline with different animations? https://codepen.io/cassie-codes/pen/c449bf643f0af06592f6b289b3dd55e6?editors=0011
  10. Yeah, I agree with Blake here unfortunately. I've got a lot of experience with SVG and I would struggle to recreate this. I would probably approach it like a sprite, create a series of paths for every step of the animation (because I'm stronger setting up in illustrator) and then do an animation using keyframes gsap.to('.startPath', { duration: 1, keyframes: [ {morphSVG: step1}, {morphSVG: step2}, {morphSVG: step3}, {morphSVG: step4}, {morphSVG: step5}, {morphSVG: step6}, {morphSVG: step7}, {morphSVG: step8}, {morphSVG: step9} ] }) But eve
  11. Ahaha! I forgot about that one. ✨ *peers cautiously at the code*
  12. Oh my gosh. I love those wibbly buttons
  13. This in particular is a *wonderful* article https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/
  14. Yeah, interesting. The CSS version is just automagically being forced onto a new composite layer