[Time responding to animation]

On 10/2/2018 at 2:46 AM, GreenSock said:

I notice two problems: 

 

1) You've specifically coded it not to work when the field is empty: 

 

if (x != null && x.length > 0 && x.length <= 9) {

 

So you should get rid of that condition or rework it somehow (I'm not sure exactly what you're trying to do). 

 

2) oninput seems to fire before the new value is registered in the input, so maybe try changing it to:

onkeydown="setTimeout(inputVal, 1)"

 

We really try to keep these forums focused on GSAP-specific problems. General questions like this are probably better suited to a place like Stack Overflow. 

 

Happy tweening!

So sorry for the inconvenience, this was very helpful...

[Time responding to animation]

Hi,

 

I'm doing this login interactive animation, but for some reason there is a bug when I erase all the content on the inputs by holding the erase key, it doesn't go back to original position as I hope, it dissorder all the elements, but instead if I do it by pressing the erase key once at a time for each character works perfect...

 

Can you help me?

 

My best regards

 

See the Pen pxvgXa by reezppo (@reezppo) on CodePen

 

See the Pen pxvgXa by reezppo (@reezppo) on CodePen

[transform translate() moving SVG group]

9 hours ago, mikel said:

Hi @Rezpo,

Did you expect this effect? Use x and y values to move the eyes.
And: both IDs or set a common class like '.eyes':

 

See the Pen ReNGRO by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

This is perfect, thank you so much...

[transform translate() moving SVG group]

13 hours ago, GreenSock said:

First of all, welcome to the forums @Rezpo. 

 

I'm struggling to understand what you're trying to do exactly, or what the problem is. From what I can tell, it's behaving exactly as it should. Are you trying to rotate the eyes instead of scaling them? And why are you trying to change the transformOrigin on the same element multiple times? 

 

Maybe it'd help if you provided a sample/demo of what you do what (behavior-wise) or explain in more detail the difference between what you want and what's actually happening. I may have missed something obvious, but it's just not clear to me. I want to help though. 

Sorry,

 

I'm trying to move the eyes from left to right but as I said, in my research I found that I can only use 'transform' property, so I did try to use transform:translate(); I try doing something like this TweenMax.to('#ojoIZ',1,{transform:'translate(20px)'}); but it didn't work so I try'd using transformOrigin but it doesn't do what I spected

[transform translate() moving SVG group]

Hi everyone,

 

I'm trying to make a login box with an avatar that follow your text on input box, but i'm having a little problem trying to move groups of SVG code <g></g> I did a little research and found that SVG only use transform: translate(); for moving groups I try'd solving it by using transformOrigin:'4px -2px 0',scale:1.5} but seems to modify the origin every time I type something, so it never goes back to the original origin.

 

I know there must be a correct way for doing this.

See the Pen pxvgXa by reezppo (@reezppo) on CodePen

I hope someone can help me.

 

My best regards

See the Pen pxvgXa by reezppo (@reezppo) on CodePen