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

What is Framer? Join the Community
Return to index
Wouter Duijts
Posted Sep 18 - Read on Facebook

Hi guys,

We're trying to make our prototype a bit more flexible (and hopefully lightweight to use on a test device) but we encounter some issues/challenges.

Attached is a part of the prototype where I am creating a new class called Card which is an extension of Layer. That card will be implemented on various pages in an array within a scroll component and the information on the card will be retrieved from an external file.

I have two challenges, one of them is a small one (in terms of importance). The small one is that the last 'selected' card in the array will never get a border when clicked. The rest will. What is the reason of this?

The bigger challenge is that I want to change a selected card's size and position to fullscreen. It should overlap all the other cards and ignore the scroll behaviour.
Can I, and if yes how, change the position and size of the new class Card without putting/loading it in another screen?

If have tried to enlarge the background, image and text layers based upon a click on the 'i' icon and that works. But it does not work properly since the items are still locked in the class container.

See attached screenshot of how the card will look like in normal state and in expanded state and the prototype so far.


Ciaran Madigan

First problem - I didn't have the time to fix it for you, but you've got a problem with your for loops. You're attaching three click events to each object.
I'd suggest looking into attaching click events from within the card class itself.

Second problem - Instead of trying to build a really complex card which can do all you want it to do (expand, ignore the scroll component etc), why not create a new card class which has an initial state that is identical to the card you click on. You can pass the x/y etc and it should appear seamless.

Wouter Duijts

Thanks for the comment. I tried to include the click event inside the class but I was not able to refer to the class itself. I also tried to refer to one of the layers inside the class but than that layer failed to take action in a loop. This is what I had inside the class:
background.onClick ->
for background in Card
background.borderWidth = 0 # Error about not being an object
@.borderWidth = 2

Your second answer i do not fully understand. Working with classes is still pretty new to me.
Should I create another class(CardL for example) which extends the Card class or is a copy of it?
How do I animate the Card class to the CardL class?

Read the entire post on Facebook