Delay Option

Animate

left: "12.5vw"

Options

delay: 3000

Loop Option

Animate

left: "12.5vw"

Options

loop: true

Bounce Option

Animate

left: "12.5vw"

Options

bounce: true, easing: "easeInSine"

Flip Bounce Easing

Animate

left: "12.5vw"

Options

bounce: true, flipBounceEasing: true, easing: "easeInSine"

Custom Easing Function

Animate

left: "12.5vw"

Options

easing: "cubic-bezier(0.68, -0.55, 0.265, 1.55)", bounce: true

Transform Scale

Animate:

transform: "scale(2)"

Options:

easing: "easeInOutQuad", bounce: true

Transform Rotation

Animate:

transform: "rotate(120deg)"

Options:

easing: "easeInOutQuad", bounce: true

Transform SkewX

Animate:

transform: "skewX(0.523599rad)"

Options:

easing: "easeInOutQuad", bounce: true

Transform SkewY

Animate:

transform: "skewY(0.1turn)"

Options:

easing: "easeInOutQuad", bounce: true

Transform TranslateX

Animate:

transform: "translateX(3vw)"

Options:

easing: "easeInOutQuad", bounce: true

Transform TranslateY

Animate:

transform: "translateY(-3vw)"

Options:

easing: "easeInOutQuad", bounce: true

Transform Origin

Animate:

transformOrigin: "150px 0"

Options:

easing: "easeInOutQuad", bounce: true

RGB Colour

Animate:

backgroundColor: "rgb(0, 255, 0)"

Options:

easing: "easeInOutQuad", bounce: true

HSL Colour

Animate:

backgroundColor: "hsl(120, 100%, 50%)"

Options:

easing: "easeInOutQuad", bounce: true

Border Radius

Animate:

borderRadius: "50%"

Options:

easing: "easeInOutQuad", bounce: true

Multiple Elements

Animate:

backgroundColor: "rgb(0, 255, 0)", transform: "translateY(150%)"

Options:

easing: "easeInOutQuad", bounce: true

Multiple Staggered Elements

Animate:

backgroundColor: "rgb(0, 255, 0)", transform: "translateY(150%)"

Options:

stagger: 100, easing: "easeInOutQuad", bounce: true

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit porta lorem, sed sollicitudin ipsum eleifend eu. Pellentesque dignissim sapien id odio interdum, in mattis turpis rutrum. Sed metus nunc, eleifend quis ornare sed, imperdiet in nulla. Suspendisse potenti. Aliquam sit amet odio orci. Duis non velit rhoncus, finibus ligula id, lobortis libero. Aenean sit amet eros eget enim rutrum ornare eget vitae diam. Donec dignissim nisl id quam eleifend, sit amet aliquam lacus posuere. Pellentesque ac posuere nunc. Vivamus elementum, lacus vitae pulvinar commodo, diam odio efficitur odio, eget fringilla est sem ac urna. Etiam elementum eros a odio facilisis scelerisque. Duis a nulla non turpis egestas lobortis vitae non augue. Donec id quam sed augue vehicula tempor sed vitae felis.

Quisque porttitor massa eu ullamcorper ornare. Nullam sodales volutpat imperdiet. Nam vehicula vel ex vel egestas. Nunc sem magna, elementum congue arcu id, consectetur suscipit nisl. Integer dapibus suscipit metus maximus pulvinar. Fusce bibendum ex sed turpis iaculis gravida. Curabitur tortor felis, ultrices nec maximus a, dictum vitae nibh. Fusce suscipit nisi mauris, non bibendum odio sagittis in.

Phasellus id libero arcu. Quisque scelerisque, nibh a semper mattis, velit tellus lobortis quam, at semper magna quam non nisi. Sed nec luctus dui, in sagittis orci. Phasellus libero nisi, placerat sit amet sapien sed, ultrices commodo ligula. Cras iaculis venenatis accumsan. Curabitur rutrum, velit sed venenatis fermentum, justo felis volutpat ipsum, convallis imperdiet urna turpis ut sapien. Praesent ullamcorper ornare neque, a eleifend elit ornare eu. Sed auctor quis risus sit amet bibendum. Donec porttitor, massa vel fringilla venenatis, justo augue bibendum turpis, ut accumsan nibh turpis eget ante. Donec fringilla, nunc sit amet sollicitudin posuere, nisl dolor convallis sem, eu porta risus mauris ac lacus. Proin turpis ante, hendrerit sit amet turpis eu, finibus fringilla nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut vulputate lectus diam, vitae suscipit metus sagittis et.

ScrollTop (div)

Animate:

scrollTop: 300

Options:

easing: "easeInOutQuad", bounce: true

Width

Animate:

width: "50%"

Options:

easing: "easeInOutQuad", bounce: true

Background Position

Animate:

backgroundPosition: "50% 100%"

Options:

easing: "easeInOutQuad", bounce: true

SVG Element

Animate:

transform: "rotate(30deg)"

Options:

easing: "easeInOutQuad", bounce: true

SVG Child Element

Animate:

fill: "#00FF00", strokeWidth: 10

Options:

easing: "easeInOutQuad", bounce: true

Copy

Font Size

Animate:

fontSize: "2em"

Options:

easing: "easeInOutQuad", bounce: true