Any chance to set the origin of the width ? Don't want to expand the element from it's left corner but from it's right. Trying to make some "swipe to delete" thing, with a transparent layer....
Not when animating the width, but you could use the scale property instead, which does allow you to specify the transform origin.
The width should equal the dragged distance of the other layer. And to "delete" the layer, the user has to drag from the right to the left...like the Google Mail App
Nadine, please check the CodePen. Is it what you need? http://codepen.io/akolchenko/pen/BaKcu
No, sorry. Meant something like this http://i.stack.imgur.com/VrQ1W.pngBut I've got a layer on top, with only 60% opacity...that's my problem :(
Why you don't do it with a draggable cell?f.e. https://medium.com/@gem_ray/prototyping-swipe-and-drag-gestures-with-framer-3-2e405d50b600
I've got an inner-padding, so I can't place the underlying layer outside the screen. And that's how they did it in the example or not ?
You can place it under I guess?If you can upload your current framer project it will be easier
This is what I want to achive. And I can't place it under, because it's transparent. If it would be opaque, there would be no problem :)
Here is a quick example that you can fine tune for your need :)https://dl.dropboxusercontent.com/u/4822469/nadia.framer.zip
Just the rough idea: http://codepen.io/akolchenko/pen/KxDiw
Thank you so much Florian Pnn, maybe you can explain what all the numbers and the first section is for ? I really don't get it :DEDIT: Ok, got it to work, but I don't know how ^^
Ok I'll explain in details :
line 1 to 5 : I used Sketch generator so this code is automatically there.
line 8 to 14 : This function map a value to another. A copy/paste from Cemre article : This function, given any value within the range [low1, high1], will produce its equivalent value in the range [low2, high2].
line 17 and 18 : Just a tweak to be able to write redCell instead of nadiaLayers["redCell"] every time.
line 21 to 27 : I display the redCell but reduce its size to 0px. I position it at the end of the current shape and also change the background position to stick to the right instead of center.
line 29 and 30 : I activate the drag option on the cell and disable the y translation.
line 32 to 34 : I mapped the translation on x from the cell to the width and the x position of the redCell. With that the redCell will expand and move exactly at the same speed than the cell.