Jump to content
GreenSock

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

Set Tween x value after scaling

Recommended Posts

Hello,

I'm using GSAP to build scroll controlled animation using a timeline.

 

1) I have a container with a list of images, one next to the other, and when I scroll normally (so, vertically), I make the images slide to the left.

2) Sometimes I need to stop the sliding and animate something else (make something to appear and so on), before proceeding again with the sliding. This needs to happen at a specific moment, or position: usually I want one of these images to stop precisely in the middle.

3) the whole thing needs to be responsive

 

I managed to do almost everything, but the point 3. In order to make it responsive, I set a fixed maximum size to the container div and on window loading I check if the window is smaller than this size, in which case I scale everything. So, the scaling works pretty well, but it messes with the calculations I made for the animation.

 

In the pen I created I'm trying to stop the animation exactly when the left border of the third rectangle reaches the black line. At row 32 I'm calling the resize function to set the initial size. If you comment this call out you can see that it works fine, if you leave it, the rectangle will be always slightly off. Why is this the case?

See the Pen gwmPgp by qarlo (@qarlo) on CodePen

Link to comment
Share on other sites

Does this give you a clue?

See the Pen 2f841678bcb24ac25240c98f5b458b0b by osublake (@osublake) on CodePen

 

You need to use the non-transformed distance.

See the Pen ZpZvxo?editors=0011 by osublake (@osublake) on CodePen

 

ok, I'm amazed. I spent hours trying to figure out why I couldn't get the right numbers and it's actually simpler than what I was trying to do.

So, it works, but I'm not totally sure why. The first pen you posted doesn't really explain it to me.

From what I understand, scaling an image or a div doesn't affect the DOM, so I guess this is the only thing that matters. But then, how does it still work when the window is, like, half the width of its initial value?

Sorry, I'm just try to understand it because I'm a bit confused

Link to comment
Share on other sites

In my first pen the browser is reporting the left position for both boxes as being 0. Is it wrong? Nope. The boxes haven't moved, it just looks like it. Huh???

 

Perspective. Look at your hand from a distance. Now move it towards your face. Is your hand growing? No. It's the same size, it just looks like it's getting bigger. When you scale your box, it only LOOKS like the left edge is moving closer/farther to the edge of the screen. It didn't move, nor did it change size. 

 

Basically what you were doing is looking up at the night sky, measuring the size of the moon with a ruler, and reporting it as being 10 inches wide. Logically you were approaching it correctly based on how it appears, but that wasn't working because you weren't viewing it correctly.

 

This stuff can be confusing, especially in 2d because everything is flat. Does that clear some of the confusion? 

  • Like 3
Link to comment
Share on other sites

Perspective. Look at your hand from a distance. Now move it towards your face. Is your hand growing? No. It's the same size, it just looks like it's getting bigger. When you scale your box, it only LOOKS like the left edge is moving closer/farther to the edge of the screen. It didn't move, nor did it change size. 

 

Basically what you were doing is looking up at the night sky, measuring the size of the moon with a ruler, and reporting it as being 10 inches wide. Logically you were approaching it correctly based on how it appears, but that wasn't working because you weren't viewing it correctly.

 

This stuff can be confusing, especially in 2d because everything is flat. Does that clear some of the confusion? 

 

Yes, I kind of understand it. I mean, I get the theory, but still in practice it confuses me a bit. And yes, I guess the 2d makes it even weirder. Thanks very much for the explanation

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