A FramerJS implementation of the new Apple TV 3D Parallax Icons.
I created it so I could play around with the depth values and get practice using FramerJS.
- Just edit the index.html or any of the example files to point to your own images.
- You'll need to provide a bgLayer.png, a topLayer.png, and a middleLayer.png. I kept it to 3 layers to keep it simple. The dimensions should be 514x828.
Resources from Apple
Apple provides resources to generate and preview these icons, take a look at "Creating Parallax Artwork", however, it requires a Mac and doesn't allow you to play around with the depth values.
The original prototype was made by Robert van Klinken and was adapted and modified by Tareq Ismail to make loading the images easier. The Inbox icon used in one of the examples was provided by John Mendard. All other graphics and Sketch files were provided by Tareq Ismail