Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jstafford

Scrollmagic Setup in Webpack 2

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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. 

 

 

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Please post your project anyway :)

 

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

Link to comment
Share on other sites

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. :shock:

 

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

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

 

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

Thanks Jim. Sorry for late response.

 

Link to comment
Share on other sites

  • 4 weeks later...

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×