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

What is Framer? Join the Community
Return to index
Kevin James
Posted Oct 03 - Read on Facebook

Hi All, I'm trying to create this. Do I create it as a layer and populate and duplicate via info in an array? If this is not the best way suggestions are welcome.

4 Comments

Alan Travis

Have you seen Sergey Voronov's write up: https://blog.framer.com/reusable-components-from-design-mode-in-framer-6fce6bf4bcdd

one caveat about Layer.copy() is that the event listeners are NOT copied... https://framer.com/docs/#layer.copy

Honestly, if you're more comfortable creating the layers in the Design tab I would keep doing that.

When you go to the Code tab you would make copies and position them as described in the post. Additionally, since you have children and siblings within your card you will need to use the selector methods (Also as described in the reusable components post)

For the events... You will need to wire each component to the appropriate "on" events layer.onClick and otherwise... My recommendation for the events is to code them in functions so that the wiring is consistent and a simple one liner.

I made a very small example that creates a circle with a border in design... then copies that 3 times, the first simply having color and changing opacity onClick... the second with a background image that starts at opacity 50%, which also goes to 100 onClick... and the third with is 100% opacity but changes to a randomColor onClick.

You can find the example here: https://framer.cloud/ikLWy

Lukas Guschlbauer

Or use this module, which should be the perfect fit for this use-case: https://github.com/der-lukas/framer-Symbols

Alan Travis

I thought about recommending the Symbols... But thought it might be too much magic just yet... :)

I was thinking Start with design + copy, then jump into the next optimization. Hehe

Lukas Guschlbauer

There you go Kevin: https://framer.cloud/ilNPm

As I said, this was created with the "Symbols"-Module, which is not necessary - you can also do it with the techniques mentioned in the article Alan posted before - but the module gives you more power over the different states and events of your layers!

Read the entire post on Facebook