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 😊
Wow, that looks awesome Xavi Lnrs!
here's some more gifs: http://imgur.com/a/mxnvS
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"
That's insane! Nicely done 🙌
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.
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 😊
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.
Would be really cool if there were a step by step to achieving this. it's a little over my head rn 🤔
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!
Very good idea!!