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

What is Framer? Join the Community
Return to index
Simon Rood
Posted Jun 05 - Read on Facebook

Hey guys,

Been using framerJS for a while now, but I'm wondering;
I have generated cells with subLayers in them.
Now I would like to switch the state of a subLayer when clicking on a certain cell:
What I am trying to accomplish is:
After clicking a cell I want the text layer (sublayer of cell) to sit on top of the navigation bar. What would be the best way to do this? (Tried removing sublayer and tried selecting sublayer with this) Regards, Simon

3 Comments

Benjamin Den Boer

Hey Simon Rood. You don't necessarily want to remove the subLayer, as that'll mess with the animation and will make your title jump when switching states (if it's suddenly contained within the wrapper layer, for instance, it's x and y positions will be relative to its new container). Here's what you can do:

1. Disable clipping on "cell" → clip: false
2. Remove the second "name" state. So it's only "one" and "default". The "one" state will move it to the navBar →
one: { y: -72, x: 0 }

3. Add the same animationOptions to "name" → name.states.animationOptions = curve: "spring(540,35,10)"

4. You can select the "name" subLayer in your event like this →
this.subLayers[0].states.next()

5. Include a conditional statement within your click event that checks in what state the "name" layer is, and changes it's color to white when it gets placed on top of the navBar.

Here is all of this implemented within your prototype: http://share.framerjs.com/w2ripiuyiuqb/

Simon Rood

Thanks very much Benjamin Den Boer! Clear and helpful explanation.

Simon Rood

Updated, (for now) final version, hope it helps others: http://share.framerjs.com/2xr4dkejm3s4/

Read the entire post on Facebook