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

What is Framer? Join the Community
Return to index
Rupa Chaturvedi
Posted Jul 01 - Read on Facebook

Hi everyone! I am working on this prototype and could do with a little help. I need the heart icon to change color based on what color is selected from the scroller. How can I achieve that? Also how do I snap each rectangle to the bounding box? Many thanks in advance for your help.

10 Comments

Giles Perry

It's a little bit fiddly, but here's how I'd do it... First save your heart icon as an SVG. Next open the SVG in a text editor, look for where the fill colour is specified and change the code to fill="currentColor". (bonus: if you delete the height and width then when you use the SVG in your prototype it's size will match you size of the layer.) Copy the SVG to the images folder in your Framer project and use code like this in Framer to draw the SVG layer and set it's colour:

heartSVG = Utils.domLoadDataSync "images/heart.svg"

heartIcon = new Layer
size: 24
html: heartSVG
color: "red"
backgroundColor: "transparent"

Rupa Chaturvedi

Giles Perry thanks so much! I followed these steps and got this error msg

Giles Perry

If you've put the in the right location then I can't say why it's not being found. If you share you project I could take a look.

Rupa Chaturvedi

Sure - here is the project - https://framer.cloud/odjYJ

Rupa Chaturvedi

thanks for taking a look!

Giles Perry

Two issues: first the properties after heartIcon = new Layer weren't indented properly (I guess you copied and pasted from my comment above and Facebook removed the tabs). Second the svg didn't include this code: fill="currentColor". I've added it to your project.

Rupa Chaturvedi

Ha! I though I did both steps! So the color of the heart shows red but doesnt change as I scroll through the swatches

Giles Perry

Now that the colour of the heart is set by the color property of the layer you can change the colour programatically e.g. heartIcon.color = "#E31F64" . However, given the colours in you page component are set using hueRotate you probably didn't need any of the stuff above. You could have created an heart icon with a fixed colour and then changed it's hue based on the page index by adding this code to the onClick event
heartIcon.hueRotate = pageScroller.horizontalPageIndex(this) * 10
I've updated your prototype to do this: https://framer.cloud/ajHPH

Rupa Chaturvedi

yay! Thanks so much for taking the time to help me with this. This is AWESOME!

Read the entire post on Facebook