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


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

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