GSAP timelineMax error, cannot read property 'repeat' of undefined

Question

I'm trying to create a simple timelineMax with GSAP and scrollMagic, I'm getting the following error. Everything looks right to me so I'm not understanding this error.

Uncaught TypeError: Cannot read property 'repeat' of undefined
d.to @ TweenMax.min.js:14
(anonymous function) @ app.js:12

Line 12 is .to("#parallax1 > div", {y: "80%", ease: Linear.easeNone}); below.

Here's the code:

// init controller
    var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});

    // build scenes
    // build tween1
    var tween1 = new TimelineMax();
        tween1.to("#parallax1 > div", {y: "80%", ease: Linear.easeNone});   

    var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
                    .setTween(tween1)
                    .addIndicators()
                    .addTo(controller);

(I know there's no duration param in that tween, but if you look at http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html you can see that there's no duration parameter on their setTween and it works just fine).

score 12 · Accepted Answer · answered Jun 10 '15 at 06:20

12

You are missing the duration parameter:

TweenMax.to(element, duration, {property: value});.

answered Jun 10 '15 at 06:20

Tahir Ahmed

5,687
2
17
28

Hi Tahir, I know it would seem that way, but if you look at http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html you can see that there's no duration parameter on their `setTween` and it works just fine `.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})` . What's the difference between this and timelineMax? Does timelineMax always need a duration param? – Agent Zebra Jun 10 '15 at 22:34
Tahir, from the documentation it looks like you're right, missing the tween duration on .setTween is only a shorthand for a 1 second duration, and maybe this shorthand does not work on TimelineMax. Hmmm... `// short hand to add a TweenMax.to() tween for 1 second // this is useful, when the scene has a duration and the tween duration isn't important anyway scene.setTween("obj3", {y: 100});` [Reference Link]( http://scrollmagic.io/docs/animation.GSAP.html#Scene.setTween) Anyhow it's now working after adding a duration param. I wonder how I can get better error messages? – Agent Zebra Jun 10 '15 at 22:49
Can anyone explain what this selector means `parallax1 > div` ? What's the `<` in there all about? – Agent Zebra Jun 10 '15 at 22:52
1

Yup, as you have figured out, `setTween` is a utility provided by `ScrollMagic` with an option of omitting the `duration` parameter entirely. [[Link](http://janpaepke.github.io/ScrollMagic/docs/animation.GSAP.html#Scene.setTween)]. And yes `TweenMax` / `TweenLite` / `TimelineLite` / `TimelineMax` all of them need a `duration` value to work with. [[Link](https://ihatetomatoes.net/greensock-cheat-sheet/)] and [[Link](http://greensock.com/docs/#/HTML5/GSAP/)]. – Tahir Ahmed Jun 11 '15 at 04:06
1

`>` in selectors meaning direct descendant and there are many types of css selectors available. [[Link](http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048)], [[Link](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors)], [[Link](http://www.w3schools.com/cssref/css_selectors.asp)], [[Link](http://www.sitepoint.com/web-foundations/css-selectors/)] & [[Link](http://tutorials.jenkov.com/css/selectors.html#child-selector)]. – Tahir Ahmed Jun 11 '15 at 04:14

GSAP timelineMax error, cannot read property 'repeat' of undefined

1 Answers1