ScrollMagic
ScrollMagic copied to clipboard
Linear is not defined?
anyone who encounter this problem?
Make sure u loaded the right library; with cdn, u should at least loaded TweenLite(not TimelineLite or others). Check it.
This is what I've loaded:
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
I get the same error.
TweenLite is not part of ScrollMagic. That's a part of GSAP, and you need to include GSAP to use tween animation. Basic components of GSAP are free. Refer to its website for more information.
Is this closed? If so, could there be a note somewhere indicating that other vendor libs are required for all of the features to work properly?
Only one or two modules requires GSAP I remember, and those require it has been marked in the tutorial/demo page. Since it has been several months after I worked with it last time, please refer to the latest doc. I think this issue can be closed.
Is this closed? If so, could there be a note somewhere indicating that other vendor libs are required for all of the features to work properly?
Save TweenMax.min.js
and animation.gsap.js
locally (these imports use /js
) , then use the following sorted lines:
<script type="text/javascript" src="/js/TweenMax.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script type="text/javascript" src="/js/animation.gsap.js"></script>
It should work with most of the advanced examples
Save
TweenMax.min.js
andanimation.gsap.js
locally (these imports use/js
) , then use the following sorted lines:
There is no need to save those files locally, you can use:
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
Fantastic! These last ones worked. Cheers.