16 comments

  • Peiran TanPeiran Tan, 5 years ago

    OMG scroll hijacking done right.

    12 points
    • Laurens SpangenbergLaurens Spangenberg, 5 years ago

      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.

      5 points
      • Daniel FoscoDaniel Fosco, 5 years ago

        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.

        3 points
        • Peiran TanPeiran Tan, 5 years ago

          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.

          0 points
    • Duke CavinskiDuke Cavinski, 5 years ago

      we're ok™ with this now? noted.

      4 points
    • Michael GoldkampMichael Goldkamp, 5 years ago (edited 5 years ago )

      DN seeing scroll jacking: NEVER DO THIS! THIS IS ALWAYS TERRIBLE!

      DN seeing scroll jacking on Apple.com: ITS AMAZING!

      1 point
      • Laurens SpangenbergLaurens Spangenberg, 5 years ago

        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.

        1 point
  • Ale UrrutiaAle Urrutia, 5 years ago

    Very nice. I can see an exact copy of this design and code on a Tech Chinese company in 3, 2, 1

    2 points
  • Nik TreiberNik Treiber, 5 years ago

    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?

    1 point
    • Ignacio CorreiaIgnacio Correia, 5 years ago

      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?

      2 points
      • Nik TreiberNik Treiber, 5 years ago (edited 5 years ago )

        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.

        0 points
  • Khaled Islam BouyaKhaled Islam Bouya, 5 years ago

    I love how the scroll slightly adjust its position when it's in between two sections. :)

    1 point
  • Emanuel S.Emanuel S., 5 years ago

    I saw a different watch menu do you guys have any idea about this?

    0 points
    • Adam SelbyAdam Selby, 5 years ago

      That's the new Maps app from the update today, right?

      0 points
      • Emanuel S.Emanuel S., 5 years ago

        Yes it is. I'm wondering if they had UI adjustments in their style guide with this new update.

        0 points