A FramerJS implementation of the new Apple TV 3D Parallax Icons.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
framer
images
sketch
README.md
app.coffee
app.js
example_amazon.html
example_googleMaps.html
example_inbox.html
example_medium.html
example_medium_new.html
index.html

README.md

AppleTVParallaxIcons

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.

Example

Instructions

  1. Just edit the index.html or any of the example files to point to your own images.
  2. 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.

Credits

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