Web Developer Reacts To Apple Event (2022) Website

The Full Stack Agency series looks to empower agency owners and freelancers to offer world class digital portfolios such as websites, web apps or digital products.

Web Developer Reacts To Apple Event (2022) Website

Front End Developer Reacts to Apple Event 2022

Taking a look at Apple’s latest product pages after the 2022 March Event.

Episode Transcript

Yesterday or last night or depending on where in the world you are apple released a new set of products and as always the event was high quality and exciting and the products themselves I think are quite cool I thought after the event that I would take a look at their famous product pages to pick up pick them apart look at how they’re being created and see what I can learn from that experience.

I learned a few different tips and techniques that I’m going to then bring on to other projects and I hope you will learn those tips and tricks too so stick around let’s dive in and have a little look at what we’ve got going on here.

I think there are some cool techniques they’re using and it’ll be fun to break them apart so, first of all, we’ve got this fading in thing if I refresh the page the yes so the air kind of moves in and as I scroll down kind of the air kind of fades out uh sorry moves back and the whole thing kind of fades out so if I inspect and then this video should we open that open up open a new window so there you go you’ve got a video that’s playing and I’m guessing they’re just letting it play through and then just pausing on the last frame goes a picture which it’s yeah so that was the there we go so it’s just an image

so it’s just an image and they’re just on kind of got a scroll animation there where is the where are they applying some fade outs going on there oh no they’re fading in black they’re not even fading out it looks like they’re bringing in a black kind of overlay which is kind of cool which is kind of interesting i wonder why they chose to not to do that and not fade it out basically maybe the opacity changing the opacity of like a png or something you probably didn’t get a crest crisp fade so there’s a black overlay so that’s quite cool this is just a kind of video that’s not particularly interesting

then what are they doing here opacity they’re just fading in this text as you kind of scroll down there’s some cool stuff looks quite interesting now this is just a very well very intelligently composed picture or image rather of the ipad and as as they scroll it what are the effects in there yeah so the transforming
matrix

let’s have a look what library they’re using here this to me looks like it’s completely bespoke this kind of scroll on anime on scroll looks very bespoke just have a look to see if there’s any indication of any libraries they’ve used but i doubt they would have used libraries so they’re going to build things from scratch i don’t know really anyway let’s look into this further so these again you might think that they’re using some form of i don’t know some 3js or some lottie or something like that but they’re just the composition of the image is quite nice so that you can get away these rotations and the scale
that’s happening and it looks they’re doing a lot with a little if that makes sense which is quite cool

again here probably the same thing hmm that’s odd they’re using masks look that’s interesting as well how they so how are they masking now if you’ve got with the black background here webkit mask size cool I’ve never used masking before i wonder why they would do that maybe it’s uh because jpegs are a lot like PNG are uncompressed the jpegs are are a lot lighter of course so like maybe masking it out and it’s just a black and white it’s just a bump map it’s obviously uses the white to mask these things out very cool and what is this now so that’s just a video look that’s just a video and they’re playing through

What’s that another video yes they’re doing a lot of these videos playing through and obviously controlling that with the scrolls that’s another interesting thing it’s cool let’s have a look at the uh let’s have a look at the new mac studio beast this video then i’m guessing so that could be, i don’t think that’s ThreeJS as such but that could be some that could be Lottie and just scaling in because you can see the pixel quality just go to crap and then this probably a video yeah that’s another yeah it’s another lotte yes thing they’ve got going on there or something is rendering a video
in the canvas another one another canvas i want to know what they’re doing inside of these again a canvas is there anything that finds a canvas in here comes with video texture that looks like a yeah that’s just adding a class to that this must be a video because it’s user control it must be controlling so making sure that that always starts the right keyframe this could be like three layers placed on top of each other what’s that yes that’s the top yeah it’s just fading between different layers are they PNG’s no just jpeg so using jpegs as much as they can these images are just so slow they slow down your website so much just interested to know how big the images are that they use as well because they they look really crisp some of them look pretty crisp and interesting know what they use to compress those images too that was cool that’s cool to look at if you like it it’s interesting that they’ve used jpegs as much as they can and then masking them out with with the webkit mask thing mask image that’s quite interesting barely any pngs i mean i don’t think they had any pngs to be fair network images jpeg and just doing a lot i’m just doing a lot with what they have to get that performance that’s the thing when a website i did recently we’re just animating a lot of pngs and it just doesn’t it just it’s just clunky it’s just it it’s too it’s very heavy for the for the browser to do so that was really interesting and also playing videos using videos and you know using the mouse position to scroll through those

i think it’s just a combination of looking into clever ways and doing things and working with the art team to just try and get the best out of it not pushing the technology too far making sure it still looks good.

 

Leave a Reply

Your email address will not be published.