Performant Scroll Triggered Animation With jQuery And GSAP - vectorscroll.js

vectorscroll.js is a lightweight jQuery plugin which applies a fast, smooth, customizable, scroll-trigged animation to any element when it comes onto the screen from the bottom of the screen.

The high-performance and fully configurable animation is based on the GSAP's TweenMax library.

How to use it:

1. Load the required jQuery and TweenMax libraries from a CDN.

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/TweenMax.min.js"></script>

2. Attach the function to the element you want to animate on page scroll.

<h2 class="demo">
  Element To Animate
</h2>

$('.dummy').vs({
  
});

3. Define the scroll-triggered animation using the TweenMax's from() method.

$('.dummy').vs({
  from: {
    x: 520, 
    ease: Quad.easeInOut
  }
});

4. Specify the position to start the animation. There are 4 values we need to know. Where is the top when we start, where is the top when we finish?

$('.dummy').vs({
  from: {
    x: 520, 
    ease: Quad.easeInOut
  },
  as: [.5, .5, 0, 0]
});

---

This awesome jQuery plugin is developed by motionharvest. For more Advanced Usages, please check the demo page or visit the official website.