laravel-mix-scrollmagic-gsap

0.1.1 • Public • Published

Description

In order to make ScrollMagic work with GSAP (TweenLite / TweenMax, TimelineLite / TimelineMax), it is nesessary to include animation.gsap.js plugin (scrollmagic docs).

However sometimes it gets a bit tricky with webpack.

In order to save you time to configure webpack, I've created this extension.

Installation & Usage

  • Install extension with npm:
npm i laravel-mix-scrollmagic-gsap
  • In your webpack.mix.js file:
require('laravel-mix-scrollmagic-gsap');

mix.scrollmagicGSAP();
  • In your javascript file:
import ScrollMagic from 'scrollmagic/scrollmagic/minified/ScrollMagic.min';
import 'scrollmagic/scrollmagic/minified/plugins/animation.gsap.min';
// For development only
import 'scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min';

And that's it. You can freely use ScrollMagic with GSAP:

// Example
const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
      duration: 50,
      offset: 50,
      triggerHook: 'onLeave'
})
.setTween(".foo", 2, {css: {y: 100}})
// For development only
.addIndicators({name: "2 (duration: 50)"})
.addTo(controller);

Package Sidebar

Install

npm i laravel-mix-scrollmagic-gsap

Weekly Downloads

3

Version

0.1.1

License

ISC

Unpacked Size

3.09 kB

Total Files

3

Last publish

Collaborators

  • dmitriyaa