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

What is Framer? Join the Community
Return to index
Ed Chao
Posted Jul 29 - Read on Facebook

Sharing my weekend tinkers. Happy monday fellow framerites.
https://dribbble.com/shots/1660196-CardFeed-Interactions?list=users&offset=0

15 Comments

Julius Gehrig

Beautiful work Ed! love the design and the transitions

Koen Bok

Oh wow. Any chance we could add this as an example to our examples site?

Luca Galvani

Very cool! Can you share some code with us pleeeeaseee? :P Super cool!

Jardson Almeida

Super cool man! :D

Ed Chao

Koen Bok that would be amazing, of course I don't know if my code is up to snuff, but you can grab it here (pinging Benjamin Den Boer): https://dl.dropboxusercontent.com/u/1916165/cardFeed-EdChao.zip

Luca Galvani

Thank you very much, I'm gonna study it for sure! ;)

Billy Carlson

That is awesome Ed. And thanks for sharing the source...

Koen Bok

Ed the coolest thing would be to create a pull request yourself so you show up as the original author in the source. It's described here: https://github.com/koenbok/FramerExamples

If you haven't done it before and it's taking too much time we can add it for you.

Ed Chao

Koen Bok ah, sounds good I'll cut one in a bit. (and done)

Benjamin Den Boer

Hey Ed Chao, I've put the example online for you! I had to tweak a few things for it to work on the full-screen view, so please let me know if I've made any errors / if it feels different.

Tweaks:
- Set superLayers for Info, Logout and Profile layers (profile layers were visible next to screen)

- Use explicit screen dimensions for screenmidX and screenHeight (using window.innerHeight works when previewing in a device in Framer Studio, but breaks when viewed in fullscreen / on the web)

- Use centerX() for all cards instead of midX
- Half the midX animation multipliers (from 4 to 2)
- Half some animation properties (midX)
- Set superLayer for container in profile-view

Benjamin Den Boer
Ed Chao

this is absolutely awesome. (btw, I noticed its not listed on the left column, I'm guessing that's for official examples?)

Benjamin Den Boer

Might be caching, it's located under "Examples" directly below "Android - On Time"

Ed Chao

coolbeans. I see it. Thanks guys, I'm totally stoked.

Jardson Almeida

Wow Ed! That's awesome man!!! :D Congrats.

Read the entire post on Facebook