OMG scroll hijacking done right.
This. Instead of hijacking the scroll immediately, the have a small amount of tolerance for normal scrolling before hijacking it to transition to the next section.
Not only that, most of the scroll animation is applied on the Apple Watch images on the right, rather than the content you want to read — the content hardly moves away from the users' scroll.
This shit is really well done.
This scroll hijacking also echoes well the ethereal, throw-stuff-in-the-air atmosphere that their ad campaign tries to perpetuate (see how the watches tilt as the hijacking is triggered and finished). In other words, this is visual design with a clear purpose, unlike many others who only see it as a novelty.
we're ok™ with this now? noted.
IMO it's never done "right", only "less wrong" ;)
(I'm only about 60% serious here)
DN seeing scroll jacking: NEVER DO THIS! THIS IS ALWAYS TERRIBLE!
DN seeing scroll jacking on Apple.com: ITS AMAZING!
I don't think it's as much about it being Apple as much as it's much less invasive than many other implementations. Unless they updated their page recently, the Mac Pro page is one of the worst offenders.
Very nice. I can see an exact copy of this design and code on a Tech Chinese company in 3, 2, 1
Can someone explain to me how they do the Watch perspective animations? Some of them seem to be simple images with a translate3d css animation, but the one where the perspective changes are canvas elements. Do they switch out the picture for every frame? How is loading 30fps not super resource heavy?
Sure, these are SPRITES ANIMATION, you can see a demo here: https://jsfiddle.net/simurai/CGmCe/
for each watch they have exported 1 image with all the 3d effects, and then well you scroll they animate the stripe, using regular movies techniques the result is a VIDEO ANIMATION when you SCROOL.
is slick right?
Yeah, I know about that technique. Though they seem to do it a bit different. I was able to find the assets from 0000 to 0051 - they clock in at around 130kb each, so we're looking at about ~7mb. in total, which isn't too bad. Why are they .jpg's with a purple alpha channel though? I haven't worked with canvas at all, is there any obvious advantage in doing that?
Fascinating anyways, I could dissect apple websites all day...
Edit: I've looked further into this. They seem to apply a svg mask-image in the CSS (0000 - 0051). This safes on file size - the jpg can be much smaller than a png, and can have alpha transparency with a svg mask which is only around a additional 13kb. They do this for all the floating watches on that page and seem to use a png fallback for browsers that don't support css-masks.
As for the canvas animation, I couldn't debug much, but it appears they apply the same method of a jpg and svg mask and redraw the image for each frame.
I love how the scroll slightly adjust its position when it's in between two sections. :)
I saw a different watch menu do you guys have any idea about this?
That's the new Maps app from the update today, right?
Yes it is. I'm wondering if they had UI adjustments in their style guide with this new update.