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

What is Framer? Join the Community
Return to index
Chris Camargo
Posted May 15 - Read on Facebook

Can anyone explain to me what exactly is being passed into the scrollView.on function? What is "offset" in this context? I've seen this pattern before, but never really been clear on what's being passed here, what its called, and how it's used.

This is from the sticky-headers example:
http://framer.com/examples/preview/#sticky-headers.framer

11 Comments

Andreas Mitschke

Should be the offset of the layer relative to the screen in negative, in this case. E.g. that means how many "negative" pixels is the layer away from top screen on the y-axis/vertical.

That's how a fixed position is simulated: record the move event and how many pixels it is gone from the top and add that to the height of the nav/header element for a new y pos.

(I really do not like coffee. I really think this would be easier to understand if it would be vanilla)

Chris Camargo

Okay, I think I'm getting this. Re-reading the docs, it appears that the first argument is always related to the Event, and it may not always return the same information from Event to Event. Is that correct? Is this just a matter of trying each Event and seeing what the first parameter returns, or is there a documented list of what we can expect from these Events?

http://framerjs.com/docs/#events.events

Fran Pérez

That's basically an object that the event returns every time is called. It has several things, like the offset:

Andreas Mitschke

Right, the first argument contains event data(object). This is here named "offset" for "simplification" reasons though it obviously doesn't work as simplification ;)

Regularly, you'd always name it "event" or like in normal code simply "e" - e.g. function mouseMove (e) {}

I actually do not see a list of event return methods.

EDIT:
Fran Pérez Though the default returned method is offset in case of move ?
(I must admit, I didn't use framerjs all so often,otherwise I'd have more experience)

Fran Pérez

Nope, it doesn't matter what name you choose (event, e, or offset) as long as it's the first parameter. In the screenshot he is referring to the ".y" property within the event object. If the parameter name were "event" instead of "offset" you could access the value like this: event.y

Andreas Mitschke

Fran Pérez a right, I overlooked that. So offset is, as I was assuming in first place, kinda deceptively named as it creates the suggestion to call an offset parameter of the event object,which does exist, but instead it just creates it's own offset calculation based upon negative y.pos.

Sticking to basic js code best practice would be recommended here as well. Using e/event would have prevented someone like Chris Camargo to misunderstood the argument.

Fran Pérez

Indeed :)

Chris Camargo

Thanks for the dialog, gents. Very informative. I'm getting this now. :)

Jordan Robert Dobson

Not so scary anymore now is it Chris. :P

Chris Camargo

Before I commit a bit of CoffeeScript, I like to ask myself, "What would JRD do?"

Jordan Robert Dobson

Ha... Awesome.

Read the entire post on Facebook