Jump to content
Search Community

Relative Scaling

saulgoodman 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 all,

 

I have a very specific situation, where the display objects have an original scaling factor NOT equal to 1 (for example, 0.5, or 0.3333). I am trying to achieve the effect of relative scaling on it. I am aware of the syntax of "+=" and "-=" for relative values. However, since this is scaling we are talking about, it might be a little different. Let me explain.

 

For example, i want to scale the object by a factor of 4, that means i would like the object's dimensions to x4. So if the object is originally 50x50, it will be 200x200. Problem is, if the original scale factor is not 1, and instead is something, say, 0.5, then scale to 4 will in fact increase the object's dimension by 8 times, hence making it 400x400.

 

In a more straightforward example, if i scale it to 1, the object will effectively scale up twice its current dimension to 100x100, where as logically, scaling by 1 should have no effect.

 

i have thought of maybe using "*=", since we're dealing with factors and multiplications. but it doesn't seem to be a valid syntax, and it would also suffer problems when i'm trying to shrink the image back down to its original size. 

 

So i guess my question is, is it possible to scale relatively in my situation?

 

Thank you for your help!

Link to comment
Share on other sites

Thanks for the clear explanation. Any scale operations are always based on the native size of the object or scale 1. One way around this is to multiply your target scale value by the current scale value.

 

The code below will take an object that natively has a width of 100px, scale it down to 0.5 (50px) and then tween it to a scale of "4 * current scale" resulting in a final width of 200px. 

import com.greensock.*;

//get native values
getProps("native");


var scaleOffset:Number = 0.5;
var targetScale:Number = 4;


box.scaleX = scaleOffset;


//get values after changing scaleX
getProps("after scale to " + scaleOffset);




TweenLite.to(box, 1, {scaleX:targetScale * box.scaleX, onComplete:getProps, onCompleteParams:["after tween to " + targetScale]})


function getProps(message){
trace(message, " box.scaleX = ", box.scaleX, "/ box.width = ", box.width)
}


//native  box.scaleX =  1 / box.width =  100
//after scale to 0.5  box.scaleX =  0.5 / box.width =  50
//after tween to 4  box.scaleX =  2 / box.width =  200

Does that work for you?

scaleDemo.zip

  • Like 2
Link to comment
Share on other sites

Thank you so much for taking the time to write me the solution, Carl!

 

The solution seems to be pretty good, as long as i always keep a reference to the original scaleOffset value. I will try it out in my project. 

 

Thank you again!

Link to comment
Share on other sites

Glad to help and happy it might work for you.

You probably thought of this but you can just tack the scaleOffset onto each object

box.scaleOffset = someScaleOffset

TweenLite.to(box, 1, {scaleX:targetScale * box.scaleOffset})
Link to comment
Share on other sites

  • 1 year later...

Hi(:

 

I have the exactly the same problem but i don't have the current scale because i'm using delay.
 

i will explain with an example:

I have shape 100x100 and a list of actions with delay:

1. action = {delay = 0}
2. action = {delay = 2}

i'm going over the actions list and send it to Tweenlite.To function like that:
per action: TweenLite.to($("#shape1"), 1, {delay:action.delay, parseTransform:true, scale:"+=1"});

 

the first action upgrade with 100.

the second action related to the original size (100) and upgrade with 100,
but i want to be related to the current size (200)

 

what  is  happening: 

after the first action: shape = 200,

after the second action: shape = 300

 

what i want to happen:

after the first action: shape = 200,

after the second action: shape = 400

 

thanks,

Link to comment
Share on other sites


I have the exactly the same problem but i don't have the current scale because i'm using delay.

 

 

It sounds like you would need to keep the current scale in a variable and every time you change the scale of your objects you need to update the value of that variable. However, I'm having a tough time understanding what you are trying to do.

Link to comment
Share on other sites

Basically tweenlite always uses the initial state of an element as its starting position,

What I would like to do is call several animations in sequence with a delay between them and have each animation use the current state as its starting position.

 

I.e,

If I have an element with a starting size of 100X100, and I initiate two scale animations on it.

1. delay: 0 sec, duration: 2 sec, scale: 200%;

2. delay: 2 sec, duration: 2 sec, scale 50%;

I would like it to scale up to 200X200 and them return to 100X100, and not to 150X150 as it does currently.

 

Is there a way to configure tweenLite this way?

I would like to avoid managing the delays myself.

 

thanks(:

Link to comment
Share on other sites

  • 5 months later...

Having a slight problem with relative scale. Check CodePen: 

See the Pen BLoGEG by IGaMbLeRI (@IGaMbLeRI) on CodePen

 

The problem is that, I want to make the element grow on mouse hover and return to initial size when the cursor leaves the element, however, it's very very glitchy in this current "implementation" (in the CodePen). Try to quickly run mouse cursor over the circle - it will quickly deflate to almost nothing. 

 

Obviously, this behaviour is due to "mouseleave" tween overriding "mouseover" tween midanimation and takes in the current scale midanimation.

 

Unforunately, I'm having to work with already scaled and rotated (some 180 degrees that for some reason turn upside down with absolute scaling) elements, so using absolute scale is not feasible. So how would I go about "storing" the initial scale value to tween down to it on "mouseleave", possibly? Hope I'm clear in explaining what is needed.

Link to comment
Share on other sites

Having a slight problem with relative scale. Check CodePen: 

See the Pen BLoGEG by IGaMbLeRI (@IGaMbLeRI) on CodePen

 

The problem is that, I want to make the element grow on mouse hover and return to initial size when the cursor leaves the element, however, it's very very glitchy in this current "implementation" (in the CodePen). Try to quickly run mouse cursor over the circle - it will quickly deflate to almost nothing. 

 

Obviously, this behaviour is due to "mouseleave" tween overriding "mouseover" tween midanimation and takes in the current scale midanimation.

 

Unforunately, I'm having to work with already scaled and rotated (some 180 degrees that for some reason turn upside down with absolute scaling) elements, so using absolute scale is not feasible. So how would I go about "storing" the initial scale value to tween down to it on "mouseleave", possibly? Hope I'm clear in explaining what is needed.

 

If you're returning back down to the initial state, can't you just use the value of 1?

$('svg > circle').hover(function () {
  TweenMax.to(this, 0.5, { scale: '+=0.1' });
}, function () {
  TweenMax.to(this, 0.5, { scale: 1 });
});
Link to comment
Share on other sites

As mentioned, over half of the elements I need to work with are pre-positioned, so something like this:

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#obj1234" width="142.4" height="72.1" x="-71.2" y="-36" transform="matrix(1 0 0 -1 2176.0781 647.8819)" overflow="visible" style="opacity: 1;"></use>

and like this:

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#obj12345" width="85.1" height="151.2" id="unkniwn1-2" x="-42.5" y="-75.6" transform="matrix(0.9716 0.2366 0.2366 -0.9716 1576.377 776.5244)" overflow="visible" style="opacity: 1;"></use> 

Have to use Symbols to minimize file size.

 

Please see updated CodePen: 

See the Pen BLoGEG by IGaMbLeRI (@IGaMbLeRI) on CodePen

The mouseover for some reason rotates the element, and moving the cursor out doesn't return it to the original scale.

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...