Jump to content
GreenSock

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

PointC last won the day on June 1

PointC had the most liked content!

PointC

Moderators
  • Content Count

    3,812
  • Joined

  • Last visited

  • Days Won

    337

Everything posted by PointC

  1. I'm not seeing the text plugin used in your demo. If you're just looking for the text to appear from the middle line, I'd think a div with overflow set to hidden would probably do the trick. Unless I'm missing something?
  2. @Carl let's give Blake 12 months and if he doesn't get it done, we'll collaborate on a new site and take all the fortune and glory for ourselves. I should probably register the domain before someone else grabs it. snorklmotionpixicodingcreativetricksclubbecauseblakedidntwanttodoit.com
  3. Well yeah. I just didn't want to be rude. I have to write more????? 👀 I'm unofficially planning for 'New Tutorial Tuesdays'. Should fit nicely with taco Tuesday. 🌮
  4. Hey @Victor Work I know this thread is a few weeks old and you probably already solved your problem, but you may find this helpful in the future. It was funny — the day you posted this question I was literally in the middle of writing a tutorial about this very topic. I had to wait for for my new blog launch though. Here's a circle → line animation option for you that is quite smooth and uses the DrawSVG plugin rather than a morph. https://codepen.io/PointC/pen/pogVgGO Tutorial: https://www.motiontricks.com/unwrap-svg-circles-and-ellipses/ Happy tweening and keep your pixels movin'.
  5. I'm not sure I completely follow the desired result, but you could put the letters in a clipPath or mask (along with a rectangle) and then move them outside the bounds of the <rect>. Though I may be misunderstanding the end result here. Here's a pen with text in the mask. Maybe it'll help. https://codepen.io/PointC/pen/qBdpwqj Happy tweening.
  6. Hey fellow GreenSockers A little over five years ago, I took a chance and posted a question on the GreenSock forum. Nobody called me dumb and that was a HUGE relief! So much so that I wrote an entire GS post about it four years ago. It was a turning point for me and my JavaScript journey. Today, I’m taking another big leap in my life and launching a web animation tutorial site. My reasons for doing so are both personal and professional. This thread is a sequel to my One Year post listed above. Call it My Five Year Journey. Personal reasons My life has been full of twists, turns and milestone events over the past few years. I turned the big 50 and ask myself every day how that’s even possible. The memories of getting my first computer (TRS-80) and learning BASIC in the early 80s are so vivid that they feel like it was only a few years ago. Wasn’t it just yesterday I was programming the PET, VIC-20 and Commodore 64 in high school? Time does fly and I’m not getting any younger. I also celebrated my 30th wedding anniversary. That event itself isn’t a reason to start a new website, but the longer I’m married, the more I realize how lucky I am to have a partner and cheerleader with me when I try new things. She has been a tremendous support in this new endeavor. I wonder how I ever talked her into marrying me all those years ago and how she has put up with me for 30+ years. The other recent personal event that has shaped my decision is the one that is affecting us all right now. Seeing the effect of COVID-19 on the world and how it has robbed too many people of their lives and livelihoods has reminded me that time is precious, and you never know what’s around the corner. As they say, seize the day. Professional reasons After taking the leap and posting that first question on the forum, I was hooked on the GreenSock community. I’ve tried to help as many people as I could in my free time. I love seeing someone have that ‘ah-ha’ moment. This new site is an extension of that desire to help and teach. This will be a difficult challenge. It would be far easier to not do this. As a lifelong introvert, I’m far more comfortable in my dark office typing away on the keyboard so this definitely pushes me out of my comfort zone. It will also be a time management challenge to keep posting new content while taking care of clients and still helping on the forum. I’ll do my best. My final professional reason is that this just seems like the universe is pushing me in this direction. I loved computers and programming in my youth, but my career turned to my other loves of video production and photography. Throughout the last decade there have been many forks in the road, and it seems like every decision has led me here. My life has now come full circle. Fear and self-doubt Despite all the personal and professional reasons listed above, there has still been the nagging self-doubt. Will it be any good? Will anyone read it? Hasn’t this already been written? Maybe others don’t have that little voice in the back of their head, but mine starts yelling at me loudly when I try something big. It’s one thing to post an answer in the forum, but quite another to really put yourself out there with a whole new site. After some sleepless nights, I finally found calm from one realization. If I can help even one person with a problem, teach them something new or spark an idea, it will all be worth it. The rest of the fears don’t matter. Life is just too short to be scared or worried. The website’s focus If you know me from the GS forum, you know I love SVGs and making them move with GSAP. The website will, of course, feature a lot of SVGs and GreenSock will power everything. However, my primary focus will be real world projects. I find that I learn best when I’m building an actual project, so I’ll try to keep that as the focus. I’ll have lots of little tips and quick things too, but projects will be the main thing. Frequent visitors to the forum also know I don’t take it all too seriously and joke around a lot. You’ll be happy to know that several of the tutorials feature terrible jokes and puns at no extra charge. Thanks to the GS gang I’ve said it many times before and I’ll say it again. Thank you to Jack( @GreenSock) for creating the tools, but more importantly, thanks for fostering a terrific online community. Had I not discovered GSAP and started hanging around here, I would not know much about JavaScript and the new site would not exist. Special shout-out to @Carl too. He’s already in the trenches with training and tutorials and has encouraged me the whole way as I was getting this thing launched. All my fellow mods — thanks for the help and comradery over the years. You are all awesome! motiontricks.com Finally, without further ado, I introduce you to motiontricks.com My best to all of you. Thanks for reading. Now, let’s get those pixels movin’! 🚀 -Craig (PointC)
  7. Though the URL trick will be handy for the post I'm writing on easing. That way I can have readers click over to the ease visualizer with something complex already entered into the path data. 👍
  8. Yep - that's what I was remembering. Pasting into the orange path data is much easier though. Thanks.
  9. Oh yeah, forgot about that, duh! 🤦‍♂️ I guess I'm on no sleep and suffering from blog writing brain. I think shortly after CustomEase came out there was something about pasting it into a URL. Maybe that was before some features were added. I dunno? Thanks.
  10. I seem to recall a thread where @GreenSock showed a way to paste a custom ease into the URL of the ease visualizer so you could make some tweaks to a complex ease without starting over. I can't locate the thread though and don't remember how to do it. Or am I imagining the whole thing?
  11. ahh... of course. That's makes perfect sense now that you mention it. Why did I always assume GSAP was doing something for us there? 🤷‍♂️ Good assist Blake. Please send your invoice to Professor @Jonathan as I have him on retainer for all my CSS needs and he didn't pop into the thread.
  12. Yep, understood. I guess I was just wondering if there would be some 'under the hood' magic from GSAP to allow the use of camelCase and it would make the conversion for us. If you create a text element and then use GSAP to set x, y and the text-anchor, the x and y don't need to be strings. It works fine if they are though. I don't know if it'd be better to put all the attributes in quotes for consistency. Maybe that would make more sense to someone new? I dunno. Never heard of it. Just updated, but haven't done much testing yet. I'll give it a spin.
  13. I'm writing up a tutorial on dynamically creating SVG elements and need to verify something about the attr plugin. Do hyphenated attributes always need to be a string when setting the value? Using camelCase for hyphenated CSS properties works just fine as they get converted. But something like textAnchor remains camelCase when applied to the element. This is true of all hyphenated SVG attributes. It seems I can use camelCase outside of the attr:{} wrapper and it will work, but that results in style="text-anchor: middle;". // works gsap.set("#a", { attr: { "text-anchor": "middle" } }); //doesn't work gsap.set("#b", { attr: { textAnchor: "middle" } }); // works but results in an inline style gsap.set("#c", { textAnchor: "middle" }); This has always perplexed me a bit and the attr docs don't specifically mention it so I need to ask for the sake of tutorial accuracy.
  14. I can understand that statement. I was super nervous about my first post. I didn't even know how to get the index of an item in an array. This forum is the best. This Sunday marks 5 years since I asked my first question and I've posted once or twice since then. You'll learn a lot and the community is super friendly. If you're ever bored and need something to do, you can check out my origin story. Happy tweening and welcome to the GreenSock neighborhood.
  15. GSAP doesn't have a stop() method. It has a pause() method. Is that what you meant? https://greensock.com/docs/v3/GSAP/Tween/pause()
  16. PointC

    pixi ParticleContainer

    ahh... good to know. I just had that happen the other day with that little dog image I use in all my Pixi tests. I made a duplicate in the asset panel and that seemed to work fine. I'll use the ?v=1 trick next time. Thanks.
  17. PointC

    pixi ParticleContainer

    If you're asking why your sprites aren't showing, you have a cross-origin problem.
  18. I was gonna ask the same thing. Are we talking about thousands of SVG paths here? If so, you could also just use an image for something like that as it might be a tad sluggish performance wise.
  19. It depends on how many elements we're talking about here. If it's just a few copies, I'd echo Zach's advice and prep your artwork in your vector software. If you have hundreds of elements, cloning is one way to go. Here's a simple clone loop. https://codepen.io/PointC/pen/24b436be30b10bd6fc5b840c913b9db6 Or you can create everything on the fly. Here's that option. https://codepen.io/PointC/pen/ac3cac6818d6711f183884373e20fc6b
  20. Sorry @mikel, I'm not following. If you have a path that goes from left → right and you want the target to go from right → left, yes you would use a .from tween. It won't flip or distort your target by doing that. Is that what you meant?
  21. Just to be clear. The text plugin and SplitText are two different things. You're also using the files from either the 'minified' or 'src' directories, correct?
  22. I can think of very few occasions when it would be preferable to use multiple SVGs. I'd almost always recommended one and using groups where needed. As I've said many times, easy SVG animation comes down to three things. Asset prep Asset prep Asset prep Most of your SVG animation work takes place in your vector software. Get that right and the GSAP code will probably be done in a few minutes. Take notes about coordinates while you build and use a background rectangle when exporting so you don't get weird transforms or wacky viewBox settings. Animating the viewBox also works best when keeping the attribute in the same aspect ratio as the entire SVG. Just my two cents. Happy tweening.
  23. Always a good one to bookmark. http://youmightnotneedjquery.com/
  24. Well sure... get all fancy with it.
×