scrollmagic.js help PLEASE

[rwchampin]

Im trying to figure out how to use this for a parallax animation site im working on. I cant for the life of me figure out how to set this up…basically there is a start and an end point and also a trigger element used to animate the element based on the triggers point in between the start and end…..heres my basic demo example that i cant even get working correctly: http://codepen.io/anon/pen/HkdJE and heres the link to scrollmagic https://github.com/janpaepke/ScrollMagic

[nixnerd]

You came to the right place. I’ve been using ScrollMagic since it was SuperScrollorama.

I can tell you that your first problem is that your body is not tall enough to facilitate any scrolling at all. There’s not even a scroll bar. Make your body like 3000px or something arbitrary and long for testing.

Your other problem is, your two tweenable elements are in the upper left hand corner. So, they’re gone as soon as we start scrolling. We have no idea if the tween is working… because we can’t see them. Do you get what I’m saying?

[nixnerd]

Let me mess with this for a sec.

[rwchampin]

yesssssssss….ur amazing

[nixnerd]

Started a new pen:

http://codepen.io/Joe_Temp/pen/eihxc

I created a little naming convention to help you understand. Finger, trigger and target. Any other questions… just ask. Also, make sure to include GSAP (Greensock).

[rwchampin]

thats awesome….i actually completely understand that lol ……but question…..why when i add another element and another animation the same way u did….using the same trigger element….does it not work http://codepen.io/anon/pen/wiLuB

[rwchampin]

its like jumpy and not bueno…..lol im really trying to learn this so excuse my hundred questions but also is that the most efficeint way to have multiple animations…..just keep adding tween & scene combos like that for every animation?

[nixnerd]

You need to use timeline max OR syntax could be off. Fork this pen and show me what you’ve got.

[rwchampin]

http://codepen.io/rwchampin/pen/EGwLo

[rwchampin]

scrollmagic really doesnt wanna work for me lol

[rwchampin]

wait!! i got it!!!! thank you so much!! lol ok….last and final question while i have someone who clearly knows everything…….i need this to work for mobile obv…..i need to use iscroll ive been told….whats the basic procedure for this….ive read i need to use a container div and iscroll……would u happen to know this also?

[nixnerd]

Give me a few hours to look into that.

[nixnerd]

I was under the impression that ScrollMagic worked on mobile out of the box.

[rwchampin]

it works on mobile but it doesnt support the momentum of a scroll…meaning it shows the beginning and end of the animation…not the in between….which makes it look choppy and horrible

[nixnerd]

So you have to use what now? iScroll?

[Author]

Posts