rwillrich / rect-to-rect-transition

Component for doing smooth animated transitions between two absolute positions

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

RectToRectTransition

This is a component for animating some content between two different containers with absolute positioning and sizing, with two different modes for scaling the content inside of it: contain or cover. All scaling does not affect the aspect ration of the original content (as given by naturalSize prop).

To run the demo, clone the repo, run npm install and npm start. The small container has a fitMode of cover, while the large one has a fitMode of contain. As you can confirm, the white dot keeps the original size besides the scaling being applied, this is done through the scalingFactorCompensation parameter passed to the renderContent render callback prop.

About

Component for doing smooth animated transitions between two absolute positions


Languages

Language:TypeScript 63.2%Language:HTML 17.6%Language:JavaScript 11.7%Language:CSS 7.5%