Open rexcheng1997 opened 3 years ago
I'm having a similar problem. Here is the code and error msg.
Uncaught TypeError: Cannot read property 'to' of undefined
at O.Scene.f.setTween (animation.gsap.js:1)
at HTMLDocument.
$(function() { // wait for document ready // init var controller = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: 'onEnter', } });
// get all images
var images = document.querySelectorAll(".image");
// create scene for every image
for (var i = 0; i < images.length; i++) {
new ScrollMagic.Scene({
triggerElement: images[i]
})
.setTween(images[i], 0.5, {scale: 1.1})
.addIndicators()
.addTo(controller);
}
});
Version
ScrollMagic
: 2.0.8Gsap
: 3.5.1I am using ScrollMagic with React and webpack. Tricky configurations are needed to get the code compiled with webpack but I think the main problem lies in the source code itself.
Issue
I appreciate all the efforts made by the development team to accommodate different versions of
gsap
inanimation.gsap.js
. Since the latest version ofgsap
wrapsTweenMax
,TimelineMax
,TweenLite
,TimelineLite
, etc. into thegsap
object, the current version ofanimation.gsap.js
doesn't work with the lastestgsap@^3.5.1
.All the following code snippets are taken from
scrollmagic/uncompressed/plugins/animation.gsap.js
.The error is related to the function
Scene.setTween
. The following is the error message shown in the console whensetTween
is called:Backtracking where the variable
Tween
is initialized, I found the following chunk of code which caused the problem:(lines 28-43 in
animation.gsap.js
)This is basically where the
gsap
module is loaded. In the latest version ofgsap
, objects likeTweenMax
andTimelineMax
are wrapped as a member of thegsap
module so thegsap
object is not equivalent to eitherTweenMax
orTimelineMax
. This is why whenTween.to
is called later, it is not a function (gsap
object doesn't have a key calledto
).To solve the issue, I modified the above code as below:
After fixing this, there is another bug in line 275 of
animation.gsap.js
:Here,
TweenLite
is not defined before so you will get aundefined
error in the console. To solve it, just replaceTweenLite
withTween
.How to reproduce the issue
ScrollMagic
andgsap
of the above version in the page.setTween
, and add the scene to the controller.Part of the code is pasted below for reference: