This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Will Anderson
Posted Oct 19 - Read on Facebook

This doesn't relate directly to Framer, but relevant to a prototype I'm working on with Framer.

Trying to wrap my head around how Apple animates shadows / highlights / movement on so many of their landing pages (http://www.apple.com/iphone-7/ is a great example).

Based on a bit of exploration / googling, it looks like it could be a combination of image mapping / webGL controlled through JS. But if anyone has a more educated breakdown of how this is achieved, or could point to any relevant reads/tutorials out there, that would be much appreciated. Really fascinated by the subtle effects / integration with product photography. And hope to *eventually* incorporate some of these learnings into a prototype I'm building.

Also, I could be totally off on how they are approaching this. So please correct me if I'm wrong!

Edit: here's a link to the gif I posted below, which will show an example of the animation

http://imgur.com/a/MF15r

10 Comments

Gavin Atkinson

my guess is they don't do any rendering programmatically but use the same scroll to animation mapping they have employed in the past with studio-recorded footage. Inspector seems to corroborate this but i haven't taken a very close look.

Will Anderson

After a bit more digging, it looks like they might be using a sprite sheet with a beginning frame and an end frame images and animating it in a canvas element. But still not sure on how or why or any big picture questions

Koen Bok

Pulling Apple's work apart is how most of us got better designers, I bet. I know I did :-)

Jaeho Lee

The post reminds me a sony's parallax webpage which was from long time ago. The page is now down( distilled page - https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/) but you may find some useful information from the github repo.

https://github.com/Andrinoid/bemoved

Basically, they draw each frame on canvas whenever scroll event comes.

Joshua Crowley

Apple has a developer tool called Parallax Exporter which I haven't used, but may support some of these techniques/sprite generation. You'll need a developer license to download it I assume.

https://developer.apple.com/library/content/documentation/General/Conceptual/AppleTV_PG/CreatingParallaxArtwork.html

Adam Mazurick

I work extensively with 3D and web and have successfully used this process to re-create the effect. This article covers it more than sufficiently. If of course, I understand your question correctly… https://ihatetomatoes.net/apple-mac-pro-page-deconstructed/

Wilson Miner

It's a video with the seek time keyed to scroll position. They've been doing this for a while (see the Mac Pro page example), but they're getting better/more subtle. :)

Read the entire post on Facebook