ScaleY + translateY

[violet]

I'm trying to do a simple animation of a div that "became" another div.

Basically I have a first div (big) and a second div (small). What I would like to do is simply animate the first div changing its translateY and it scaleY.

Individually the transformations work, but together not.

 

Can someone please help me?

See the Pen jOrOwxO by ilariaventurini (@ilariaventurini) on CodePen

[ZachSaucier]

Hey violet.

 

Actually if you look at the transforms that are rendered you can see that both the scale and the translation are being applied. It just doesn't look like the translation is happening when both are applied. This is because of the order of operations in which transforms happen paired with the transform origin that you're using. 

 

By default the transform-origin of every element is "50% 50%" or "center center" (the same thing). Every render the first thing that happens is that your element gets scaled down. Then the translation happens. But there's enough translation in this case to make it look like the element isn't being transformed - it just looks like the element is being scaled from its bottom. But it's not  

 

If you remove the translation you can see the element scaling to its center. 

 

The easiest solution is to simply set the transform-origin of .big to "bottom center" instead. Here's how I'd set it up:

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

 

Side note: You can (and probably should) just use y instead of translateY.

[violet]

Thank you Zach, very helpful!

 

Animation is cool but I think it could be cooler with scrollTo. I updated the codepen. Here the srollTo is triggered when user scrolls on "start". But how can I do the opposite? For example, I would like that when user is scroll up from "end", the scrollTo goes to .big element. How can I do that? Is there a callback on end marker?

Another question: do I need timeline in this simple example?

[ZachSaucier]

3 hours ago, violet said:

how can I do the opposite? For example, I would like that when user is scroll up from "end", the scrollTo goes to .big element. How can I do that? Is there a callback on end marker?

Yep, that callback is called onEnterBack. I highly recommend that you go through the ScrollTrigger documentation as it covers a lot of info including this information  

 

3 hours ago, violet said:

do I need timeline in this simple example?

Since you have two tweens applied to the ScrollTrigger I think it's a good idea to use a timeline. It makes things easier.