VectorScrolling Save

Animate your GSAP Timelines as you scroll. Like ScrollTrigger but with less features. 980 bytes Gzipped

Project README

Install

npm install vectorscrolling --save-dev

Control a GSAP Timeline Animation

	//include gsap
	var myGSAPTimeline = gsap.timeline({paused:true});
	...

	const vs = require('vectorscrolling');
	vs(myGSAPTimeline, {
		trigger: "#myTarget",
		start: "top top",
		end: "bottom bottom"
	});

	/*
		The above says: Start when #myTarget's top is at the top of the viewport and end when #myTarget's bottom is at the bottom of the viewport.
	*/
```	

Using VectorScrolling
==============================
Does the animation start as your element is coming into view? Or does the animation wait until the entire element is in the middle on the screen? Maybe the element is already on the screen at page load (Like a nav bar) and you want to animate it as the user scrolls down your page. It's up to you.

Blatantly Rip of ScrollTrigger?
---
Hey look, I was here first, so what if Greensock is bigger. We can coexist. In 4.0.0 I've been inspired by Greensock's interface for controlling the timeline. So now it's easier to remember how to use it. VectorScolling parses the text properties `top`, `middle`, and `bottom`. Nothing else. It's just basic scrub features of ScrollTrigger, packed up in <1kb


Have fun
---
[Demo](https://codepen.io/motionharvest/pen/rNwwRxX)
Open Source Agenda is not affiliated with "VectorScrolling" Project. README Source: motionharvest/VectorScrolling
Stars
30
Open Issues
0
Last Commit
2 years ago

Open Source Agenda Badge

Open Source Agenda Rating