Utility functions

• easing: simple easing functions
• scrollTo: animated scroll to a position
• Timer: simple start/stop/pause/resume timer
• addWebFont: web font loader

easing: simple easing functions

Inspired by http://gizma.com/easing/

Example:

import { easing } from "polythene-utilities"

// percentage is some value between 0 and 1
const value = start + change * easing.easeInOutCubic(percentage)

Find all easing functions in easing.js

scrollTo: animated scroll to a position

Signature:

scrollTo({element, to, duration, direction}) => Promise

Options:

• element: (HTML Element) Scrolling element
• to: (Number) Position in pixels
• duration: (Number) Scroll animation duration in seconds
• direction: (String) "vertical" or "horizontal"
• easing: (Function) Name of easing function (default: easing.easeInOutCubic)

Example:

import { scrollTo, easing } from "polythene-utilities"

scrollTo({
   element: scrollingElement,
   to: 0,
   duration: .5,
   direction: "horizontal",
   easing: easing.easeOutCubic
}).then(() => {
   console.log("Done")
})

Timer: simple start/stop/pause/resume timer

Signature:

new Timer(callback, duration)

Options:

• callback: (Function) Callback function to be called when the timer expires
• duration: (Number) Duration in seconds

Example:

import { Timer } from "polythene-utilities"

const timer = new Timer(() => {
  hide()
}, timeoutSeconds)
// This starts the timer

timer.pause()
timer.resume()
timer.stop()

addWebFont: web font loader

Wrapper around webfontloader.

Loads one or more web fonts (optionally from multiple vendors). Works with Google Webfonts and Typekit.

import { addWebFont } from "polythene-utilities"

addWebFont("google", {
  families: ["Roboto:400,500,700,400italic:latin"]
})

For use with Typekit:

import { addWebFont } from "polythene-utilities"

addWebFont("typekit", {
  id: "my-kit-id"
})

Function addWebFont

addWebFont(vendor, config)

Option	Required	Type	Description
vendor	required	String	Vendor name (or any other unique identifier)
config	required	Object	Configuration object to pass families, id, text

Loading callbacks

To receive a callback when a font loading state has changed, subscribe to webfontloader events:

import { addWebFont } from "polythene-utilities"
import { subscribe, unsubscribe } from "polythene-core"

const handleFontEvent = event => {
  if (event.name === "active") {
    // ...
  }
}

subscribe("webfontloader", handleFontEvent)

// To unsubscribe, pass the same function as with subscribe
// unsubscribe("webfontloader", handleFontEvent)

addWebFont("google", {
  families: ["Roboto:400,500,700,400italic:latin"]
})

webfontloader events

{ name: "loading",      vendor, family, config }
{ name: "active",       vendor, family, config }
{ name: "inactive"      vendor, family, config }
{ name: "fontloading",  vendor, family, config, familyName, fvd }
{ name: "fontactive",   vendor, family, config, familyName, fvd }
{ name: "fontinactive", vendor, family, config, familyName, fvd }

See webfontloader documentation for more details.

How to prevent Flash of Unstyled Text

To prevent the Flash of Unstyled Text (FOUT), add these styles:

body {
  opacity: 0
}
html.wf-active body {
  opacity: 1
}

Or with JavaScript using styler:

import { styler } from "polythene-core-css"

const foutStyles = [{
  "body": {
    opacity: 0
  },
  "html.wf-active body": {
    opacity: 1
  }
}]

styler.add("fout", foutStyles)