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

What is Framer? Join the Community
Return to index
Michał Sambora
Posted Feb 08 - Read on Facebook

Hey guys,
I've run into some problem with Ed Chao code for card stack, it doesnt really work on mobile at all and I think it has something to do with Z axis rotation

Source: https://dl.dropboxusercontent.com/u/1916165/edchao_cardstack.framer.zip

Could someone take a look and fix this bug or know other way to make such stack ?

Ps. I'm pretty much new to Framer and never had any experience with code so I'm trying to grasp a little of it from sourcess like this :D

6 Comments

Michał Sambora

Anyone?

Benjamin Den Boer

Hey Michał Sambora! Let's see. The problem is that you're creating a set of layers within a loop that is ranging from [0..20].

This is roughly what happens now: first, "Layer 0" gets created, with an index of 1. Then, layer "1", with an index of 2. And so on.

Since all interactions are based on the position of the layer within the array, the first layer gets placed on top. Yet, this layer has the lowest index in the stack. It can't catch your events because all other layers are effectively placed on top, while visually placed below. Luckily, there is an easy fix, in this case. You can simply reverse the order of your loop:

[20..0].map (i) → ...

Michał Sambora

Hey Benjamin Den Boer . THanks a lot for taking time and looking into this code but reversing the order didnt change a thing here I think. I still can't run it properly on iPhone through Frameless app.

I've resolved dragging cards below the first one with .ignoreEvents but still this whole think is working only in Famer Studio

Benjamin Den Boer

Hey Michał Sambora - not sure if you've already solved this, but I looked into this for you and there's a couple of things going on:

1. The project uses a much older version of Framer.js (you can update it by going to File → Update Framer)

2. All "e.x" and "event.x" lines within the Touch/Drag events have to be wrapped in Events.touchEvent() ( But I think you've got this already ;-) )

I took a look at the code and also updated some other tiny things like using the new Screen.width/height properties instead of hard-setting them. Tested it on an iPhone 6 and it now works and looks properly (on all devices). :-)

See: http://share.framerjs.com/ufgnm6j5qjep/

Michał Sambora

Benjamin Den Boer that is true gold :D thanks a lot for help! Now I have everything working. I'll share results with community soon as I think it might be usefull and someone could probably simplify it a bit. Need more people like you here !

Elliott Malkin

I modified (fixed) this example so that user can only move the top card. http://share.framerjs.com/1d3p6xz979mm/

Read the entire post on Facebook