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 ( 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


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 - but you may find some useful information from the github repo.

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.

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…

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