Layer created is empty even after assigning content to it

Question

I just trying to do a quick prototype following this tutorial:

https://www.youtube.com/watch?v=3zaxrXK7Nac

I'm using my own design for this, the problem is as follows:

When I create a new layer time 8:13 of the posted video and I try to set one of my imported layers as the content of this new layer by using the property image, I get no results.

If I bring this new layer to the screen I can only see black background with transparency, according to the tutorial, it should has the layer I'm assign to it via the image property.

Here is an example of my code:

sketch = Framer.Importer.load("imported/Untitled@2x")

explore_layer = new Layer
    width: 750
    height: 1334
    image: sketch.explore.explore_group
    x: screen.width


sketch.Tab_3.on Events.Click, ->
    explore_layer.animate
        properties:
            x: 0
            y: 0
        curve: "spring(400, 35, 0)" 

Here is also a screenshot of my layers

https://gyazo.com/f3fccf7f38813744ea17d259463fabdc

Answer 1

Framer will always import the groups in the selected page of Sketch, and all the groups on that page will transformed into layers that are available on the sketch object directly. Also: you're now setting the image of a layer to a layer object itself, instead of the image of the sketch layer.

So to get it to work, you need to do a couple of things:

1. Place all the elements that you want to use on the same page in Sketch
2. After importing, access those elements directly from the sketch object (so sketch.explore_group instead of sketch.explore.explore_group)
3. Use the image of the sketch layer, or use the sketch layer itself in your prototype.

Here's an example how it that would look:

sketch = Framer.Importer.load("imported/Untitled@2x")

explore_layer = new Layer
    width: 750
    height: 1334
    image: sketch.explore_group.image
    x: screen.width


sketch.Tab_3.on Events.Click, ->
    explore_layer.animate
        properties:
            x: 0
            y: 0
        curve: "spring(400, 35, 0)" 

Or even shorter, and with an updated animation syntax:

sketch = Framer.Importer.load("imported/Untitled@2x")

sketch.explore_group.x = screen.width

sketch.Tab_3.on Events.Click, ->
    sketch.explore_group.animate
        x: 0
        y: 0
        options:
            curve: Spring(tension:400, friction:35)