Hur är de här animationerna gjorda hos Apple?

Inte för att jag har någon vidare koll på detta. Men det är ju inte vidare svårt att lista ut.
Texten är säkerligen animerad "manuellt" via kod.
Tänker du på datorns animationer så är ju detta gjort i ett 3D program, dom har byggt upp datorn i 3D, alla delar osv. Sedan har dom skapat animationerna där, gjort ett långt klipp av det hela som sedan styckats i mindre klipp som sedan spelas upp när du trycker på skärmen.

Anledningen till att bakgrunden blir grå runt datorn när den är animerad är för att klippen är så hårt komprimerade.

Vad jag vet så har man aldrig kunnat se all kod "live" genom att inspektera en sida. Det är ju fortfarande massa kod som inte syns för oss innan den blivit "executad"? Eller? Var länge sedan jag höll på med sådant hära så någon kanske kan rätta mig här.

Klippen i sig kunde jag inte hitta i koden när jag inspekterade sidan med Chrome. Men som du ser i denna skärmdump så ändras koden för varje gång man klickar. Det finns i vilket fall en Div med id:t "videocontainer" som är den div som kommer inehålla videoklippen. Sedan ser du ju att det finns en div som heter "stillcontainer" vilket förmodligen är stillbilden på datorn när den inte är animerad (för att få bättre kvalitet) när all info-text syns.
Längre ned i koden finns det exempelvis massa divs med IDs så som "intro", "computing", "processor". Så det fungerar ju så som jag nämnde tidigare.

Edit*
Efter att ha grävt ytterligare då jag blev nyfiken! Så hittade jag videoklippet:

videocontainer > innerHTML:
<video src="https://www.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fe..."></video>"

Det är alltså inga småklipp utan ett enda långt klipp som helt enkelt pausas på något sätt och byts ut mot en stillbild när den kommit till rätt ställe i videon. Fråga mig inte hur detta fungerar, hax helt enkelt.!

Stillbilder:
stillcontainer > innerHTML:
<img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_1 clip crossFade" style="opacity: 0;">↵ <img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_2 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_3 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_4 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_5 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_6 clip visible crossFade"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_7 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_8 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_9 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_10 clip crossFade"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_13 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_14 clip"><img src="https://www.apple.com/v/mac-pro/home/b/images/stills/desktop/..." alt="" class="still still_15 clip">"