Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
violet

ScaleY + translateY

Recommended Posts

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

Link to post
Share on other sites

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.

  • Like 4
Link to post
Share on other sites

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?

Link to post
Share on other sites
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.

Link to post
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.

×