I would not want to be the person responsible for slicing up all those poster layers. Does this effect appear on all movies/shows? That's a lot of production work.
That was actually my main take away from this little exercise. I spent as much time finding/slicing assets to remake the posters as I did writing the code.
Looks like they have a tool for it called Parallax Previewer: https://developer.apple.com/tvos/download/
But still, someone is going to have to do that for all the movie and TV titles.
Yeah the previewer just lets you put all your sliced up layers together. You still have to create them.
I tweeted out my Skyfall layers today if anyone wants to try them out in the Parallax Previewer tool!
I used the Parallax Previewer tool to build out this little experiment in about 5 minutes: Apple TV Parallax App Icon Experiment
If you already have the various assets, I think it will be pretty quick to put these together.
The effect is required for app icons only, and it's only recommended for in-app images. It's such a mountain of work that I imagine it's an effect that'll be reserved for featured or promoted content.
A lot of After Effect guys do this with flat photos. What a crazy amount of work!
I'm sure it could still a reasonable amount of work, but I also imagine that the people creating these likely have access to the original, 'already masked' artwork, and can just create (or recreate) the 3D art without going 'backwards' to mask already composited images.
I know someone who used to specialise in slicing stuff up with a pen tool for movie posters and the like.
I don’t envy their job.
I like the attention to detail where if the mouse goes out of the browser window it animates back to a default state. Though once the mouse reappears in the window it snaps rather than animates to the new state.
Isn't this default browser behaviour?
Considering that all had to be programmed I'm not sure you could call it default browser behavior.
You don't get it.
All I was saying is I have to programmatically turn easing/transitions back on based on entry/re-entry to the window. You can't leave the easing/transitions turned on when it's following the mouse or it gets janky.
I'm detecing a mouseleave event on the window, when that happens, I enable transition effects with easing and animate the poster back to it's default state (programmatically resetting the 3d rotation and the parallax movement of each individually layer). At that point, I again disable the transition effects.
So it's not default behavior.
Very cool! How about adding the glare as well? You can see it in the video at 0:25 on the spongebob poster for example: https://www.apple.com/tv/
Challenge accepted. Gloss added, just now.
Really nice! Great job. I seriously hope that we will see more effects on the web as well. I made one as well, but in After Effects: https://dribbble.com/shots/2238562--Apple-TV-parallax-effect
I signed up just to tell you that I kind of cried a bit when I looked at the js http://benmarkowitz.com/posters/js/main.js
So many duplicated selectors and calculations.. You could get it a lot smoother simply by caching and removing duplication.
Honestly I put this together really fast just to see how close I could get to the effect. I'm a designer by trade and not a js engineer, but I will give it some TLC later and see if I can clean it up a bit.
Sorry it made you cry.
Welcome to DesignerNews, Juha!
I'm not sure signing up just to critique a designer's admittedly "hacked together" JS solution is going to win you many friends around these parts.
Thank you in advance for considering how to constructively build the DN community's knowledge in the future.
I wish your comment was more in the lines of:
...see how much friendlier that was, even though it's expressing the exact same opinion?
Awesome. Although there's a bug with the shadow in Chrome: http://cl.ly/image/0g06123i230J
Ohh, thanks for the tip! Curious if it's still doing it, as I've made some tweaks throughout the morning and I'm not seeing it.
You in Chrome on PC or Mac?
There's also a bug on the moonrise kingdom poster, when you slide the mouse to the bottom left side of the screen
Mac. and it's fixed now, but there's a diffferent issue now http://cl.ly/image/1l1j0V0z313L
Yeah I'm aware of that one. Annoyingly chrome is much more buggy with this stuff than safari for some reason. I'll try to get it sorted out later.
Frustratingly all these shadow bugs are introduced because in chrome 3d animations + css blur filters cause a lot of visual artifacts so I had to come up with a workaround.
Should be fixed now though!
Awesome! I was able to sort the CSS, but not the JS annoyingly.