Scale effect does not resize DOM element

[lmschreiber]

Hello everybody,

I am trying to resize an element with scale.
The div stays centered, but I want it at the top and the screen section should scroll in.
Does anybody know, why the DOM element is not resized?
Thanks for your help.

See the Pen mdVvxxJ by lmschreiber (@lmschreiber) on CodePen

[PointC]

Hi @lmschreiber

 

Welcome to the forum. 

 

ScrollMagic is not a GreenSock product. In fact, GS recently released ScrollTrigger. It's much more intuitive and feature packed than ScrollMagic IMHO.

I'd also recommend upgrading to the new GSAP 3 syntax. Here's a handy guide to help.

 

[GreenSock]

57 minutes ago, PointC said:

In fact, GS recently released ScrollTrigger. It's much more intuitive and feature packed than ScrollMagic IMHO.

I heartily endorse @PointC's endorsement of ScrollTrigger

 

1 hour ago, lmschreiber said:

Does anybody know, why the DOM element is not resized?

It kinda sounds like you're expecting the DOM element itself to alter its height/width - is that correct? Keep in mind that when you "scale" an element, that simply applies a transform and transforms never affect DOM reflow. That's what makes them so performant/fast. And that behavior has nothing to do with GSAP - that's how browsers work. If you want the element itself to resize and cause reflow (which I generally discourage), you'd need to animate the "width" and "height" properties of the element instead of the "scale" but that makes it a lot more complex to deal with pinning. It's possible, but tricky.

 

Here's your demo with ScrollTrigger: 

See the Pen acf0d29d74c0abac152d1e90dc877f86?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I think you'll find it simpler to work with, and it uses less kb than ScrollMagic too. Way more features as well.