Callback Duration

Use a function returning a scene's duration.

In certain cases a scene's duration is subject to frequent change – for example when it depends on user input, like in the scene below.

Sure, you could update the respective scene's duration whenever that value changes, but this will get confusing when multiple scenes depend on the same value.

For these cases ScrollMagic offers the possibility to supply a callback function as the duration. It is very important that this callback executes FAST as it will get called a lot. So if you need to retreive things like element positions or sizes (that take time to calculate), make sure to cache them in a separate variable and make the callback return it.

On this page you can see how to use this technique to have the duration be dependent on the vertical mouse position within the viewport. Move the mouse up and down to see the duration change accordingly.

view source

Da Flippity Flop

view source