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

What is Framer? Join the Community
Return to index
Xavi Lnrs
Posted Sep 26 - Read on Facebook

Hey hey ✌️

I used Framer to add interactions and animations to my portfolio. It was originally made using Jekyll (jade and sass). I made a function to import html elements to Framer layers.

you can check it out here: http://fxbr.surge.sh/

Note that using this approach I could use one codebase to create a Framer project that works in different screen sizes.

If you want to know more details about the implementation, just ask. Also, feedback is really welcome 😊

9 Comments

Krijn Rijshouwer

Wow, that looks awesome Xavi Lnrs!

Xavi Lnrs

here's some more gifs: http://imgur.com/a/mxnvS

Benjamin E Saravia

This is amazing! I would like know more details about the implementation :)
** Also I found a bug on your dribble link : "http://fxbr.surge.sh/dribbble.com/jackbach"

Max Wammes

That's insane! Nicely done 🙌

Xavi Lnrs

I'm going to try to explain it as clearly as I can. Note that I'm using the javascript library and not Framer Studio.

1. The html site has all the layers as dom elements marked with css classes prefixed with "fm" (eg ".fm-navbar"). Those elements can exist at the same level than other ones or nested.

2. In the script there's a definition of the hierarchy of those elements in an object literal.

3. A javascript function traverses the dom using the hierarchy definition object. It creates Framer Layers and sets their html attribute to the one found in the dom. It also copies their width and height from the dom element (images and fonts need to be downloaded before this happens).

4. The original body element is hidden and the context element created by framer is the one shown to the user.

From there, proceed as normal. Layers still need to be positioned manually. Some extra layers need to be done (eg ScrollLayers). As magic as it sounds, there's a lot of things to have in mind with this approach. For example:

- The imported dom elements should not be styled, only it's children.

- When resizing the window, layers sizes should change (since the site is responsive). I didn't have the time to implement that.

- There's some Framer settings that you need to know about to make production friendly sites (eg Framer.Extras.Hints.disable() Framer.Extras.ErrorDisplay.disable()). There should be one to disable the cursor image I didn't find yet

Hope this gives an idea of how it works 😊

Marcos Navarro

There's no way I'm going to be able to give any technical input, but from as UX I love how smooth it feels, my only caveat is when you get to the end. It would be good that swiping up at the end would get you back to the index. I think Facebook Paper had such interaction.

Ash Adamson

Would be really cool if there were a step by step to achieving this. it's a little over my head rn 🤔

Xavi Lnrs

Unfortunately I don't have the time to write a post at the moment. I tried to explain it in a previous comment. You can also see the code.

In http://fxbr.surge.sh/scripts/app.js you can see `layers_map` defining the hierarchy of layers that will be imported from the dom. `importDomToLayers` is the function that creates framer layers using that map.

Once all the layers are imported, http://fxbr.surge.sh/scripts/layers.js positions them. In this file I also add methods for each layer.

As for states, I use the router from backbone.js to create a state for each route: http://fxbr.surge.sh/scripts/router.js

Hope the code helps. If in a couple of weeks you are still interested, ping me. I might have the time to write a detailed tutorial.

Have a nice day guys!

Miguel Olave

Very good idea!!

Read the entire post on Facebook