Holds the scroll engine state.

Keep this in your model.

import Scroll.Engine.Sub as Sub


type alias Model =
    { scrollState : Sub.ScrollState }

Builder type for scroll animations.

Identifies the scroll surface handled by the engine.

Use Document for the document body, or Container "element-id" for a specific scrollable element.

Initialize empty scroll animation state.

import Scroll.Engine.Sub as Sub


init : Model
init =
    { scrollState = Sub.init }

Start a scroll animation and keep tracking it in state.

import Scroll.Engine.Sub as Sub


type Msg
    = ScrollMsg Sub.ScrollMsg
    | ...


let
    ( newScrollState, scrollCmd ) =
        Sub.scroll ScrollMsg model.scrollState <|
            scrollToElement "target-section"
in
( { model | scrollState = newScrollState }, scrollCmd )

Message type used with update.

Handle messages from this engine.

import Scroll.Engine.Sub as Sub


type Msg
    = ScrollMsg Sub.ScrollMsg
    | ...


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ScrollMsg scrollMsg ->
            let
                ( newScrollState, events, scrollCmd ) =
                    Sub.update ScrollMsg scrollMsg model.scrollState
            in
            handleEvents events <|
                ( { model | scrollState = newScrollState }, scrollCmd )

Subscribe to receive scroll animation updates - without this your scrolls won't run.

import Scroll.Engine.Sub as Sub


type Msg
    = ScrollMsg Sub.ScrollMsg
    | ...


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.subscriptions ScrollMsg model.scrollState

Scroll lifecycle events from this engine.

• Started - A scroll animation began playing
• Ended - A scroll animation completed naturally
• Stopped - A scroll animation was stopped via stop
• Restarted - A scroll animation was restarted via restart
• Paused - A scroll animation was paused via pause
• Resumed - A scroll animation was resumed via resume
• Progress - A scroll animation frame with current position and progress (0.0 to 1.0)

The Container parameter identifies the scroll surface.

You receive these events from update.

Set the delay for all scrolls.

This will be inherited by all scrolls that don't define their own delay.

import Scroll.Builder as Scroll
import Scroll.Engine.Sub as Sub


scrollToElement : String -> ScrollBuilder -> ScrollBuilder
scrollToElement elementId =
    Sub.delay 100
        >> Scroll.forDocument
        >> Scroll.toElement elementId
        >> Scroll.speed 200
        >> Scroll.build

Set the duration of all scrolls.

This will be inherited by all scrolls that don't define their own duration.

import Scroll.Builder as Scroll
import Scroll.Engine.Sub as Sub


scrollToElement : String -> ScrollBuilder -> ScrollBuilder
scrollToElement elementId =
    Sub.duration 1000
        >> Scroll.forDocument
        >> Scroll.toElement elementId
        >> Scroll.build

Set the speed that scrolls should run at.

This will be inherited by all scrolls that don't define their own speed.

import Scroll.Builder as Scroll
import Scroll.Engine.Sub as Sub


scrollToElement : String -> ScrollBuilder -> ScrollBuilder
scrollToElement elementId =
    Sub.speed 200
        >> Scroll.forDocument
        >> Scroll.toElement elementId
        >> Scroll.build

Set the easing function to be used by all scrolls.

This will be inherited by all scrolls that don't define their own easing.

import Scroll.Builder as Scroll
import Scroll.Engine.Sub as Sub


scrollToElement : String -> ScrollBuilder -> ScrollBuilder
scrollToElement elementId =
    Sub.easing BounceOut
        >> Scroll.forDocument
        >> Scroll.toElement elementId
        >> Scroll.speed 200
        >> Scroll.build

Stop a scroll animation by jumping to the target position.

import Scroll.Engine.Sub as Sub


let
    ( newScrollState, scrollCmd ) =
        Sub.stop Document ScrollMsg model.scrollState
in
( { model | scrollState = newScrollState }, scrollCmd )

Pause a scroll animation.

import Scroll.Engine.Sub as Sub


Sub.pause (Container "my-container") model.scrollState

Resume a scroll animation.

import Scroll.Engine.Sub as Sub


Sub.resume Document model.scrollState

Reset a scroll animation to its starting position.

import Scroll.Engine.Sub as Sub


let
    ( newScrollState, scrollCmd ) =
        Sub.reset (Container "my-container") ScrollMsg model.scrollState
in
( { model | scrollState = newScrollState }, scrollCmd )

Restart a scroll animation from its starting position.

import Scroll.Engine.Sub as Sub


let
    ( newScrollState, scrollCmd ) =
        Sub.restart Document ScrollMsg model.scrollState
in
( { model | scrollState = newScrollState }, scrollCmd )

Check if any scroll animations are currently running.

Returns Nothing if there are no animations.

Check if a scroll animation for a specific container is currently running.

Returns Nothing if there are no animations for the container.

Get the current scroll position for a specific container.

Returns X and Y coordinates as a record.

Returns Nothing if the container is not found or scroll position is unavailable.

Get current horizontal scroll position for a specific container.

Get current vertical scroll position for a specific container.