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

What is Framer? Join the Community
Return to index
Mark J Harvey
Posted Jul 15 - Read on Facebook

Hi, I just got Framer and am enjoying it but am having trouble trying to prototype a simple interaction.

It's a left side nav (iPad) and I simply want the buttons on the nav to have views move the content in or out depending on the tab. Right now if I could just get 2 to work it would be great.

The way I need them to work is:
- tap nav button
- content that is y:-600 moves to the front (z-index)
- content then moves to y:0
- content that is to move out gets covered
- content that is to move out then moves to y:-600 only after the new content has covered it. You would not see this transition

These need to happen one after the other, not simultaneously.

Any help is appreciated

3 Comments

Katie Wu

Not sure about the specific animation you want to do but for the tabs you could do something this function (this is kind of pseudocode):
tabChanged = (tabName) ->
-----switch tabName
----------when "tab1"
-----------------do something here like an animation or state change
----------when "tab2"
-----------------do other stuff/animation/state change
----------etc
-----return

And then when your user clicks on tab (tab1.on Events.Click, ->) then you call tabChanged("tab1") to trigger the animation. Maybe not the most beautiful code but I found it more organized that trying to throw all the animations into the Event

Chris Camargo

How I typically approach this:
- Create states for my views... pushLeft, center, and pushRight.
- Manipulate the views by calling states.switch when I want them to move.
- If you want one to happen *after* the other, you can either use Events.AnimationEnd to watch for that layer finishing its movement, or use a delay to ensure that the second movement only happens after the first.

Mark J Harvey

Chris Camargo I am having a hard time getting delays into my states for some reason. Any tips? I've looked through the docs, copy/pasted snippets but they don't seem to work for some reason

Read the entire post on Facebook