A quick Laravel Mix extension for ScrollMagic + GSAP support.
npm install laravel-mix-scrollmagic-gsapHowever sometimes it gets a bit tricky with webpack.
In order to save you time to configure webpack, I've created this extension.
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);
``