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

What is Framer? Join the Community
Return to index
Alex Gilev
Posted Apr 01 - Read on Facebook

Guys, need your help

Imagine you have 10 cards and you want to add shadow on mouse hover for the card. Could you help me?
Thanks in advance!

cardsArray = [
card1
card2
card3
card4
card5
card6
card7
card8
card9
card10
]

for card in cardsArray
card.onMouseOver ->
cardShadow()

I want to show shadow for the card which I hover over, but not for all, how can I achieve it?

13 Comments

Ricardo Pedroso

Maybe your cardShadow() function must receive as a parameter what is the cart that will have the shadow...

Alex Gilev

I'm pretty new to arrays, here is what I have

Alex Gilev

cardShadow = ->
for card in cardsArray
card.shadowColor = "rgba(0,0,0,0.5)"
card.shadowX = 0
card.shadowY = 10
card.shadowBlur = 15
card.shadowSpread = 0

Ricardo Pedroso

This way you are applying it to all cards in array.

cardShadow = (card) ->
card.shadowColor = "rgba(0,0,0,0.5)"
card.shadowX = 0
card.shadowY = 10
card.shadowBlur = 15
card.shadowSpread = 0

Try to pass as a parameter the card that you are trying do shadow

Ricardo Pedroso

Edit your loop to:

for card in cardsArray
card.onMouseOver ->
cardShadow(card)

Ricardo Pedroso

I think that you will have to implement a function to do the opposite but to the event MouseOut, just to ensure that the card looses the shadow on MouseOut.

Alex Gilev

hm..doesn't work

Ricardo Pedroso

Can you share the proto with us to see what's happening?

Darin Dimitrov

Just use a for loop and apply the hover state inside it. Effectively this goes through all your cards and applies the effect one by one. Of course, there are many other ways to do it.

Thomas Rekers
Ben Rodenhäuser

Hi Alex Gilev, I think this is what you need: http://share.framerjs.com/fyqxb8gi7i66/ Perhaps the mouseover effect should be a little bit more pronounced, though.

Kevyn Arnott

All the examples work above just as well, but just another approach that optimizes for code organization. For loops can easily get super bloated the more properties you assign to objects. This approach moves all the properties/logic under the object, which also removes the need to worry about this/@, and you just create instances inside the loop, but do whatever makes sense the most sense to you. ¯\_(ツ)_/¯ – http://share.framerjs.com/u8ncawene4i5/

Read the entire post on Facebook