Jump to content

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

PointC last won the day on August 28

PointC had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


PointC last won the day on August 28

PointC had the most liked content!

Community Reputation

10,827 Superhero

About PointC

  • Rank

Profile Information

  • Gender
  • Location
    Seattle area
  • Interests
    web design, motion graphics, 3D animation, video production, all things sci-fi, Mt. Rainier hiking and my dachshunds

Recent Profile Visitors

36,873 profile views
  1. PointC

    GSAP3 Card Flip

    Hi @joeworkman I think you'll achieve the desired results by moving your perspective to the parent container. gsap.set(".quickflip", { transformStyle: "preserve-3d", transformPerspective: 1000 }); Happy tweening.
  2. PointC

    SVG Line rotation

    It looks like that line is 285 units long, but your SVG viewBox is only 41.3 units high so the line extends out of the bounds when you rotate. The simple solution is to set your SVG overflow to visible. svg { overflow: visible; } Happy tweening.
  3. PointC

    GSAP Looped Animations

    Another option would be to set the amount in the stagger object based on the array length. Something like this. https://codepen.io/PointC/pen/c912fe99013c47555e2b9a3b8c3a031e Happy tweening.
  4. If you're not looking for squash and stretch, but just a simple infinite bounce, that's where you'd want to use a circ ease. https://codepen.io/PointC/pen/822a4b48b9ddc37fd1ec3fc5172a5c65 Happy tweening.
  5. I know it feels a little backwards, right? Rather than go into a long winded explanation of the distribution of start times based on the ease curve, I'll let Professor @Carl's video take care of that for us. After you watch this, you should be able to visualize what's happening with your animation. Happy tweening.
  6. Sorry, I looked at that too quickly. It looks correct to me. I adjusted the fork a bit. I boosted the stagger amount to 10 so you can clearly see the letters start and end quickly and really slow down in the middle. https://codepen.io/PointC/pen/2539299fb418b7af0e00e4844bbde224 PS You'd want use either 'each' or 'amount' in the stagger object. Not both.
  7. I'm guessing you meant to place the ease outside of the stagger object. https://codepen.io/PointC/pen/2539299fb418b7af0e00e4844bbde224 Is that what you meant? Happy tweening.
  8. Yeah, for some reason a target attribute of _blank is not connecting to Twitter from any view except debug. A target attribute of _top seems okay from all views. Weird.
  9. Okay, who broke my pen? There is something amiss here. I can reproduce the problem on my iPad in Safari, but Chrome is fine. I ripped out a few pieces from the big demo and made a quick little 3 panel version. https://codepen.io/PointC/pen/ZEWqLVK Setting dragClickables: false does indeed work, but I'm almost certain it was fine when I first made this pen. Though that was a long time ago so... I'm seeing another weird thing on CodePen. If I click my Follow on Twitter link in the editor view, it's blocked in Chrome and Edge. FF is fine. The only way I can get that link to work is from Debug View. I'm talking about desktop too here. Can anyone confirm that for me?
  10. Good point. I keep forgetting that. Back in my day it was only available in the morph plugin. 👴
  11. Correct. Your lines have x1/x2/y1/y2 attributes but no d attribute. You'd want to convert those to paths in your vector software or use GSAP to convert them. The morph plugin can do that for you. You'd simply load that plugin and use this code before your tweens. MorphSVGPlugin.convertToPath("line"); More info: https://greensock.com/docs/v3/Plugins/MorphSVGPlugin/static.convertToPath() Happy tweening and welcome to the forum.
  12. That really turned out well. Great job! Thanks for sharing.
  13. I'd probably just save a bunch of time and use MorphSVG. https://codepen.io/PointC/pen/51987cdfcfcd7bb4080d4d5fe449e5e4 Happy tweening. PS The club comes with a lot more than just MorphSVG. Tons of time saving plugins which also compensate for browser inconsistencies.
  14. Well, you could always join Club GreenSock and get the DrawSVG plugin. If you have that many branches, I'd make a loop and create a rectangle based on the .getBBox() size of the branch paths. Then use them as clip-paths for the branches. The trick will be in the grouping as the branches on the right will need their rectangle scaled left to right and vice versa on the other side. So the animations of the rectangles will be a bit different. See what I mean? You may also have some offshoots that are supposed to grow from up → down or down → up. I don't know for sure since I haven't seen the artwork. Bottom line: You may need to group the branches according to how you'd like them to grow. Does that make sense? Happy tweening.