laravel-mix-scrollmagic-gsap

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);