Smoothly scroll to an element or position on the page with a spring animation.
A type containing all information to get us to our destination during an animation.
{ strength : Basics.Float
, dampness : Basics.Float
}
Settings that control how we animate to the element.
init : State
Initial State
to store in your Model
.
Settings used are:
{ strength = 100
, dampness = 4.5
}
initWithSettings : Settings -> State
Same as init
but bring your own Settings
.
These settings are handled by tad-lispy/springs
so take a look over there on how they interact and play around with
the Oscillometer
demo to get a visual preview of specific settings.
A message type for the State
to update.
update : Msg -> State -> ( State, Platform.Cmd.Cmd Msg )
Update the State
with messages sent by subscriptions
or Browser.Dom
viewport information requests.
subscriptions : State -> Platform.Sub.Sub Msg
Sync to the browser refresh rate and make sure our animation runs as smooth as possible.
scrollTo : String -> Platform.Cmd.Cmd Msg
Scroll to element with given String
id on the current page.
note: this will only scroll the viewport y-axis to the element y position.
Use scrollToCustom
if you want more control over this behavior.
scrollToTop : Platform.Cmd.Cmd Msg
Scroll to the top of the page.
note: this will only scroll the viewport y-axis to 0, the x-axis position will remain the same.
cancel : State -> State
Interrupt the current animation.
You can call this if the user scrolls during the animation, interrupting the movement of the page.
isScrolling : State -> Basics.Bool
Check if the scrolling animation is running.
scrollToCustom : (Browser.Dom.Viewport -> Browser.Dom.Element -> { from : { x : Basics.Float, y : Basics.Float }, to : { x : Basics.Float, y : Basics.Float } }) -> String -> Platform.Cmd.Cmd Msg
Scroll to element with given String
id on the current page
with your own calculations on where to start and where to end.
Both Viewport
and Element
can be found in elm/browser
For example you could define scroll to with offset like:
scrollToWithOffset : Float -> String -> Cmd Msg
scrollToWithOffset offset id =
let
f { viewport } { element } =
{ from =
{ x = viewport.x
, y = viewport.y
}
, to =
{ x = viewport.x
, y = Basics.max 0 (element.y - 100)
}
}
in
scrollToCustom f id
Or scroll the viewport x-axis to the element x position as well.
scrollToAlt : String -> Cmd Msg
scrollToAlt id =
let
f { viewport } { element } =
{ from = { x = viewport.x, y = viewport.y }
, to = { x = element.x, y = element.y }
}
in
scrollToCustom f id
scrollToCustomNoElement : (Browser.Dom.Viewport -> { from : { x : Basics.Float, y : Basics.Float }, to : { x : Basics.Float, y : Basics.Float } }) -> Platform.Cmd.Cmd Msg
Scroll wherever you like but without an element.
For example scrollToTop
is defined like:
scrollToTop : Cmd Msg
scrollToTop =
let
f { viewport } =
{ from = { x = viewport.x, y = viewport.y }
, to = { x = viewport.x, y = 0 }
}
in
scrollToCustomNoElement f