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

What is Framer? Join the Community
Return to index
Jorn van Dijk
Posted Jul 11 - Read on Facebook

There's a new prototype, inspired by Google's Material Design Reel, made with Sketch and Framer Studio on Dribbble and the example site.

I've recreated the artwork with the latest Sketch Beta, pulled everything in with Framer Studio and added animation. There's a couple of cool things to play with. A delay on the individual albums makes them move up one after the other. The colourful album info is visible in the Sketch file, but hidden and animated with Framer. And there's a clever way to count up and replace numbers in repetitive objects.

Sketch source file and full Framer project attached, enjoy!

On Dribbble:
https://dribbble.com/shots/1638550-Album-Animation-with-Framer-Studio

On the Framer example site:
http://examples.framerjs.com/#album-animation.framer

5 Comments

Johannes Eckert

Amazing! I would really want to see the transition into the song or into the play button ... Then I would be interested in knowing how much code this needs in JS vs. Prototyping it in android studio?

Aurélien Foutoyet

Thank you !

Andrea Trabucco Campos

Jorn, that looks really fantastic!
Quick question if you care to share: what's your workflow to create these animations of the interface? What programs do you use?
Thanks a bunch!

Robert Gaal

Purrty.

Johannes Eckert

it's so beautiful, I'll make
bg = new BackgroundLayer backgroundColor:"#673EBA"
mandatory for any material design prototype for me :-)

Read the entire post on Facebook