Apple’s product animations, significantly the scrolly teardowns (technical time period), have at all times been inspiring. However these bleeding-edge animations have at all times used JavaScript and different applied sciences. Plus, they aren’t at all times responsive (or, at the very least, Apple switches to a static picture at a sure width).
I’ve been wowed by CSS’s newer scrolling animation capabilities and questioned if I may rebuild one in all these animations in simply CSS and make it responsive. (In reality, CSS certain has come a great distance since the final try on this publication.) The one I’ll be making an attempt is from the Imaginative and prescient Professional website and to see it you’ll have to scroll down till you hit a black background, just a little greater than midway down the web page. When you’re too lazy errr… environment friendly to go look your self, and/or they determine to alter the animation after this text goes reside, you possibly can watch this video:
Word: Whereas Apple’s model works in all main browsers, the CSS-only model, on the time of this writing, won’t work in Firefox.
Apple’s Animation
The very first thing we now have to do is determine what’s occurring within the authentic animation. There are two main levels.
Stage 1: “Exploding” {Hardware}
Three digital parts rise in sequence from the Imaginative and prescient Professional gadget on the backside of the web page. Every of the three parts is a set of two photos that go each in entrance of and behind different parts like a sub roll round a scorching canine bun round a bread stick. (Sure, that’s a bizarre analogy, however you get it, don’t you?)
The primary, outermost part (the sub roll) includes the frontmost and the hindmost photos permitting it to look as if it’s each in entrance of and behind the opposite parts.
The subsequent part (the recent canine bun) wraps the third part (the bread stick) equally. This gives depth, visible curiosity, and a 3D impact, as clear areas in every picture permit the photographs behind it to indicate by means of.
Stage 2: Flip-As much as Eyepieces
The ultimate piece of the Imaginative and prescient Professional animation flips the gadget up in a clean movement to indicate the eyepieces. Apple does this portion with a video, utilizing JavaScript to advance the video because the person scrolls.
Let’s recreate these, one stage at a time.
“Exploding” {Hardware}
Since Apple already created the six photos for the parts, we will borrow them. Initially, I began with a stack of img tags in a div and used place: fastened to maintain the photographs on the backside of the web page and place: absolute to have them overlap one another. Nevertheless, once I did this, I bumped into two points: (1) It wasn’t responsive — shrinking the width of the viewport made the photographs go off display screen, and (2) the Imaginative and prescient Professional couldn’t scroll into view or scroll out of view because it does on the Apple website.
After banging my head towards this for a bit, I went again and checked out how Apple constructed it. That they had made every picture a background picture that was at background-position: backside middle, and used background-size: cowl to maintain it a constant side ratio. I nonetheless wanted them to have the ability to overlap although, however I didn’t need to pull them out of stream the best way place: absolute does so I set show: grid on their mother or father factor and assigned all of them to the identical grid space.
.visionpro { /* the overarching div that holds all the photographs */
show: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.half { /* every of the photographs has a component class */
grid-area: 1 / 1 / 2 / 2;
}As my logic professor used to say within the early aughts, “Now we’re cooking with fuel!” (I don’t actually understand how that applies right here, however it appeared applicable. Considerably illogical, I do know.)
I then started animating the parts. I began with a scroll timeline that might have allowed me to pin the animation timeline to scrolling the complete html factor, however realized that if the Imaginative and prescient Professional (which means the weather holding all the photos) was going to scroll each into and out of the viewport, then I ought to swap to a view timeline in order that scrolling the factor into view would begin the animation slightly than attempting to estimate a keyframe proportion to start out on the place the weather can be in view (a slightly brittle and non-responsive solution to deal with it).
Scrolling the Imaginative and prescient Professional into view, pausing whereas it’s animating, after which scrolling it out of view is a textbook use of place: sticky. So I created a container div that totally encapsulated the Imaginative and prescient Professional div and set it to place: relative. I pushed the container div down previous the viewport with a prime margin, and set prime on the imaginative and prescient professional div to 0. You may then scroll up until the place: sticky held the imaginative and prescient professional in place, the animation executed after which, when the container had been fully scrolled by means of, it might carry the Imaginative and prescient Professional div up and out of the viewport.
Now, to deal with the part strikes. Once I first used a translate to maneuver the photographs up, I had hoped to make use of the pure order of the weather to maintain all the things properly stacked in my bread-based turducken. Alas, the browser’s sneaky optimization engine positioned my sub roll fully on prime of my scorching canine bun, which was fully on prime of my breadstick. Fortunately, utilizing z-index allowed me to separate the layers and get the overlap that’s a part of why Apple’s model seems so superior.
One other drawback I bumped into was that, at sizes smaller than the 960-pixel width of the photographs, I couldn’t reliably and responsively transfer the parts up. They wanted to be far sufficient away that they didn’t intrude with Stage 2, however not so far-off that they went totally out of the viewport. (The place’s a bear household and a blonde lady once you want them?) Fortunately, because it so usually does, algebra saved my tuchus. Since I’ve the scale of the full-size picture (960px by 608px), and the total width of the picture is the same as the width of the viewport, I may write an equation like under to get the peak and use that in my translation calculations for the way far to maneuver every part.
--stage2-height: calc(min(100vw, 960px) * 608 / 960);Nevertheless, this calculation breaks down when the viewport is shorter than 608px and wider than 960px as a result of the width of the picture is not equal to 100vw. I initially wrote the same equation to calculate the width:
--stage2-width: calc(min(100vh, 608px) * 960 / 608);Nevertheless it additionally solely works if the peak is 608px or much less, and so they each gained’t work whereas the opposite one applies. This might be a easy repair utilizing an “if” assertion. Whereas CSS does have an if() operate as I’m scripting this, it doesn’t work in Safari. Whereas I do know this complete factor gained’t work in Firefox, I didn’t need to knock out a complete different browser if I may assist it. So, I fastened it with a media question:
:root {
--stage2-height: calc(min(100vw, 960px) * 608 / 960);
--stage2-width: calc(min(100vh, 608px) * 960 / 608);
}
@media display screen and (max-height: 608px) {
:root {
--stage2-height: calc(var(--vid-width) * 608 / 960);
}
}I patted myself on the again for my mathematical genius and problem-solving abilities till I spotted (as you smarty pants folks have in all probability already found out) that if the peak is lower than 608px, then it’s equal to 100vh. (Sure, vh is a sophisticated unit, significantly on iOS, however for this proof of idea I’m ignoring its downsides).
So, actually all I wanted was:
:root {
--stage2-height: calc(min(100vw, 960px) * 608 / 960);
}
@media display screen and (max-height: 608px) {
:root {
--stage2-height: 100vh;
}
}However no matter my mathematical tangents (Ha! Horrible math pun!), this allowed me to base my vertical translations on the peak of the Stage 2 graphics, e.g.:
translate: 0 calc(var(--stage2-height) * -1 - 25vh);…and thus get them out of the best way for the Stage 2 animation. That stated, it wasn’t good, and at viewports narrower than 410px, I nonetheless needed to make an adjustment to the heights utilizing a media question.
Flip-As much as Eyepieces
Sadly, there’s no solution to both begin a video with simply CSS or modify the body charge with simply CSS. Nevertheless, we will create a set of keyframes that modifications the background picture over time, reminiscent of:
/* ... */
50% {
background-image: url(imgs/video/00037.jpg);
z-index: -1;
}
51% {
background-image: url(imgs/video/00039.jpg);
z-index: -1;
}
52% {
background-image: url(imgs/video/00041.jpg);
z-index: -1;
}
/* ... */(Since there’s, like, 60-some photos concerned on this one, I’m not supplying you with the total set of keyframes, however you possibly can go take a look at the cssvideo keyframes within the full CodePen for the total Monty.)
The draw back of this, nonetheless, is that as an alternative of 1 video file, we’re downloading 60+ recordsdata for a similar impact. You’ll discover that the file numbers skip a quantity between every iteration. This was me halving the variety of frames in order that we didn’t have 120+ photos to obtain. (You would possibly have the ability to pace issues up with a sprite, however since that is extra proof-of-concept than a production-ready answer, I didn’t have the persistence to sew 60+ photos collectively).
The animation was a bit uneven on the preliminary scroll, even when working the demo domestically.
So I added:
…for each picture, together with the part photos. That helped quite a bit as a result of the server didn’t need to parse the CSS earlier than downloading all the photographs.
Utilizing the identical view timeline as we do for Stage 1, we run an animation transferring it into place and the cssvideo animation and the eyepieces seem to “flip up.”
animation: vpsf-move forwards, cssvideo forwards;
animation-timeline: --apple-vp, --apple-vp;Fantastic Tuning
Whereas a view timeline was nice, the animation didn’t at all times start or finish precisely once I wished it to. Enter animation-range. Whereas there’s a number of choices what I used on all the .halfs was
animation-range: comprise cowl;This made certain that the Imaginative and prescient Professional factor was contained in the viewport earlier than it began (comprise) and that it didn’t totally end the animation till it was out of view (cowl). This labored properly for the elements as a result of I wished them totally in view earlier than the parts began rising and since their endpoint isn’t vital they’ll preserve transferring till they’re off display screen.
Nevertheless, for Stage 2, I wished to make sure the flip up animation had ended earlier than it went off display screen so for this one I used:
animation-range: cowl 10% comprise;Each cowl and 10% check with the beginning of the animation, utilizing the cowl key phrase, however pushing its begin 10% later. The comprise ensures that the animation ends earlier than it begins going off display screen.
Right here’s all the things collectively:
And right here’s a video in case your browser doesn’t help it but:
Conclusion
CSS certain has come a great distance and whereas I undoubtedly used some leading edge options there have been additionally a number of comparatively current additions that made this potential too.
With scroll timelines, we will connect an animation to the scroll both of a whole factor or simply when a component is in view. The animation-range property allow us to fine-tune when the animation occurred. place: sticky lets us simply maintain one thing on display screen whereas we animate it at the same time as its scrolling. Grid structure allowed overlap components with out pulling them out of stream. Even calc(), viewport models, customized properties, and media queries all had their roles in making this potential. And that doesn’t even depend the HTML improvements like preload. Unbelievable!
Possibly we must always add a W to WWW: The World Huge Wondrous Net. Okay, okay you possibly can cease groaning, however I’m not mistaken…
