How to include 'animation.gsap' to be used in scrollmagic

sage
1

Hi,

TL;DR

Has anyone been able to use bower to isntall ScrollMagic + GSAP animations?

Disclaimer:
I’m not sure if the right place for this question is here because it lays at the intersection of two technologies and I guess is more gulp/bower related than sage related.

I don’t know were else to ask so if this is not the place I’d be very grateful if you point me somewhere else.

The problem:
I have a website with the full roots stack 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!

2

Hi! You should read up on how to override bower packages that have bad defaults.

Here’s how I added overrides for scrollmagic and gsap on an old project. I’ve excluded bootstrap for readability.

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "gsap": "~1.18.0",
    "scrollmagic": "~2.0.5"
  },
  "overrides": {
    "gsap": {
      "main": [
        "./src/uncompressed/TweenMax.js"
      ]
    },
    "scrollmagic": {
      "main": [
        "./scrollmagic/uncompressed/ScrollMagic.js",
        "./scrollmagic/uncompressed/plugins/animation.gsap.js"
      ]
    }
  }
}
7 Likes
3

great! it did work @poggen,

thanks!

I’ve created a gist here with my full bower.json because I had to addapt some of it to make it work:


The gist is just a minimum working solution because right now I was just trying to make that include work so anyone who stumbles upon this post should be able to use it.

Thanks a lot!

1 Like