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

What is Framer? Join the Community
Return to index
Ben Ellis
Posted Sep 19 - Read on Facebook

I wonder if anyone can help me.

I put together a simple prototype that has 6 products, each with an image and then a heart icon.

The heart icon is made up of two separate layers, an off state and an on state. The off state is visible by default and the on state is invisible.

I want to simply toggle the states once the user has tapped on them.

I can do this if I manually position all the elements and name everything individually, but I thought I would try and create everything using a loop.

I can toggle the first layer on/off using 'this', but not the second layer.

Here is a snipper that runs inside the loop, there was another bunch of set up code, but I have removed for brevity.

Thanks in advance

Ben

for index in [0...5]

myLayer = new Layer
myLayer.states.add
on:
opacity: 0;

myOtherLayer = new Layer
myOtherLayer.states.add
on:
opacity: 0;

myLayer.onClick (event, layer) ->
this.states.next();
myOtherLayer.states.next();

3 Comments

Ben Ellis

And here's a screen shot of the code.

Ben Ellis

PS: If I add a second state to the first layer, simply with a different image, then the transition between the two isn't fluid. Hence using two layers.

Ben Ellis

Not to worry, I've fixed this myself now using arrays and sublayers.

Read the entire post on Facebook