John Polacek

Chicago Web Developer

Senior Software Engineer at VEG

Shipping open source on Github

Follow me at @johnpolacek

SuperScrollorama Updates

There are some cool new updates to SuperScrollorama, courtesy of Austrian art director and developer Jan Paepke. From his email to me:

I implemented these new features (the defaults always reflect how the

original version would react):

**new Option “triggerAtCenter” (default true)
**

Usually the animations trigger when the respective Element’s origin is

in the center of the scroll area. Should this not be desired it can

be turned off using this option

**new Option “playoutAnimations” (default true)
**

When scrolling quickly past start or end points by default

play()
or

reverse()
is used to play out every stage of the animation until it

reaches the start or end. Setting this option to false forces a 1:1

link between scroll position and animation progress resulting in an

immediate update of the animation.

**new Function updatePin()
**

Sometimes the pinned animation needs to be changed on the fly. For

example when you want the target Point of the animation being

dependent on window size or when you have a switch where one or

another animation should happen. So I added the

updatePin()
function.

You can change the animation or duration of the pin on the fly.

Technically there should be an

updateTween()
, too for regular

animations but I didn’t get around to write one since I didn’t need

it.

new Function triggerCheckAnim()

Sometimes it’s necessary to trigger the animation Check function not

only on scroll. For example if you have a layout with width or height

at 100% and resizing the window changes the positions of the elements

within. Another example may be when you insert new Elements into the

DOM or resize existing ones.

I resolved these issues:

  • when elements should be pinned that are within other elements
that are positioned absolutely the translation to fixed positioning
was not correct. (parent at left 100 + child left 100 should be child
left 200 when pinned)
  • when elements that are pinned are not positioned using top and
left but bottom and/or right the reset failed (since only top or left
was saved)
  • when scrolling within an area where a pin takes place and then
hitting refresh made the pin get lost (until checkAnim was triggered
from as scroll) This also applies if the pin is supposed to start right
from the beginning of the page.
  • TweenMax and TimelineMax support the repeat feature, which allows
animation to be repeated multiple times. This wasn’t supported by
superscrollorama. It is now (keeping compatibility with TimelineLite).

…So big super-thanks to Jan for making all that happen. Let me know if you run into any issues with the update. And, as always, thanks to Greensock for making an awesome animation platform.