search

janpaepke / ScrollMagic

The javascript library for magical scroll interactions.
http://ScrollMagic.io
Other
14.88k stars 2.17k forks source link

Linear is not defined? #822

Open judealbania opened 6 years ago

judealbania commented 6 years ago

image

anyone who encounter this problem?

Whotakesmyname commented 6 years ago

Make sure u loaded the right library; with cdn, u should at least loaded TweenLite(not TimelineLite or others). Check it.

Hubro commented 5 years ago

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.

Whotakesmyname commented 5 years ago

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.

taystack commented 5 years ago

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?

Whotakesmyname commented 5 years ago

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?

milnomada commented 4 years ago

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

cetinajero commented 3 years ago

Save TweenMax.min.js and animation.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>
joelsoncastro commented 2 years ago

Fantastic! These last ones worked. Cheers.