guiferviz

Hi GreenSock! JavaScript is not my first language and I'm discovering weird things every day. It makes me feel better to know that it still surprises those who have been doing it for years I'm glad to have been able to contribute something to the project, even if it's an insignificant bug that happens once every 10 years ? The TextPlugin is not a solution for me because my use case is based on objects and not HTML nodes, but that custom plugin you wrote perfectly fits my application needs! Thank you so much!!

Hi all! I've found that empty strings are replaced by an unwanted "0" when using `set`. Is there any easy way to avoid that? I know that sometimes is desirable but in some other situations I just need an empty string. Also, I've realized that an "=" sign on the second position of the string produces a "NaN" in the output. I've found that using a list with only one string element solves this issue. Is there any other way of solving this? Thanks!!

I think I got the right solution. Just need to change: return m.apply({ x: 0, y: 0, }); By: return m.apply({ x: to.getBBox().x, y: to.getBBox().y, });

It's me again I'm not sure if opening another thread is the right thing to do, but I post another CodePen here. https://codepen.io/guiferviz/pen/yLaEbzd This time seems that the attribute preserveAspectRatio='xMidYMid meet' is not been taken into account. The green rectangle represent the real size of the nested SVG element (the size specified in width and height attributes). As we cannot resize the red box preserving the aspect ratio, it is centred in the middle. I tell the gray box to move just down the red box and it moves to another position. That position is the good one if we use preserveAspectRatio='xMinYMin meet' but it's not the case in the given example. Have you come across this before? Do you know any solutions? Thanks!!

Thanks @GreenSock!! That makes perfect sense! For some reason I thought it would use the x, y, width and height properties to do the calculation... Thank you for your quick answers, greetings and happy new year!

Hello Zach, thanks for your response! 1. I know it may seem strange without context, but I want the value to be calculated dynamically because I don't know the position of the reference object (the 'to' object). 2. I took the '+=' from the example in the docs: https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.getAlignMatrix() Anyways, in your latest example, if you only change the x="0" of the red rectangle to x="-50" you are not going to get the correct result: https://codepen.io/guiferviz/pen/GRjdRwp

Hi, I have found a situation where the getAlignMatrix function behaves in an unexpected way for me. In the example, the red rectangle should move to the centre and then to the top of the screen and remain half visible. move(0.5, 0.5, 0.5, 0.5) // Move to center. Works OK. move(0.5, 0.5, 0.5, 0) // Move to top and remain half visible. Works OK. move(0.5, 0.5, 0.5, 0) // It should be in the same position, but it moves out of the scene :( So far I've discovered that, if I change the id="to" from the svg tag to the black-stroked rect it works perfect! In my application I have multiple svg's nested, so it's not always going to be possible to do that... PS: Thank you for this library. I've been using it for a few weeks now and I love it!

Thank you Zack! Yeah, I think I'll do that. Thanks for the working example, Object.assign is an useful function. Keep up the good work!

Hello, I am starting a personal project: a framework for making computer science animations. GSAP seems like a great option for this. I want to work with objects so that I don't have to worry about low-level things like the exact position of the screen. I would like to use something like: timeline.to(element, { layout: center(scene), }) Instead of: timeline.to(element, { x: scene.width/2 - element.width/2, y: scene.height/2 - element.height/2, }) My idea is to preprocess the vars object {layout: center(scene),} and return { x: scene.width/2 - element.width/2, y: scene.height/2 - element.height/2,} and let GSAP do its magic as always. I've tried creating a plugin but I don't know how to modify the existing vars. I did a codepen trying to change the original opacity value of 0 to 0.6 (the text shouldn't completely disappear): https://codepen.io/guiferviz/pen/YzGXmrK Of course I can do that preprocessing without using a GSAP plugin, but it would be more reusable to have it as a plugin. Any other approach is more than welcome. Thanks a lot!