Scrollmagic Setup in Webpack 2

[jstafford]

I have been trying to setup gsap with scrollmagic and webpack 2 and running into difficulties. I am reaching out here b/c scrollmagic uses gsap and is poppular here. Also, I know weback 2 is popular for a few different front end frameworks now. I am using Vue.

 

Here is my stackoverflow summarizing my problem. https://stackoverflow.com/questions/44229694/webpack-2-not-loading-scrollmagic-and-gsap-imports-correctly-uncaught-typeerror

 

I just don't know how to resolve it, but I would really like to use scrollmagic and gsap together.

 

Thanks.

 

John

[OSUblake]

Hey John,

 

I can take a look at this later, so post your files.

 

And I've been meaning to tell you about @jh-thank-you I told him that he should look into using Vue, and he started a thread that's kind of documenting his progress, learning how to build components with GSAP. He's at the very early stages right now, dealing with the same stuff as you, webpack! Definitely something you might want to follow along with. 

 

 

[jstafford]

Hi Blake, I just got it working. My problem was using the addTCintroller (controller) method. There is no such method. It is addTo (controller). Silly mistake. It was not a setup issue.

 

I like Vue 2. I am not using Typescript,  but plan on implementing when it has a more full buy in like Angular 2 (documented, etc.) .

[jstafford]

addToController above was the mistake. Again, my setup is good.

[rgfx]

Please post your project anyway

 

I would like to see a good mobile implementation of scroll-magic... 

[OSUblake]

2 hours ago, jstafford said:

Hi Blake, I just got it working. My problem was using the addTCintroller (controller) method. There is no such method. It is addTo (controller). Silly mistake. It was not a setup issue.

 

I like Vue 2. I am not using Typescript,  but plan on implementing when it has a more full buy in like Angular 2 (documented, etc.) .

 

Hmmm... I think TypeScript would have caught that error. 

 

I haven't tried this yet, but Vue has TypeScript class decorators just like Angular.

https://github.com/vuejs/vue-class-component

 

[jh-thank-you]

Thanks for the mention Blake. Jstafford if you are in the middle of setting webpack with GSAP have a look at the Config I posted over in this GSAP thread: 

 

It has code/vendor splitting set up for GSAP plugins and jquery. The Config is working well.

As for the Vue JS project I'm still wiring things up the Vue way. The modal-slideshow. vue component is using GSAP but with jquery at the moment.

Once I work out a few more things I will reach out to Blake/the GSAP team to figure out how to incorporate GSAP the Vue way... I will also look into if I can do everything without jquery. I'm just learning Vue, as I learn things the build will change but I have a lot of things sorted (see the README). Here is the repo link:   https://github.com/jh-thank-you/webpack-w-gsap

 

Feel free to reach out with questions, I will help with what I can but I am no where near the level of Blake, Dipscom and the rest of GSAP team. 

 

All the best,

Jim

[jstafford]

Thanks Jim. Sorry for late response.

 

[jh-thank-you]

Jstafford,

No worries, I've been busy myself. I hope your project is going well.

 

I have a branch where basic Vue transitions with Vue CSS <transition> and <transition-group> classes have been added.

https://github.com/jh-thank-you/webpack-w-gsap/tree/adding-animations

 

I'm working on the slideshow conversion today (hopefully I will finish it today as well). I will share it when I'm done.

 

Here is a good link Blake shared with me, it talks about Vue's CSS transition classes and Vue's Javascript hooks (which is where you can tap into/incorporate gsap):

https://css-tricks.com/intro-to-vue-5-animations/

 

I know the examples below do not contain ScrollMagic  but it will show you where you can connect ScrollMagic/GSAP in your Vue project (I hope they help you):

Here is a basic pen I put together using Vue's CSS <transition-group>:

See the Pen xrYbpN by jh-thank-you (@jh-thank-you) on CodePen

Side Note: this is what I like about taking the time to share things with others... you never know how it comes back to you... by looking at the pen again I caught a mistake... I missed centering the nth-last-child(1) with {margin: 0;}... fixed it for the pen as well as my own site..

 

 

This is a nice simple, slideshow, example using Vue's JS hooks with GSAP:

See the Pen ALgZpp by timrijkse (@timrijkse) on CodePen

Not quite what I need for my own site but maybe it will help you.

[jh-thank-you]

Here is the updated Slideshow using GSAP

 

See the Pen gRJEpW by jh-thank-you (@jh-thank-you) on CodePen