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

What is Framer? Join the Community
Return to index
蘇伯方
Posted Jul 15 - Read on Facebook

Framer is a great tool with high potential. Recently I've been trying using it to create an interaction a little bit like 'cover flow'. You drag a strip of cards and the cards will have animations corresponding to your drag.
Is there a example I can follow? Another part of this question is, instead of create 10 cards 1 by 1, is there a way I could use a loop statement to create 10 different cards?

Thanks!

7 Comments

Koen Bok

You can use a loop with the .copy() function like this:

http://cl.ly/3439373v2Z07

蘇伯方

Thanks! now I have figure out how to make it animate along with the drag or horizontal scroll

William Hutter

Kaba, please update us if you managed to make it work!

Thijs De Mooij

I was trying something similar, i will post it tomorrow when its finished..

蘇伯方

https://www.dropbox.com/s/415yh3fjn2zf5i7/beads.framer.zip this is what I was trying to prototype. This is the first time I use web technology for such a complex interaction. Please bear with me for the messy code. I'm still looking for ways to avoid the heavy UI update in each scroll/dragmove event.

Thijs De Mooij

I finished the prototype. You can download the source here http://drbl.in/lJBA, maybe it answers some of your questions..

蘇伯方

that's really nice! thanks for sharing

Read the entire post on Facebook