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

What is Framer? Join the Community
Return to index
Rich Zarick
Posted Mar 06 - Read on Facebook

Hey all - I've been taking a different approach to using framer.js - integrating it into html code as opposed to importing visuals from Sketch. I'm trying to target and manipulate elements ala jQuery. Where I've been failing is this:

layer = new Layer()
layer.html = document.querySelectorAll("#element").innerHTML

I haven't been able to target pre-existing html elements with the layer.html property; it seems reserved for elements created via coffeescript in app.coffee. Anyone have any suggestions?

5 Comments

Dwayne A Neckles

I'm just catching up and may have missed it but Once you did everything in framer it was still a prototype correct nothing to be used for production... To bad the prototype can't be used in production

Koen Bok

It's probably because they weren't attached to the DOM yet. You can access a layer element directly with layer._element.

Rich Zarick

hmm, not sure I'm being specific enough. It seems like I can't target an element created by markup in the .html file, where the _element event seems to only target markup created by framer.js. Just trying to understand if this is a known limitation of framer and not my mistake?

Sean Mateer

Recently wondering about this too. Rich Zarick, were you able to find a solution? I'm wanting to access html elements added within a framer layer. Have tried pure JS route waiting for document.ready, window.load and the like - may just be a limitation? Or I'm doing something wrong.

Rich Zarick

Sean Mateer - around the time I was using this approach I was brand new to framer, and I was looking for one of two things: a way to integrate pre-existing html code, or a way to use a language I already knew.

My take: don't waste time trying to get framer to work in this manner, it's counter-productive. In hindsight, it was even preventing me from getting the most out what of framer does best, and targeting elements made inside a framer project is way simpler than any CSS or JS selector method.

If you're in the boat of needing to recycle html, and it's urgent - consider using a JS library and stay in your current workflow. Alternatively, if you're having a tough time committing to learning how to use framer without HTML, my answer to you is that it's TOTALLY WORTH IT. The speed of creating content, changing properties, and linking it to something like sketch to offload the visual properties is monumentally faster than any HTML/CSS/JS method I'd ever tried.

TLDR; I threw out the html and remade it entirely inside Framer, and never looked back.

Read the entire post on Facebook