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

What is Framer? Join the Community
Return to index
Matt Asanuma
Posted Nov 16 - Read on Facebook

Noob Question here - this is killing me...

I'm trying to play with the auto-code > properties editing panel in the code view. When I add an animation onto something that was created in framer using the rectangle or oval tool, the IDE gives me a little menu button to the left of that code snippet that I can click on to access the animation properties. However, when I add an animation onto something that was created in Framer using the icon list, I don't get that properties button to the left of the code snippet. Any thoughts on what I can do to fix this?

13 Comments

Alan Travis

Put the icon inside a layer... Make is a child, and then you have the layer itself,to animate.

This also gives you the option to add backgroundColours, borders, radius etc... On the layer that contains the icon.

Matt Asanuma

Alan Travis Thanks - How do I create an empty layer? or do I just have to create a rectangle/oval with 0 opacity to put it inside?

As for the original question - the odd thing is that in the tutorial it's just an icon, and the tutor is still able to access the animation properties. I verified by looking at her hierarchy and the little icons beside the hierarchy names. My project was built the same as hers, from what I could tell, but I couldn't access those properties :(

Alan Travis

1) did you give the icon a target name so you can access it in code?

I'm not sure if something in FramerStudio has changed to exclude icons... Next time I sit down at my computer I'll give it a try.

2) yes, you can draw a rectangle/oval around the icon...

Pro-tip... Like in Sketch, cmd-click in design will allow you to select a specific layer.

Matt Asanuma

yes, I made sure to make the icon targetable in the design panel. I can add an animation to it by clicking animate>layer>[target layer] on the left column. I get the animate code snippet, I just don't get the little hamburger/menu button to the left of the code snippet which allows me to access the auto-code properties.

Alan Travis

Do you have some code for the icon already?

The hamburger will disappear depending on syntax...

Toss a screen shot in here if you would plz

Matt Asanuma

sure! one sec - and thank you for your help!

Matt Asanuma

as you can see the heart object (icon) and the square object (rectangle tool) are both at the same level in the hierarchy. Both code snippets were added by clicking "animate>layer>[target layer]" on the far-left column of options in the code view. The code-snippet associated with the square has the hamburger directly to the left of it, while the code snippet associated with the heart does not.

Matt Asanuma

no changes were made to the code-snippets which were both generated by the animate>layer>[target layer] process

Matt Asanuma

I will say that doing as you suggested (nesting the icon within its own layer and animating the layer) gives me the results that I desire. I'm simply confused by how the other person got theirs to work.

Alan Travis

I think this has to be a bug in studio...

The good news however is that You're learning the intricacies of .animate because of this issue.

Matt Asanuma

Alrighty haha

Alan Travis

Matt Asanuma

Lol

Read the entire post on Facebook