create-animation-ws

npx create-animation-ws <your-Project-Name>

About

Fast, unopinionated, minimalist web template for HTML.

A npm package to create HTML template that contains CDN links to gsap 3.0 and scroll trigger and locomotive scroll with basic setup to get you started with animations.

This package uses Snorkl.tv as inspiration and the default template used is available on the link Below. Kindly check out the blog and original example here.

gsap.set('#bigHand, #smallHand', { svgOrigin: '200 200' });

let tl = gsap
  .timeline({ defaults: { ease: 'none' } })
  .to('#bigHand', { rotation: 360, duration: 3 })
  .to('#smallHand', { rotation: 30, duration: 3 }, 0);

ScrollTrigger.create({
  trigger: '.clockWrapper',
  start: '0% 50%',
  end: '+=300',
  scroller: '#app', // this is scroll trigger container id
  animation: tl,
  scrub: true,
  pin: true,
});

Installation

This is a HTML template available through the npm registry.

Before installing, download and install Node.js. Node.js 0.10 or higher is required.

Features

• GSAP link CDN provided
• Scroll trigger CDN with setup
• Locomotive Scroll CDN and how to use
• customizable and light weight
• Quick and insightful comments to get you start

Quick Start

$ npx create-animation-ws <Your project name>

Create the app:

$ cd <your project name>

Start the project

Turn on live server

View the website

Example

You can also clone project template here

People

The author of create-animation-ws is Locksi

License

MIT

😉 Enjoy, it's free