TimelineDown

A funny wrapper for gsap/TimelineMax

Usage

From CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@hashrock/[email protected]/dist/index.js"></script>

<script>
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
});
</script>

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