Reposition after scale

[rflc]

Hi, this is my first post, and as such, this is a noob question. How can I reset an object's position to the top left corner of its parent after it has been scaled?

Edit: I was abled to solve it, I just needed to reset the transformOrigin property to the top left of the object.

See the Pen ZVEQMJ by rflc (@rflc) on CodePen

[GreenSock]

Glad you solved it - thanks for letting us know. There are a few other ways to do this if you need to actually animate it back, but it's a bit more complicated. Anyway, let us know if you need anything else. Happy tweening!

[rflc]

@GreenSock Thank you so much. I actually have a related question, how can I re-position  an element without position:relative to the center of the screen? I had to position the element with only margins to float text around its initial (final) position. When I try:

 

TweenMax.set('#myElement', {left:"50%", top:"50%", yPercent:-50, xPercent:-50});

 

It actually moves the element to its top left (off screen)

[GreenSock]

Hm, why wouldn't you just set position:relative? Do you have a demo? 

 

You could probably use getClientBoundingRect() and do the math to determine what the x/y values should be, but I noticed you're using relative units like vw/vh, so that won't really work in a responsive way when you do absolute transforms. Again, a super simple demo would be helpful. 

[mikel]

Hi @Halunke,

 

Is this your situation ...

 

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

 

Kind regards

Mikel

 

 

[rflc]

Hi guys, sorry it is taken me this long. 

 

@mikel That's a very clever way to center elements. I need to translate to the center after the element is positioned with CSS in order to make the text to wrap around it. But I will save your technique for the future. Thanks!

 

@GreenSock Exactly, I need this to work in in a responsive design. Below is a demo, basically I want to animate an svg in the center of the screen and then scale it down and translate it back to its original position. Then I want to replace the svg with a picture and display the wrap around text. I worked around some issues and was able to set the parent to position: relative, but I'm still unable to center it in a responsive manner.

 

See the Pen madVGZ by rflc (@rflc) on CodePen

[mikel]

Hi @rflc,

How about this version - calculate the necessary data:

 

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

Tip: autoAlpha

 

Best regards

Mikel

 

 

[OSUblake]

11 hours ago, rflc said:

Exactly, I need this to work in in a responsive design. Below is a demo, basically I want to animate an svg in the center of the screen and then scale it down and translate it back to its original position. Then I want to replace the svg with a picture and display the wrap around text. I worked around some issues and was able to set the parent to position: relative, but I'm still unable to center it in a responsive manner.

 

 

@mikel's got the right idea. There's no rule that says you have to use same element. 

 

Check out how I'm using 3 different elements to pull off a full screen animation here. A "from" element, a "to" element, and a clone to animate between the two elements.

 

See the Pen WwgQEV?editors=1010 by osublake (@osublake) on CodePen

 

 

 

Another option is to reparent your element. The transition is completely seamless.

 

See the Pen REwRpZ by osublake (@osublake) on CodePen

 

 

 

 

[OSUblake]

A better version. Uses the BezierPlugin for more natural looking movement. Best viewed on CodePen. The embedded pen isn't large enough to see.

 

See the Pen GPRmvZ by osublake (@osublake) on CodePen

 

 

 

[rflc]

@mikel  That's a great, concise example and I learned quite a lot from it.  Thank you.

 

@OSUblake Wow thanks for the different examples. That Bezier example is impressive. Really big thanks for your help.

[mikel]

Hi @OSUblake,

 

Your bezier idea is great.
So I tried this ...

 

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

 

As always - a pleasure!

Best regards

Mikel