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

What is Framer? Join the Community
Return to index
Lukas Guschlbauer
Posted Apr 06 - Read on Facebook

Hey Frameristas!

I'm just starting out with Framer and as one of my first prototypes I'm trying to achieve something like the "Clear - Todo App"

The point where I get stuck is that the Utils.modulate for the "check" and "remove" layers doesn't work inside a for loop.

Here's a version with a single "todo"-item, where the "check" and "remove" layers modulate in scale and opacity on horizontal drag and the "todo"-item gets destroyed when it's dragged further than a third of the Screen.width: https://framer.cloud/ynPTY/

When I try to wrap this in a for loop, the modulation doesn't work anymore...

Another problem would be that after destroying the "todo"-item, all items below should move up the height of one item to fill the space.
I tried this by making a for loop that starts at the index of the destroyed item and goes until todos.length and substracted height of one item off of their "y"-position.

But this doesn't seem to work properly either.

This is the "construction site"-version of the prototype, where nothing really works: https://framer.cloud/dllLn/

Can you point me in the right direction?

2 Comments

Krijn Rijshouwer

Hey Lukas,

There is an example in our Gallery by Robert van Klinken that is almost an exact replica of the Clear to do app. Make sure to check it out — https://share.framerjs.com/wrdh290s9qmp/

Dhruv Saxena

Here's an article I wrote about a todo list which does something similar - https://blog.uncommon.is/taking-your-framer-prototype-to-the-next-level-d83553219432#.6r76fxb6y

Read the entire post on Facebook