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

What is Framer? Join the Community
Return to index
Paul Cotton
Posted Apr 10 - Read on Facebook

Any clues as to how I can assign different outcomes for click events to the one button?

Example:
I have a next button and title1, I click next and the title slides out of view to the left, and title2 appears in its place.
I click next again, and title2 slides away, and title3 appears in its place.
I click next, now title3 is gone, and title4 appears.

I could have as many identical buttons waiting in place on top of each other as I need and just .destroy the button being clicked every time, but I feel like there must be a more efficient way.

Or is this a situation where I need to set up multiple states for each item, and animationOption properties when I need them - but then I'm left with the same problem...

Press the button once: trigger state switch for title1, title 2 only
Press button again: trigger state switch for title2, title3 only

18 Comments

Paul Cotton

In the meantime, tried using:

button2 = button1.copy
button1.destroy

And then setting up Events.Click properties for button2 - but this doesn't work because button2 needs to be defined earlier / outside of the previous click event by the look of things.

Josef Richter

can't you just use a single button and do something like currentStep++ on each click?

Paul Cotton

You're probably correct, but I'm largely fumbling in the dark - would you be able to elaborate on appropriate usage?

(I'll be hitting Google in the meantime :D)

Josef Richter

set currentStep=1, then on button click call processStep(currentStep) and currentStep++. The processStep function can have switch/when statement defining the actions for individual steps. Makes sense?

Paul Cotton

Okay, I'm learning how all this works, so this is the first time I've encountered this particular set of functions.

Essentially...

I define a number of steps (somewhere), place the animation events under each of those steps, set currentStep=1 to put the process at the beginner, then on button click call currentStep++?

Josef Richter

depends on what you're doing really. for simple stuff you can just define states for each layer you want to animate. and then use the button to loop through all layers and call layer.states.next on each of them. for more complex stuff (i.e. not only switching layer states) you might want to use the above currentStep approach.

see http://framerjs.com/docs/#layer.states.next

Paul Cotton

Hmm, I think maybe I should get a handle on arrays before I try and tackle currentStep - I haven't attempted anything do with either of them in my (so far) short journey into code.

Paul Cotton

By the way, thank you for your assistance :D

Josef Richter

ah right. that's js/coffescript, not framer. start with framer states and switching between them - these are the basics and there a lot of nice examples in the documentation. play around, it's fun :-) share your creations with the community. +you're welcome

Mike Feldstein

Here's a very simple example that might explain arrays and currentIndexes
http://share.framerjs.com/m5q9lyrghahm/

Paul Cotton

Hey whoa, thanks.

So, I'm just going to comment through this to make sure I understand what's going on here.

items = []
# Creating items as the name / variable of the next array (arrays are indicated by square brackets)

for i in [0..4]
layer = new Layer x: i * 100
items.push layer
# i is the stand in name / variable of objects created in the array? No idea what "items.push layer" is doing, couldn't find it in the Docs.

button = new Layer
y: 200
backgroundColor: "red"
button.html = "CLICK ME"
# Self explanatory!

currentIndex = 0
# Telling us which index (i from before) we are currently at

button.on Events.Click, () ->
items[currentIndex].backgroundColor = "green"
currentIndex++
# for whichever "i" within "items array" is current, change backgroundColor to green, then go to next "i" in array.

Yeah?

Mike Feldstein

array.push() (items.push here) will add whatever you give it onto the end of the array. Its how you build a dynamic collection of things. The rest you seem to get just fine. To do what you were thinking of originally you'll probably want to set all the layers to opacity 0 or put them somewhere off-screen and then animate them into place instead of just changing the background color.

Paul Cotton

Super helpful. I can manipulate that now, and have a good idea of what that's all doing, I think :D

So in this example:
http://framerjs.com/examples/preview/#album-animation.framer

Jorn is putting the album images into the array, by referencing them with:
albums = layerGroup["Album" + count]

...which means that each image is presumably named Album1, Album2, etc in Sketch or Photoshop.

So, I could presumably dictate (as long as I name things correctly)
titles = sketchFile["title" + 1]
in order to refer to imported assets instead of having the array create layers.

Mike Feldstein

Yes.

Paul Cotton

Awesome. This stuff might be simple, but it's still blowing my mind at this point :D

Mike Feldstein

I always like to see the moments of transformation.

Paul Cotton

Well, you and Josef definitely triggered one today!

http://share.framerjs.com/evfs7ksdfx2k/
(just my little personal proof to make sure I was getting it - hit the white button 4 times, get 4 musicians)

Paul Cotton

Next on my plate? If statements :-p

Read the entire post on Facebook