phollyer/elm-motion/2.1.4

NOTE: the latest version is 3.0.4

Scroll.Engine.Task

Scroll animations as Tasks for when you want results, typed error handling or composition with other Tasks.

📖 See Scroll Task Engine Documentation and Scroll Overview for details.

Use the Builder module to configure scroll targets.

Types

type alias ScrollBuilder =
ScrollBuilder

Builder type for scroll animations.

= Document
| Container String

Identifies the scroll surface handled by the engine.

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

Trigger

= ScrollError
{ container : Container
, targetElementId : Maybe String
, domError : Error
}

Error returned when a scroll task fails.

It tells you what container failed, which target was involved, and the DOM error:

  • container: The container that was being scrolled
  • targetElementId: The element ID if scrolling to an element target
  • domError: The underlying Dom.Error that caused the scroll to fail
type alias ScrollOk =
{ container : Container
, targetElementId : Maybe String
}

Value returned when a scroll task succeeds.

It tells you which container finished scrolling and, when relevant, which target element was used:

  • container: The container that was scrolled
  • targetElementId: The element ID if scrolled to an element target
(ScrollBuilder -> ScrollBuilder)
-> Task ScrollError (List ScrollOk)

Start one or more scrolls as a Task.

You get one ScrollOk for each completed target. If any target fails, the task stops with ScrollError. Use scrollEach when you want every target to run even if one fails.

import Scroll.Builder as Scroll
import Scroll.Engine.Task as Task
import Task


type Msg
    = HandleScrollResult (Result ScrollError (List ScrollOk))
    | ...


Task.scroll (scrollToElement "target-section")
     |> Task.attempt HandleScrollResult

If you need progress, cancellation, or safe retriggering, use Scroll.Engine.Sub instead.

(ScrollBuilder -> ScrollBuilder)
-> Task Never (List (Result ScrollError ScrollOk))

Run each scroll target in order and collect every result.

Unlike scroll, this keeps going after failures and gives you one Result per target.

import Scroll.Builder as Scroll
import Scroll.Engine.Task as Task
import Task


type Msg
    = HandleScrollResults (List (Result ScrollError ScrollOk))
    | ...


Task.scrollEach (scrollSequence "chapter-2")
     |> Task.perform HandleScrollResults

Timing

📖 See Timing for details.

delay : Int -> ScrollBuilder -> ScrollBuilder

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.Task as Task


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

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.Task as Task


scrollToElement : String -> ScrollBuilder -> ScrollBuilder
scrollToElement elementId =
    Task.duration 1000
        >> Scroll.forDocument
        >> Scroll.toElement elementId
        >> Scroll.build
speed : Float -> ScrollBuilder -> ScrollBuilder

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.Task as Task


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

Easing

📖 See Easing for details.

easing : Easing -> ScrollBuilder -> ScrollBuilder

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 Motion.Easing exposing (Easing(..))
import Scroll.Builder as Scroll
import Scroll.Engine.Task as Task


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