gulpbowerscrollmagicroots-toolkit

How to include ‘animation.gsap’ in scrollmagic using bower

TL;DR Has anyone been able to use bower to install ScrollMagic + GSAP animations?

I have a website with the full roots stack (that means that I'm using bower for front-end dependency management and gulp to build the website.) and I'm trying to use ScrollMagic animations on it.

Some of those animation have the greensock library as a pre-requisite. So my bower.json has the following:

  "dependencies": {
    "bootstrap-sass": "3.3.6",
    "gsap": "GreenSock-JS#^1.18.2",
    "scrollmagic": "2.0.5"
  },

If I run gulp and browse my website I can see that there are references in main.js to GreenSock

As per the scrollmagic documentation It seems to me that I'm searching for "plugins/animation.gsap.js" but after reading the the oficial documentation from ScrollMagic....

Option 2: Bower

ScrollMagic is also available on bower and will only install the necessary source code, ignoring all example and documentation files. Please mind that since they are not core dependencies, you will have to add frameworks like GSAP, jQuery or Velocity manually, should you choose to use them.

So it seems obvious that installing the GSAP library via bower should be enough.

Also I'm not sure if the "gsap plugin" is the same that the "gsap library" but there is nothing else in the bower registry that seems more suited.

Thanks!

Solution

  • It seems that ScrollMagic default bower include does not have a way to include the plugins so some overriding is needed.

    Anyone should be able to change the included files as explained here: https://roots.io/using-bootstrap-with-bower-how-to-override-bower-packages/

    I've created a minimal working bower.json file as a gist here: https://gist.github.com/MiquelAdell/9ffc8f1a9973b2308340

    I've found my answer thanks to the help of some user from discourse.roots.io The conversation can be found here: https://discourse.roots.io/t/how-to-include-animation-gsap-to-be-used-in-scrollmagic/5834