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

What is Framer? Join the Community
Return to index
Joshua Tucker
Posted Jan 12 - Read on Facebook

Can HTML elements added to a layer (with layer.html) be changed by their Framer equivalents?

Example: I have a layer that is 100 pixels wide and 100 pixels hight. I add a canvas element with layer.html that is the same width and height. If I change the layer's width and height, will it change the canvas also?


Ryan Gonzalez

If you have explicit dimensions (not percentage based) set on block level HTML elements, then they won't change height or width based on their parent's size. They'll simply overflow the parent container (or get hidden/scrolled) based on the overflow CSS property set on the parent.

Joshua Tucker

Awesome, thanks. So, if I were to use %, could I use the layer's width or height * (whatever)? Or can I not reference things about the layer itself? From what I've been reading, it seems obvious from an <img> standpoint, but not understanding how I could translate.

However, on another note: if you have a selector for that element (querySelector), then you can call layerElement.[width], for example, and change it that way. In my particular case, I may utilize a modulate to resize so this would suffice. But, it's good to know.

Ryan Gonzalez

Yeah, if you were to use percentage based dimensions the child would resize based on the container. You could try referencing things about the layer in the html (like throwing a style property on the element and setting its width and height based on the layer) but it would take more work to keep it updated.

Joshua Tucker

I'll give it a shot. Always appreciate your help Ryan, thanks!

Ryan Gonzalez

No problem!

Koen Bok

You can also use the change:width event to update anything.

Jordan Robert Dobson

^ ugh I always forget about that one.

Read the entire post on Facebook