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

What is Framer? Join the Community
Return to index
Peter Braunstein
Posted May 05 - Read on Facebook

I am working on creating a Todo list animation. I want the top three list items (Task1, Task2, Task3) to be draggable. However, I only want the user to be able to drag Task2 once Task1 has been completed (swiped to the right). The same goes for Task3. This means unless Task1 has been swiped off the screen, I want Task2 and Task3 to be draggable.horizontal = false.

To do this I thought I could set a variable "firstBoxMoved" and set it equal to False. Then when Task1 is moved off the screen, set the variable to True. Then from there I could use a conditional (if..) to check whether or not that was true to set Task2 and Task3 draggable.horizontal to either true or false.

I have printed out the firstBoxMoved before and after I swipe Task1 off the screen and it shows that it is changing so I don't know why the conditional will work.

If anyone can help it would be appreciated. I am new to Framer but it looks like an awesome community, Thanks.

My prototype:
https://framer.cloud/gezbf

This prototype idea is from Noah Levin on SkillShare.

4 Comments

Peter Braunstein

Note: I changed the firstBoxMoved = false to firstBoxMoved == false, which I think is correct, but now Task2 will not move before or after Task1 is moved off the screen, as before, it could be moved at any point.

Steve Ruiz

Hey, here's my quick fix. I've moved pretty much all that into an object with an array (of your tasks layers), an active layer, and a function that grabs the first item in the array, makes it the active layer, and gives it the draggable stuff. Then, when that item is dragged off screen, it pulls the item out of the array and repeats, making the next item the active item. https://framer.cloud/CKkUJ

Peter Braunstein

Thank you so much!

Steve Ruiz

No problem :)

Read the entire post on Facebook