https://github.com/hashrock/timelinedown

A funny wrapper for gsap/TimelineMax
https://github.com/hashrock/timelinedown

Last synced: 3 months ago
JSON representation

A funny wrapper for gsap/TimelineMax

• Host: GitHub
• URL: https://github.com/hashrock/timelinedown
• Owner: hashrock
• Created: 2020-01-03T13:23:57.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-05-25T23:20:43.000Z (over 3 years ago)
• Last Synced: 2024-07-24T01:03:23.475Z (6 months ago)
• Language: JavaScript
• Size: 121 KB
• Stars: 31
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# TimelineDown

A funny wrapper for `gsap/TimelineMax`

[![npm version](https://badge.fury.io/js/%40hashrock%2Ftimelinedown.svg)](https://badge.fury.io/js/%40hashrock%2Ftimelinedown)

![timelinedown](https://user-images.githubusercontent.com/3132889/71725657-20d4ed80-2e78-11ea-9905-4df8c23fd2fd.gif)

# Usage

## From CDN

```

const str = "------------0----1--2";

const keyframes = [

  { x: 200 },

  { y: 200, ease: Bounce.easeOut },

  { opacity: 0 }

];

const tl = timelineDown("#obj", str, keyframes, {

  repeat: 99,

  frameDuration: 0.1

});

```

## From CDN using Data Attributes

```html



  Hello



```

## From npm

```

import timelineDown from "@hashrock/timelinedown";

import { Bounce } from "gsap";

const str = "------------0----1--2";

const keyframes = [

  { x: 200 },

  { y: 200, ease: Bounce.easeOut },

  { opacity: 0 }

];

timelineDown("#obj", str, keyframes, {

  repeat: 99,

  frameDuration: 0.1

});

```

## More examples

- https://codepen.io/hashrock/pen/mdyqBoN

- https://codepen.io/hashrock/pen/JjoOqYJ