general design notes - ActionLabs/Scrollster GitHub Wiki

#Triggering events

  • Start position
  • End position (they call this duration)
  • tweening (transition curve?)
  • Units seem to be something akin to pixels of scroll
  • They are relying on the object's normal dom position to specify it's location on the page. We will need to have users specify this directly.
  • Set pin for a duration freezes the element in place.
  • Setting a pin with no duration freezes that element indefinately.
  • Has a horizontal scroll option. (Sounds like a potential stretch goal)
  • Definition for triggers in horizontal scrolling version looks essentially the same.
  • The program passes along events to the elements giving the:
    • scroll direction: forward or reverse
    • state: whether or not the action is currently being triggered
    • last hit: wether the action triggered a start or end last
    • progress: 0 to 1 decimal representation of the transition's progress
    • All this flows in from an 'update' event triggered on the object. (Need to consider how to usefully pass these events out to the non-famous world.)
  • Some triggers can be set to repeat and animate on it's own while the trigger is active. On exiting the trigger, remains in the last state the item was in.
  • Some will start, run automatically and does not repeat.
  • Some can tween multiple items and space them out evenly.
  • Some elements can contain scroll elements themselves.
  • Has weakness in mobile where a container needs to be created for the entire size of the content on scrolling doesn't work.
  • Parallax scrolling is multiple elements with a difference set in how far they offset over the course of the trigger.
  • Need to be able to set overall properties on the elements such as alpha transparency.
  • ScrollMagic has support for infinite scrolling with dynmaic loading of content. (Worth considering if this can / should be rolled into our component)
  • Some items can have a cascade of events, essentially the items cascades, siticks to the page for a bit and cascades again.
  • scene duration can depend on window height, basically by using a JS call to determine the window height and feeding it into the setup.
  • With Scroll Magic it's possible to combine multiple scroll positions.
  • Might consider two kinds (or more) of sizing options for elements. Perhaps pixels (for those used to them) and percentages (as a better option for responsive content).
  • Possible actions:
    • Alpha
    • Scaling (x, y, and both)
    • Skewing
    • Flipping
    • Positioning
    • Wiping in / out (could be several styles of these)
  • Can probably use all the existing kinds of easing already found in famous and represent them by the same names.
  • Could we have a mechanism for passing in a Famo.us veiw for users that already know how to create these? For instace, perhaps someone could embed a gallery view in a scroll view.
  • ScrollMagic github page for research