cannot read property 'frame' of undefined in gsap, WHY I GET THIS ERROR?

[Али К]

var animDataTwo = {
    container: document.getElementById('image360'),
    path: 'https://assets.lottiefiles.com/datafiles/jORpumH9Yn0XoXQ/data.json',
    renderer: 'svg',
    loop: false,
    autoplay: false,
    name: "animScrollTwo",
}, animScrollTwo, tl;


var animScrollTwo = bodymovin.loadAnimation(animDataTwo)


animScrollTwo.addEventListener('DOMLoaded', function () {
    tl = new TimelineMax({ repeat: 0 })
    tl.to({ frame: animScrollTwo.totalFrames - 1 }, 1, {
        frame: 0,
        onUpdate: function () {
            animScrollTwo.goToAndStop(Math.round(this.target.frame), true)
        },
        Ease: Linear.easeNone
    })

    var controller = new ScrollMagic.Controller();

    var scene = new ScrollMagic.Scene({
        triggerElement: ".image-360",
        offset: 300,
        duration: 6000
    }).setTween(tl).setPin("#image360").addTo(controller);

})

 

[GreenSock]

Here's your problem: 

animScrollTwo.goToAndStop(Math.round(this.target.frame), true)

There is no this.target property. A tween can have many targets, hence the targets() getter method that returns an Array. If you know you've only got one (which is true in this case), you could:

animScrollTwo.goToAndStop(Math.round(this.targets()[0].frame), true)

A few suggestions:

1. It looks like you're using the old syntax. I'd strongly recommend updating to the much more simple, modern, concise GSAP 3 syntax. 
2. There's no such thing as an "Ease" special property. It's "ease" (lowercase)
3. You could tap into the "snap" feature in GSAP 3 instead of running Math.round() on the result. In other words, GSAP can do the rounding for you on any value. Not a big deal. 
4. We'd STRONGLY recommend using GSAP's ScrollTrigger instead of ScrollMagic. It's more powerful, smaller, and it's officially supported here (ScrollMagic isn't a GreenSock product and hasn't been maintained in years...it has 483 open issues on Github). 
5. There's no need to define repeat: 0 on your timeline (that's the default)

[Али К]

now I get 

Quote

this.targets is not a function

here is my code 

See the Pen GRjbjQo by itsalimanuel (@itsalimanuel) on CodePen

[GreenSock]

Sorry, but it's almost impossible for us to troubleshoot without seeing the error in context. I appreciate the CodePen, but obviously it's totally non-functional because it doesn't include any of your markup, the libraries you're using, or anything besides a copy/paste of JS code. I need to see the error itself in context - can you please fix your CodePen? We'd love to help. 

 

It sure sounds to me like "this" doesn't refer to what you think it does in that context. You're not using an arrow function for your onUpdate, are you? 

[Али К]

well, just now i add it , i think you mean like that 
 

      onUpdate: function () {
            anim.goToAndStop(Math.round(this.targets()[0].frame), true)
        },

 

[GreenSock]

Yes, but try to console.log(this) in there. What does it say? My guess is that it's not a Tween instance which means there's something else going on in your project. I wonder if you added that onUpdate to a timeline instead of a tween or something. 

 

Again, it's very difficult for us to troubleshoot blind, so please provide at least a semi-working CodePen 

[Али К]

Okay, 

See the Pen GRjbjQo by itsalimanuel (@itsalimanuel) on CodePen

[GreenSock]

I'm not seeing any GSAP-related errors there, are you? It looks like you're trying to use ScrollMagic which is not a GreenSock product and I'd STRONGLY recommend using ScrollTrigger instead because it's integrated with GSAP, it's well-supported, and it does everything ScrollMagic can do plus a whole lot more.

 

You're also loading 3 different GSAP files which is a huge waste and potential source of problems (because one is a very old version with a different API). 

 

Now that I see that, my guess is that was the root of the problem - you were probably using a super old version (from back in the ScrollMagic days), TweenMax, which had a plain "target" property whereas in GSAP 3 it was changed into targets() to better accommodate multiple targets. So if you were trying to call this.targets() but you were using a super old TweenMax, it'd throw that error about targets not being a function. 

 

In short:

1. Update to the latest GSAP which is much smaller even though it has a LOT more features, and a more concise and intuitive API. See
2. Use ScrollTrigger, not ScrollMagic. See https://greensock.com/docs/v3/Plugins/ScrollTrigger