Documentation

[zurie]

Do you think you could write up a quick how-to on how to use this? Do you still need ScrollMagic, do you need TweenMax, Do you need to set values programmatically or do you use data attributes inline in the html? I want to use this with Angular 5 and am currently using TweenMax and ScrollMagic successfully but would like to swap to this.

Thanks

[homerjam]

Hi @zurie

You use it in exactly the same way as ScrollMagic, it's the same API so just import and replace ScrollMagic with ScrollWizardry. You don't need both, this is a replacement but yes, you still need TweenMax.

I'll try to write documentation as and when I can. If it helps then here is a Vue plugin (based on angular-scrollmagic) which uses scrollwizardy https://gist.github.com/homerjam/10dd9fc56a5ed816f99d81a22f13d189.

It'd be great to know how you get on with it and if you encounter any issues (and if you wnated to submit a PR with docs then even better : )

Thanks! James

[zurie]

@homerjam thanks! I will check it out, I tried to import it a few ways and use it but I keep getting errors (assuming its a direct replacement) I swapped out ScrollMagic for scrollwizardry in my code blocks and i am getting some errors like

stateService.js:43 TypeError: Cannot read property 'merge' of undefined at new Controller (scripts.bundle.js:1790) at new AboutPlayComponent (play.component.ts:39)

where line 39 = private smSC = new ScrollWizardry.Controller({container: '#content'});

originally it was private smSc = new ScrollMagic.Controller({

I will keep looking into things and maybe try something fresh and clean, see if i can get the right combo! ;)

If you are so inclined to port this vue plugin to angular5 that would be great! :) Thanks for your hard work!

[homerjam]

Ah that error is because of missing lodash dependency (I pretty much include that as a given most projects) - I could maybe implement the merge manually or add to project dependencies in future.

Take a look at that gist for how I'm importing and instantiating a Controller.

Not sure on your angular experience but it might be possible to use angular-scrollmagic for your needs? Either wrapping it for angular 5 or updating the legacy bits maybe.

[zurie]

ok thanks! i did manage to get one scroll controller going on one of my components but some of the others throw that merge, so i will look at LoDash, that makes sense as its as soon as i try to start using more than one Scene / Controller i assume its merging something, array, etc. angular-scrollmagic is awesome :) but not compatible at all for angular 5 what you have for Vue.js is closer to angular5 than angular-scrollmagic

got it all working, thanks

[homerjam]

Did you turn on addIndicators - any clues there?

On 15 Nov 2017, 14:37 +0000, Zurie notifications@github.com, wrote:

ok added lodash and everything is working 100%. the only issue i have, and i have like 10 pages all working perfectly. only issue: private psmSC = new ScrollWizardry.Controller({container: '#content'}); ngAfterViewInit() { const div = document.getElementsByClassName('bg'); const sceneIn = new ScrollWizardry.Scene({ triggerElement: '#servicesHeader', offset: '0', triggerHook: 0, duration: div[0].clientHeight }) .setTween('#services-wrapper .bg', 1, {opacity: 0}) // trigger a TweenMax.to tween .addTo(this.psmSC); const sceneOut = new ScrollWizardry.Scene({ triggerElement: '#servicesHeader', offset: '0', triggerHook: 1, duration: div[0].clientHeight }) .setTween('#services-wrapper .bg', 1, {opacity: 1}) // trigger a TweenMax.to tween .addTo(this.psmSC); } for some reason this one doesn't trigger correctly I don't know if its because I am getting the height of a element and its messing up the trigger or what, but using the stock ScrollMagic it works great, using scrollwizardry it just doesn't correctly trigger, it starts with opacity 0 and then 1 px into the scroll it starts to go from 0 opacity to 1. when its really suppose to start at 1 opacity and as you scroll down it fades from 1 to 0. (think a header on the top of your page) and the duration is the height of the div itself and as you scroll up it fades out? i mean it use to work) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[zurie]

i removed the comment because I got it working. That scroll setup was borking out because I had opacity: 0 in my css for the element and with scrollmagic it was hitting the trigger and turning on, i guess? any way it really didn't need opacity:0 on my CSS it should be handled programatically and by removing that offending css rule that comment above was fixed so i removed it

I am at 100% as far as functionality from before vs now, I haven't tested indicators yet only because I don't need them atm since its fully working.

[zurie]

@homerjam everything seems sorted out. Is there a place I can contact you on some of this stuff? One thing I was wondering was, when you treeshake with WebPack does it remove the indicators if you don't include them? I noticed my bundle size went up slightly from before and I wonder if the indicator plugin is baked in? before I had to physically add the debug.indicators.js if i wanted to see them but it seems like now they are ready if i just type .addIndicators() does WebPack check for that and remove indicators if I haven't used any or would that be something in a future release?

[homerjam]

Good question, unfortunately I don't know the answer!

This was a relatively quick port and I focused on getting it working primarily. There is definitely scope for improvement such as separating out the indicators and plugins. I'd gladly consider a PR if you have the time.

Honestly the best place to get answers is here - I realised you emailed me a while back but I didn't reply (sorry : ). It helps to be able to refer back to conversations in one place (here) and gives other people a chance to help.