Css.Easing

A module to define css easing strings. These can be used in Julius, JSON, etc. templates to limit the easings to valid ones.

Easing patterns

data Easing

A type that describes the different types of css-easings (also known as "transition timing functions"). There are basically two modes: Steps and CubicBeziers.

Constructors

Steps Int JumpTerm

Displays the transition along n stops along the transition, displaying each stop for equal lengths of time. For example, if n is 5, there are 5 steps. Whether the transition holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the transition, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the JumpTerm is used.

CubicBezier Scientific Scientific Scientific Scientific

An author defined cubic-Bezier curve, where the p1 and p3 values must be in the range of 0 to 1.

Instances

Eq Easing

Defined in Css.Easing

Methods

(==) :: Easing -> Easing -> Bool

(/=) :: Easing -> Easing -> Bool

Ord Easing

Defined in Css.Easing

Methods

compare :: Easing -> Easing -> Ordering

(<) :: Easing -> Easing -> Bool

(<=) :: Easing -> Easing -> Bool

(>) :: Easing -> Easing -> Bool

(>=) :: Easing -> Easing -> Bool

max :: Easing -> Easing -> Easing

min :: Easing -> Easing -> Easing

Show Easing

Defined in Css.Easing

Methods

showsPrec :: Int -> Easing -> ShowS

show :: Easing -> String

showList :: [Easing] -> ShowS

Arbitrary Easing

Defined in Css.Easing

Methods

arbitrary :: Gen Easing

shrink :: Easing -> [Easing]

ToJSON Easing

Defined in Css.Easing

Methods

toJSON :: Easing -> Value

toEncoding :: Easing -> Encoding

toJSONList :: [Easing] -> Value

toEncodingList :: [Easing] -> Encoding

ToMarkup Easing

Defined in Css.Easing

Methods

toMarkup :: Easing -> Markup

preEscapedToMarkup :: Easing -> Markup

Default Easing

Defined in Css.Easing

Methods

def :: Easing

ToJavascript Easing

Defined in Css.Easing

Methods

toJavascript :: Easing -> Javascript

steps :: Int -> JumpTerm -> Maybe Easing

Constructs a Steps given the first item is strictly greater than zero. If that is the case, it returns the Easing wrapped in a Just, otherwise a Nothing is returned.

steps' :: Int -> JumpTerm -> Easing

Construct a Steps given the first item is strictly greater than ero. If that is the case, it returns the Easing object, otherwise it will raise an error.

cubicBezier :: Scientific -> Scientific -> Scientific -> Scientific -> Maybe Easing

Constructs a CubicBezier given that the first and third value are between 0.0 and 1.0. If that is the case, it returns a Just that wraps the Easing. Otherwise Nothing is returned.

cubicBezier' :: Scientific -> Scientific -> Scientific -> Scientific -> Easing

Constructs a CubicBezier given the first and third value are between 0.0 and 1.0. If this is the case, it returns that Easing, otherwise it will raise an error.

Convert to css

easingToCss

Arguments

:: Easing

The given Easing to convert.

-> Text

The css counterpart of the given Easing.

Convert an Easing to its css counterpart. The css aliases like "steps-start" are not checked. Therefore, only strings like "steps(..)" and cubic-bezier(..)@ are returned.

easingToCssWithCssAliasses

Arguments

:: Easing

The given Easing to convert.

-> Text

The css counterpart of the given Easing.

Convert an Easing to its css counterpart. The css aliases like "steps-start" are checked, and if they match, the alias is returned.

jumpTermToCss

Arguments

:: JumpTerm

The JumpTerm to convert.

-> Text

The css counterpart of the given JumpTerm.

Convert a JumpTerm to its css counterpart. So JumpStart is for example converted to "jump-start".

Jump terms

data JumpTerm

A type that is used to describe how the jumps are done in a Steps construction.

Constructors

JumpStart

In css this is denoted as jump-start. This denotes a left-continuous function, so that the first jump happens when the transition begins.

JumpEnd

In css this is denoted as jump-end. Denotes a right-continuous function, so that the last jump happens when the animation ends.

JumpNone

In css this is denoted as jump-none. There is no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration.

JumpBoth

In css this is denoted as jump-both. Includes pauses at both the 0% and 100% marks, effectively adding a step during the transition time.

Instances

Bounded JumpTerm

Defined in Css.Easing

Methods

minBound :: JumpTerm

maxBound :: JumpTerm

Enum JumpTerm

Defined in Css.Easing

Methods

succ :: JumpTerm -> JumpTerm

pred :: JumpTerm -> JumpTerm

toEnum :: Int -> JumpTerm

fromEnum :: JumpTerm -> Int

enumFrom :: JumpTerm -> [JumpTerm]

enumFromThen :: JumpTerm -> JumpTerm -> [JumpTerm]

enumFromTo :: JumpTerm -> JumpTerm -> [JumpTerm]

enumFromThenTo :: JumpTerm -> JumpTerm -> JumpTerm -> [JumpTerm]

Eq JumpTerm

Defined in Css.Easing

Methods

(==) :: JumpTerm -> JumpTerm -> Bool

(/=) :: JumpTerm -> JumpTerm -> Bool

Ord JumpTerm

Defined in Css.Easing

Methods

compare :: JumpTerm -> JumpTerm -> Ordering

(<) :: JumpTerm -> JumpTerm -> Bool

(<=) :: JumpTerm -> JumpTerm -> Bool

(>) :: JumpTerm -> JumpTerm -> Bool

(>=) :: JumpTerm -> JumpTerm -> Bool

max :: JumpTerm -> JumpTerm -> JumpTerm

min :: JumpTerm -> JumpTerm -> JumpTerm

Read JumpTerm

Defined in Css.Easing

Methods

readsPrec :: Int -> ReadS JumpTerm

readList :: ReadS [JumpTerm]

readPrec :: ReadPrec JumpTerm

readListPrec :: ReadPrec [JumpTerm]

Show JumpTerm

Defined in Css.Easing

Methods

showsPrec :: Int -> JumpTerm -> ShowS

show :: JumpTerm -> String

showList :: [JumpTerm] -> ShowS

Arbitrary JumpTerm

Defined in Css.Easing

Methods

arbitrary :: Gen JumpTerm

shrink :: JumpTerm -> [JumpTerm]

ToJSON JumpTerm

Defined in Css.Easing

Methods

toJSON :: JumpTerm -> Value

toEncoding :: JumpTerm -> Encoding

toJSONList :: [JumpTerm] -> Value

toEncodingList :: [JumpTerm] -> Encoding

ToMarkup JumpTerm

Defined in Css.Easing

Methods

toMarkup :: JumpTerm -> Markup

preEscapedToMarkup :: JumpTerm -> Markup

Default JumpTerm

Defined in Css.Easing

Methods

def :: JumpTerm

ToJavascript JumpTerm

Defined in Css.Easing

Methods

toJavascript :: JumpTerm -> Javascript

pattern Start :: JumpTerm

A pattern that defines the css alias start that is equal to jump-start.

pattern End :: JumpTerm

A pattern that defines the css alias end that is equal to jump-end.

Standard easing aliasses

pattern StepsStart :: Easing

A pattern that defines the css alias steps-start that is equal to steps(1, jump-start).

pattern StepsEnd :: Easing

A pattern that defines the css alias steps-end that is equal to steps(1, jump-end).

pattern Ease :: Easing

A pattern that defines the css alias ease that is equal to cubic-bezier(0.25, 0.1, 0.25, 1).

pattern Linear :: Easing

A pattern that defines the css alias linear that is equal to cubic-bezier(0, 0, 1, 1).

pattern EaseIn :: Easing

A pattern that defines the css alias ease-in that is equal to cubic-bezier(0.42, 0, 1, 1).

pattern EaseOut :: Easing

A pattern that defines the css alias ease-out that is equal to cubic-bezier(0, 0, 0.58, 1).

pattern EaseInOut :: Easing

A pattern that defines the css alias ease-in-out that is equal to cubic-bezier(0.42, 0, 0.58, 1).

PostCSS easing aliasses

pattern EaseInSine :: Easing

A pattern that defines the PostCSS easing pattern easeInSine.

pattern EaseOutSine :: Easing

A pattern that defines the PostCSS easing pattern easeOutSine.

pattern EaseInOutSine :: Easing

A pattern that defines the PostCSS easing pattern easeInOutSine.

pattern EaseInQuad :: Easing

A pattern that defines the PostCSS easing pattern easeInQuad.

pattern EaseOutQuad :: Easing

A pattern that defines the PostCSS easing pattern easeOutQuad.

pattern EaseInOutQuad :: Easing

A pattern that defines the PostCSS easing pattern easeInOutQuad.

pattern EaseInCubic :: Easing

A pattern that defines the PostCSS easing pattern easeInCubic.

pattern EaseOutCubic :: Easing

A pattern that defines the PostCSS easing pattern easeOutCubic.

pattern EaseInOutCubic :: Easing

A pattern that defines the PostCSS easing pattern easeInOutCubic.

pattern EaseInQuart :: Easing

A pattern that defines the PostCSS easing pattern easeInQuart.

pattern EaseOutQuart :: Easing

A pattern that defines the PostCSS easing pattern easeOutQuart.

pattern EaseInOutQuart :: Easing

A pattern that defines the PostCSS easing pattern easeInOutQuart.

pattern EaseInQuint :: Easing

A pattern that defines the PostCSS easing pattern easeInQuint.

pattern EaseOutQuint :: Easing

A pattern that defines the PostCSS easing pattern easeOutQuint.

pattern EaseInOutQuint :: Easing

A pattern that defines the PostCSS easing pattern easeInOutQuint.

pattern EaseInExpo :: Easing

A pattern that defines the PostCSS easing pattern easeInExpo.

pattern EaseOutExpo :: Easing

A pattern that defines the PostCSS easing pattern easeOutExpo.

pattern EaseInOutExpo :: Easing

A pattern that defines the PostCSS easing pattern easeInOutExpo.

pattern EaseInCirc :: Easing

A pattern that defines the PostCSS easing pattern easeInCirc.

pattern EaseOutCirc :: Easing

A pattern that defines the PostCSS easing pattern easeOutCirc.

pattern EaseInOutCirc :: Easing

A pattern that defines the PostCSS easing pattern easeInOutCirc.

pattern EaseInBack :: Easing

A pattern that defines the PostCSS easing pattern easeInBack.

pattern EaseOutBack :: Easing

A pattern that defines the PostCSS easing pattern easeOutBack.

pattern EaseInOutBack :: Easing

A pattern that defines the PostCSS easing pattern easeInOutBack.