From Top to Bottom

[setu]

Hi all, 

I was trying to replicate a website  here is the link of the  site   https://space.ge/ . i  did all the parts of website except the card one that moves from top till end of the page . i tries doing few stuff like pinning and animating based on position but none of them were successful also those aproches are not dynamic enough .

 

so any body have any idea how to achieve that.

[akapowl]

2 hours ago, setu said:

i tries doing few stuff like pinning and animating based on position but none of them were successful also those aproches are not dynamic enough .

 

Welcome @setu

 

These forums don't provide general tutorials on how to do animation X or Y.

 

So if you have any problems understanding how to possibly do something, usually it's best to add a demo with what you have tried so far and where you fail to get it running as you expect. It is much more likely for you to get a helpful answer then.

 

If you inspect that website you linked to in dev-tools, you can see that they use an image for that credit-card which is placed multiple times in different sections (if you resize the window at a specific point, you're even able to see multiple images at the same time)

 

 

 

It looks like from section to section they tween the different images (on x and y as well in the width and height) until they fall into place in the destination section (based on where you start and how you positioned the image initially you would have to calculate that yourself). When the image has reached its destination the old image becomes invisible and the new image becomes visible. Then further on they work with the new image.

 

You can probably do something like that in multiple different ways, but here's an example resembling something like they did on that website. Note, that I did not tween on the width and height here, but the scale of the image instead.

 

I'm not sure though, how helpful this will be, since I have no idea about your setup. It might very well not work at all with the rest of what you have accomplished so far but I think it should be a decent starting point at least.

 

I hope it helps.

 

Edit:

I also make use of smooth-scrollbar in that example (since they also do on that website). Of course, you wouldn't have to do that. And the color change of the dog-image is just to clarify, that it is actually two different images being used.

 

See the Pen cac52732603367f39d9233f49cd224ed by akapowl (@akapowl) on CodePen