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

What is Framer? Join the Community
Return to index
Guus Baggermans
Posted Oct 23 - Read on Facebook

Hey guys, I'm a bit stuck. I'm trying to determine which row is being dragged, so I can remove this row when it's dragged to the edge, as well as move all of the ones below one row up.

I tried to look at the rowNumber variable in the loop, but somehow it always gives me back the length of the array as the rowNumber.

*update*: Solved
Find the code and demo here: http://www.guusbaggermans.nl/generative-gradient-layers.htm

16 Comments

Koen Bok

You are running into scoping issues :-/

This is what is happening:
http://ryanmorr.com/understanding-scope-and-context-in-javascript/

This is how you fix it:
Set the rowNumber on the row itself like row.rowNumber = rowNumber

Koen Bok

If you understand scoping in JS, you are close to an expert JS programmer :-)

Min-Sang Choi

1) create an empty array, 2) change for loop in your code to .map 3) put row into array 4) call array[rowNumber], then it will give you the number you want. here's the code : https://dl.dropboxusercontent.com/u/1614783/FramerJSGradient.coffee

Guus Baggermans

Thanks Koen & Min-Sang! Have it working now :)

Emanuele Salamone

Just use this code on your rows dragEnd and it will work:
http://pastebin.com/Wie6HVvs

Guus Baggermans

by the way Koen, is it just me or is the 'time' animation parameter broken? even in an empty project using the Click animation snippet I can't seem to change the animation duration...

Koen Bok

Yes, time is ignored for spring animations, because the time is a function of the tension and friction of a spring. Damn physics ;-)

Guus Baggermans

Haha ok, should have known that :)

Koen Bok

There is actually a way to do it, but I haven't made that yet.

Guus Baggermans

But then you would be bending reality ;)

Emanuele Salamone

Koen Bok, if I remember correctly, spring animations on iOS ignore time too, so i think you shouldn't bother too much!

David Puerto

This is an aside but I've started a mobile navigation that looks almost exactly like this: same dragging and nearly same gradient choice also! Crazy! Whenever you finish I'd like to see how you solve the horizontal and vertical isDraggingY and isDraggingX and how you tell it to stopDragging and startDragging... Looks awesome though, I prefer this style to having drawers, etc. I think that's why I put it to the side for now since it's a bit too much for me js-wise.

The other spin off, literally, was that when you load new views they were going to spin around like a cube then show the labels.

Guus Baggermans

Ok, I've cleaned up my code and added some functions thanks to the help of the people in this thread. If you want to check it out: http://www.guusbaggermans.nl/generative-gradient-layers.htm

Min-Sang Choi

Guus Baggermans nice! :-)

Benjamin Den Boer

Really nice!

Seoh Char

appreciate your project and slightly got improved(or maybe screwed up) for preventing to scroll both axises simultaneously. if you want, drop this right now. http://codepen.io/seoh/pen/evrLl?editors=001

Read the entire post on Facebook