Scaling parent and child element

[hanslibuzli 5 Likes (Newbie)]

Hi everyone

 

I would like to share a issue I have with scaling two nested elements at the same time and was wondering if maybe someone would have a solution to my issue.

 

To the task: 

As you can see from the code example I have two elements. A mask and a inner_wrapper. Initially I scale the mask up by the factor 2 (zoom) to make sure the inner_wrapper stays the same width and height I scale the inner_wrapper down by 2. So far so good  Now I would like to tween the two elements (mask & inner wrapper) to there original scale 1. Both elements don't scale in sync and I can see a that the inner_wrapper first gets slightly bigger before it scales down.

 

https://goo.gl/2odpzd

 

Hope someone might know how to tackle that issue!

 

Thanks for your help!  

[Sahil 2,541 Likes (Superhero)]

A simple solution would be to hide overflow. Or better solution would be to not wrap child element inside of it. As far as I can think at the moment, it will take a lot of calculation to determine relationship between both scales so child element doesn't overflow.

[hanslibuzli 5 Likes (Newbie)]

Thanks Sahil for your speedy reply.

 

For demonstration purpose I left the css overflow out. The effect I'm looking for is that I'm able to scale the mask up and down without the inner element changing it's width or height.

[Sahil 2,541 Likes (Superhero)]

Here is how you can do it. _gsTransform object is attached by GSAP on any objects that it animates, it lets you access all transformation properties.

 

See the Pen XzLOOO?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[hanslibuzli 5 Likes (Newbie)]

Thanks Sahil for your suggestion! This seems to work great  

 

Thanks for your help!

[OSUblake 9,990 Likes (Superhero)]

Also check out the exponential scale eases here. They will do the same thing without having to create a new tween on every update.

 

 

 

 

 

[hanslibuzli 5 Likes (Newbie)]

I'm not quite sure on how you would implement that into our example. Could you please elaborate?

[OSUblake 9,990 Likes (Superhero)]

Like this. 

 

See the Pen babjeW?editors=0010 by osublake (@osublake) on CodePen

 

[hanslibuzli 5 Likes (Newbie)]

Thanks for the follow up! That looks interesting. Would you mind and walking me through your code and explain why this is a better approach?

[OSUblake 9,990 Likes (Superhero)]

1 hour ago, hanslibuzli said:

Thanks for the follow up! That looks interesting. Would you mind and walking me through your code and explain why this is a better approach?

 

Turns out that animating scale is actually pretty deceiving. You can read about that and how we ended with that ease function here. The original problem was how to make an infinite zooming animation. Using a regular ease causes the scaling to slow down.

 

 

Don't worry too much about what's going on inside the ExpoScaleEase function. The goal is to possibly add that as an ease to the GSAP library, so just treat it like that for now.

 

For now, all you need to know is how to call it. The first parameter is the starting scale, and the second parameter is the end scale.

 

TweenLite.fromTo(element, {
  scale: 2
}, {
  scale: 1,
  ease: ExpoScaleEase(2, 1)
});

 

That will actually make it look linear, so I added an optional third parameter to pass in a GSAP ease to follow.

 

// Now it will look like it's scaling with a Power3.easeOut ease
TweenLite.fromTo(element, {
  scale: 2
}, {
  scale: 1,
  ease: ExpoScaleEase(2, 1, Power3.easeOut)
});

 

As to why it's better, you no longer have to do this. It's kind of built into the ease.

 

function updateScale(){    
  TweenLite.set(test._mask._inner, {scale : 1/test._mask._gsTransform.scaleX});  
}

 

And creating a new tween 60 times per second can degrade performance. When the browser's garbage collector kicks in, it has to find all those unused objects and delete them, which can result in dropped frames.

 

[OSUblake 9,990 Likes (Superhero)]

Quick follow up. Just make sure that you use an ExpoScaleEase on both the parent and child element.

[hanslibuzli 5 Likes (Newbie)]

Thanks OSUblake for your explanation and follow up. Really appreciate your help.

 

For further animations I would need to update the "zoom" variable to the current zoom level during the animation. But unfortunately "_gsTransform.scaleX" gives me a value from 0 to 1 (for this example I set the original "zoom" to 10) I however would need a value form 10 to 1.

 

function update() {
  zoom = test._mask._gsTransform.scaleX;
}

var tl = new TimelineMax({ repeat: -1, yoyo: true });
tl.to(test._mask, 1, { scale: 1, 
                       ease: ExpoScaleEase(zoom, 1, Power1.easeOut), 
                       onUpdate: update 
                     }, 0);
tl.to(test._mask._inner, 1, { scale: 1, 
                              ease: ExpoScaleEase(invZoom, 1, Power1.easeOut) 
                            }, 0);

 

Thanks for your help!

 

[OSUblake 9,990 Likes (Superhero)]

And that's why I would recommend writing code vertically. It's easier to read, comment out, and spot errors like how onUpdate does not belong in the ExpoScaleEase. 

[hanslibuzli 5 Likes (Newbie)]

44 minutes ago, OSUblake said:

And that's why I would recommend writing code vertically. It's easier to read, comment out, and spot errors like how onUpdate does not belong in the ExpoScaleEase. 

Fixed it

[hanslibuzli 5 Likes (Newbie)]

maybe I'm missing something OSUblake but it did not help with the value onUpdate? It almost seems as the update of the variable did not happen in the "update" function?!

[OSUblake 9,990 Likes (Superhero)]

I'm not sure I understand what the problem is. This works.

 

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

 

[hanslibuzli 5 Likes (Newbie)]

Thanks OSUblake for the follow up! It seems my question is more related to tweening (.to) and setting (.set) a property of the same element in parallel  so maybe its better when I open a new post.

[Sahil 2,541 Likes (Superhero)]

Ya it would be better to start new thread if your problem isn't related to what was originally posted. Also, it would be great if you post a demo.

 

As for your question, you can't simultaneously use set and to on same element's same properties. I mean you can use it but it will have some unexpected behaviors for sure.

 

In first example you can see that, I am animating x for 3 seconds. But within a second I am setting a tween and animating same property. Which takes over any ongoing tween for that property. On next line there is another tween that animates element back to zero. You can comment out either line and you can see that any new tween will overtake ongoing tween.

 

See the Pen YYWGLB?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

In second example I am using overwrite property of tween and setting it to false. Here you can see that new tween takes over ongoing tween but as soon as new tween is finished, animation goes back to where it should have been in first tween. In some cases this can be really useful. Hope that clears up your doubts, otherwise create new thread.

 

See the Pen jYrMeV?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[hanslibuzli 5 Likes (Newbie)]

I experienced some lagging/jittering when I attach the scale fx. to the cursor - this could be because we update the cursor position at the same time as we scale. Thats way my question regarding setting a value while the element is animating.

 

Maybe there is a better way to achieve this? Or is it simply too much for the browser to handle?

 

See the Pen zpBNrO by hanslibuzli (@hanslibuzli) on CodePen

 

[Sahil 2,541 Likes (Superhero)]

Ya that's the reason, though I don't know what you are trying to do exactly. Why are you going through all the trouble of scaling parent/child at the same time? From the demo it seems unnecessary unless your final implementation has some use of it, it will be great if you post your final demo or explain why you are trying to scale elements.

[hanslibuzli 5 Likes (Newbie)]

3 minutes ago, Sahil said:

Ya that's the reason, though I don't know what you are trying to do exactly. Why are you going through all the trouble of scaling parent/child at the same time? From the demo it seems unnecessary unless your final implementation has some use of it, it will be great if you post your final demo or explain why you are trying to scale elements.

 

For the purpose of demonstration I left the overflow property out but in the end I would like that the outer div follows the cursor and scales up when in the right coordinates but the inner div stays in its original scale. Hope this makes sense.

[Diaco 1,948 Likes (Superhero)]

Hi @hanslibuzli

 

Hmm, there's another simpler way;

pls check this out : 

 

See the Pen ppbwqz by MAW (@MAW) on CodePen

 

var zoom = 2;

TweenMax.to('.outer',1,{scale:zoom,onUpdate:function(){
    TweenLite.set('.inner',{z:0.2,scale:1/this.target[0]._gsTransform.scaleX});
  }
  ,repeat:-1,yoyo:true
})

 

[OSUblake 9,990 Likes (Superhero)]

6 hours ago, Diaco said:

Hi @hanslibuzli

 

Hmm, there's another simpler way;

pls check this out : 

 

That's what @Sahil originally did. See my post about the ExpoScaleEase above, and the thread it links to. It should work the same, and I was only suggesting it as another use case so it can be added to the GSAP library. My guess is that it would perform better than manually calculating the scale on every update.

 

 

[Diaco 1,948 Likes (Superhero)]

Quote

That's what @Sahil originally did

 

oops, my bad! 

[OSUblake 9,990 Likes (Superhero)]

Just now, Diaco said:

 

oops, my bad! 

 

No biggie. You weren't here when this question originally was asked, but welcome back buddy!