0

I'm designing an animated scroll for a landing page.

I enjoy using framer.js but am having difficulties placing framer layers on my webpage and have them be responsive to browser size. It seems to work fine for mobile prototypes more than browser prototypes.

My solution then became to place the framer layer within a div in the html and have that div respond to my css styling. Unfortunately I can't find a way to this.

I've tried using jQuery and append the layer to my div:

app.js

var Container = new Layer({
  backgroundColor: "transparent",
  width: 400,
  height: 400
});

$(Container).appendTo(".vertical_center")

index.html

<body> 
   <div class="vertical_center"></div>
</body>

I have successfully appended random text just to check that jQuery is working. Has anyone used framer.js for making "assets" that you can embed on your website? How so?

stecd
  • 1,681
  • 6
  • 19
  • 28

1 Answers1

0

Pretty old topic, but if you're still looking for solution then you could overwrite the prototype .. at the top of you script add something like:

Layer.prototype.__createRootElement = function() {
        var element;
        element = document.createElement("div");
        element.id = "FramerRoot";

        element.style['-webkit-perspective'] = 1000;
        element.style.position = "absolute";
        element.style.left = 0;
        element.style.top = 0;
        element.style.right = 0;
        element.style.bottom = 0;

        document.getElementById('wrapper').appendChild(element);
        return element;
    };

not the best way to do it, but it works.

aromka
  • 26
  • 2