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

What is Framer? Join the Community
Return to index
Dan Freeman
Posted Jun 27 - Read on Facebook

I think I need to use an if statement for this scenario but I can't seem to get it to work. I am trying to create an animation similar to the Instagram heart when clicking on a button but on multiple pages. I put the initial buttons in an array and the "hearts" in another. When I create a click event on the buttons it activates the hearts on every page not just the page I am on. This is being imported from sketch not design. Any advice?

5 Comments

Blaine Billingsley

Hey Dan - without looking at your actual code its tough to say for sure. BUT! I would put money that you are a missing a link between which button belongs to which heart and vice-versa. I don't know the best way to handle this and I'm sure one of the many CoffeeScript rockstars can help you better, but I usually use custom properties on the layer to store which other layer I need to mess with. For example:

button = new Layer
# some properties to style your button...

button.heartLayer = new Layer
# heart properties...

button.onClick ->
@.heartLayer.animate
# stuff...

Aalok Trivedi

I don't think this is best way, but as long as the hearts and buttons in their respective arrays are in the same order, this should work (hearts = [heart1, heart2, heart3] buttons=[button1, button2, button3]...)

Clicking on a button corresponds to the 'heart' in the same array position as the clicked button. https://framer.cloud/MQudx

Aalok Trivedi

However, I think your best bet is making a function that creates ONE heart and animation when any button is clicked so you don't have to have a separate heart layer for each instance. It can get messy and hard to maintain if you want to have like 10+ pages

Dan Freeman

Really appreciate the feedback Aalok Trivedi and Blaine Billingsley! I got your initial suggestion to work perfectly Aalok. It would definitely be more efficient to create the heart once and have it fire on each click event like in the example2 you showed. How would I go about doing that if it is a sketch imported layer rather than created in Framer. Right now I have one on each page like example1 that you created.

Dan Freeman

The visual reference helped immensely so thank so much for doing that. What exactly is this "liked = () ->" doing? I am not familiar with the empty () in a flow like this.

Read the entire post on Facebook