The other day I stumbled upon this fantastic animation by Akram Khalid which he moreover coded up as part of a tutorial on page transitions with React Router and Framer Motion. The GitHub repo is perhaps found here. It’s a extraordinarily pretty design and I wanted to have a go on experimenting with it and animating the preliminary thumbnail view to a full image (with article), using solely scale transforms.
That’s extraordinarily experimental and it turned out to be a flowery course of. Nevertheless I hope it gives you just a few of type idea and entry degree of how one can pull off these type of animations with out touching the width and peak of a part.
The first idea behind this method is to scale a part after which counter-scale the child. Paul Lewis and Stephen McGruer current how to do that on a menu using enhance and collapse animations. Avoiding animating the width and peak of a part helps keep effectivity in confirm.
So what we do is to initially set the size of the content__intro wrapper to a worth that will make it shrink to an precise measurement. Then we set a counter scale to the image. This could make the image protect the similar measurement as sooner than. Then, we add one different scale to the image, shrinking it moreover the to the objective measurement.
<div class="content__intro content__breakout"> <img class="content__intro-img" src="https://tympanus.internet/img/1.jpg" alt="Some image" /> </div>
Having the preliminary width and peak of a part and as well as the objective dimensions, we’re capable of calculate the size values of the outer wrapper based mostly totally on this:
let introTransform = scaleX: imageSettings.imageWidthEnd / imageSettings.imageWidthStart, scaleY: imageSettings.imageHeightEnd / imageSettings.imageHeightStart, y: (winsize.peak/2 - introRect.excessive) - introRect.peak/2 ;
We moreover switch the issue to be centered on the show (y).
We define these preliminary (start) and objective (end) dimensions as variable in our CSS:
physique ... --image-height-start: 555px; --image-width-end: 260px; --image-height-end: 320px;
Our starting width is 100% of the viewport width, so we don’t should set that proper right here. The image will then have the following scale utilized:
gsap.set(this.DOM.introImg, scaleX: 1/introTransform.scaleX * imageSettings.imageWidthEnd / this.DOM.introImg.clientWidth, scaleY: 1/introTransform.scaleY * imageSettings.imageHeightEnd / this.DOM.introImg.clientHeight );
1/introTransform.scaleX is the counter scale of the outer wrapper. The second value that we multiply makes sure that we scale the image all the best way right down to our desired measurement, just like we did with the outer wrapper sooner than.
And that’s the precept idea behind the scaling magic.
I hope this presents you a kick off point for these type of powerful animations! Thanks for checking it out 🙂