Jump to content
Search Community

transform translate() moving SVG group

Rezpo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...