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

What is Framer? Join the Community
Return to index
Arved Baumgärtner
Posted Jun 01 - Read on Facebook

Hey guys, I have some simple questions to a prototype i started working on:
http://share.framerjs.com/s5q76h19mtwk/

If card1 gets clicked, the heart appears on the card. I added a time declaration to the states, which are getting triggered, but for some reason they don't work, am I doing something wrong here?

Is there a way to apply the same behaviour on card 3 and 4, without writing the same code again? (like a css class).

Card 2 is triggering a detail view which I would like to scale from the center of the card, no matter where its positioned. I tried combine their y.value, but without success :/

I'm thankful for any help :)

2 Comments

Yuhki Yamashita

1. For the time declaration, you can't set this in the state itself. Instead, you set it in heart.states.animationOptions. Think of the state just being a description of what the end state should be, rather than information about the transition.

2. If you want card3 and card4 to have the same behavior, the cleanest way is probably to create and use a module. But if you don't want to bother, you should just be able to put all your cards in an array, then loop through to attach event handlers and define other behaviors.

3. I'm not sure exactly how you want this to look like, but one quick way to do this is could be... 1) on click of card2, immediately reposition cardDetail, which is still invisible, to be centered on card2 (this might be trickier than it sounds, depending on how the layers are organized... if cardDetail doesn't have a parent layer, you could set its midY to be card2.screenFrame's midY. Note that just using card2's midY won't work because that will give you coordinates relative to the scrollview. screenFrame is really useful for giving you absolute coordinates relative to the screen.) 2) once repositioned, change to the expanded state of cardDetail (which you already have the correct setup for, except the time bit explained in #1).

Hope that helps!

Arved Baumgärtner

Thanks a lot Yuhki! :)

Read the entire post on Facebook