css-easings-0.2.0.0: Defining and manipulating css easing strings.

Maintainerhapytexeu+gh@gmail.com
Stabilityexperimental
PortabilityPOSIX
Safe HaskellNone
LanguageHaskell2010

Css.Easing

Contents

Description

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

Synopsis

Easing patterns

data Easing Source #

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 Source # 
Instance details

Defined in Css.Easing

Methods

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

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

Ord Easing Source # 
Instance details

Defined in Css.Easing

Show Easing Source # 
Instance details

Defined in Css.Easing

Arbitrary Easing Source # 
Instance details

Defined in Css.Easing

ToJSON Easing Source # 
Instance details

Defined in Css.Easing

ToMarkup Easing Source # 
Instance details

Defined in Css.Easing

Default Easing Source # 
Instance details

Defined in Css.Easing

Methods

def :: Easing #

ToJavascript Easing Source # 
Instance details

Defined in Css.Easing

steps :: Int -> JumpTerm -> Maybe Easing Source #

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 Source #

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 Source #

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 Source #

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 Source #

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 Source #

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 Source #

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 Source #

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 Source # 
Instance details

Defined in Css.Easing

Enum JumpTerm Source # 
Instance details

Defined in Css.Easing

Eq JumpTerm Source # 
Instance details

Defined in Css.Easing

Ord JumpTerm Source # 
Instance details

Defined in Css.Easing

Read JumpTerm Source # 
Instance details

Defined in Css.Easing

Show JumpTerm Source # 
Instance details

Defined in Css.Easing

Arbitrary JumpTerm Source # 
Instance details

Defined in Css.Easing

ToJSON JumpTerm Source # 
Instance details

Defined in Css.Easing

ToMarkup JumpTerm Source # 
Instance details

Defined in Css.Easing

Default JumpTerm Source # 
Instance details

Defined in Css.Easing

Methods

def :: JumpTerm #

ToJavascript JumpTerm Source # 
Instance details

Defined in Css.Easing

pattern Start :: JumpTerm Source #

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

pattern End :: JumpTerm Source #

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

Standard easing aliasses

pattern StepsStart :: Easing Source #

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

pattern StepsEnd :: Easing Source #

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

pattern Ease :: Easing Source #

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

pattern Linear :: Easing Source #

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

pattern EaseIn :: Easing Source #

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

pattern EaseOut :: Easing Source #

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

pattern EaseInOut :: Easing Source #

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 Source #

A pattern that defines the PostCSS easing pattern easeInSine.

pattern EaseOutSine :: Easing Source #

A pattern that defines the PostCSS easing pattern easeOutSine.

pattern EaseInOutSine :: Easing Source #

A pattern that defines the PostCSS easing pattern easeInOutSine.

pattern EaseInQuad :: Easing Source #

A pattern that defines the PostCSS easing pattern easeInQuad.

pattern EaseOutQuad :: Easing Source #

A pattern that defines the PostCSS easing pattern easeOutQuad.

pattern EaseInOutQuad :: Easing Source #

A pattern that defines the PostCSS easing pattern easeInOutQuad.

pattern EaseInCubic :: Easing Source #

A pattern that defines the PostCSS easing pattern easeInCubic.

pattern EaseOutCubic :: Easing Source #

A pattern that defines the PostCSS easing pattern easeOutCubic.

pattern EaseInOutCubic :: Easing Source #

A pattern that defines the PostCSS easing pattern easeInOutCubic.

pattern EaseInQuart :: Easing Source #

A pattern that defines the PostCSS easing pattern easeInQuart.

pattern EaseOutQuart :: Easing Source #

A pattern that defines the PostCSS easing pattern easeOutQuart.

pattern EaseInOutQuart :: Easing Source #

A pattern that defines the PostCSS easing pattern easeInOutQuart.

pattern EaseInQuint :: Easing Source #

A pattern that defines the PostCSS easing pattern easeInQuint.

pattern EaseOutQuint :: Easing Source #

A pattern that defines the PostCSS easing pattern easeOutQuint.

pattern EaseInOutQuint :: Easing Source #

A pattern that defines the PostCSS easing pattern easeInOutQuint.

pattern EaseInExpo :: Easing Source #

A pattern that defines the PostCSS easing pattern easeInExpo.

pattern EaseOutExpo :: Easing Source #

A pattern that defines the PostCSS easing pattern easeOutExpo.

pattern EaseInOutExpo :: Easing Source #

A pattern that defines the PostCSS easing pattern easeInOutExpo.

pattern EaseInCirc :: Easing Source #

A pattern that defines the PostCSS easing pattern easeInCirc.

pattern EaseOutCirc :: Easing Source #

A pattern that defines the PostCSS easing pattern easeOutCirc.

pattern EaseInOutCirc :: Easing Source #

A pattern that defines the PostCSS easing pattern easeInOutCirc.

pattern EaseInBack :: Easing Source #

A pattern that defines the PostCSS easing pattern easeInBack.

pattern EaseOutBack :: Easing Source #

A pattern that defines the PostCSS easing pattern easeOutBack.

pattern EaseInOutBack :: Easing Source #

A pattern that defines the PostCSS easing pattern easeInOutBack.