Uncaught TypeError: tween.pause is not a function

[purepixels]

Hello everybody,

 

I'm new to GSAP. I used a bunch of script sand plugins on my page:

 

http://design.purepixels.nl/hofstad/demo/talent-video.html

 

I'm getting an error on my page when I check de Chrome console.

 

The error is: Uncaught TypeError: tween.pause is not a function (jquery.superscrollorama.js: line 315)

 

I don't know how to solve this. Is there anybody who knows how to solve this issue?

 

Thanks in advance for your reply!

 

Best regards,

 

Jeroen

See the Pen talent-video.html by hofstad (@hofstad) on CodePen

[Jonathan]

Hello purepixels and welcome to the GreenSock Forum!

 

The only thing i can think of by looking at your site is to try and load TweenMax.min.js before you load Superscrollorama. Your loading it after Superscrollorama and after other GSAP plugins. You should load TweenMax.min.js before all other GSAP plugins and before Superscrollorama so it can detect GSAP when it loads. But this looks more of an issue with Superscrollorama then with GSAP API question.

 

Superscrollorama is a 3rd party plugin created by John Polacek and not GreenSock. You can try posting your question in the github issues area for that Superscrollorama:

 

https://github.com/johnpolacek/superscrollorama/issues?q=is%3Aissue+is%3Aclosed

 

Maybe others here could help you with that question if they use Superscrollorama. Oh and Superscrollorama is now ScrollMagic

 

https://github.com/janpaepke/ScrollMagic

 

[Carl]

Its very difficult to try to hunt down errors with all that code and 3rd party plugins. 

However, the console error led me to this:

 

function morphLoop() {

count++;

if (count === 4) count=1;

tl = new TimelineMax({onComplete:morphLoop});

tl.to(icon, 1, {morphSVG:"#icon-"+count, ease:Circ.easeInOut})

.to(".caption"+count, 1, {scale:1, autoAlpha:1, ease:Circ.easeOut},0)

.to(".caption"+count, 0.5, {scale:0, autoAlpha:0, ease:Circ.easeIn}, "+=1")

.set(".caption"+count, {scale:5});

}

 

morphLoop();

 

var controller = jQuery.superscrollorama();

controller.addTween('#choose_talent', morphLoop(), 0, 0, 0);

 

Notice how you are passing morphLoop into controller.add() ? You should be passing in an GSAP animation like a tween or timeline. That's why Superscrollerama is saying tween.pause() is not a function. 

 

I think if you change the morphLoop function to return an animation it will work

 

 

 

function morphLoop() {
count++;
if (count === 4) count=1; 
tl = new TimelineMax({onComplete:morphLoop});
tl.to(icon, 1, {morphSVG:"#icon-"+count, ease:Circ.easeInOut})
.to(".caption"+count, 1, {scale:1, autoAlpha:1, ease:Circ.easeOut},0)
.to(".caption"+count, 0.5, {scale:0, autoAlpha:0, ease:Circ.easeIn}, "+=1")
.set(".caption"+count, {scale:5});


//important to return the tl animation


return tl;


}


//do not call this function here!
//morphLoop();


var controller = jQuery.superscrollorama();
//get the animation that morphLoop returns by adding morphLoop() NOT morphLoop
controller.addTween('#choose_talent', morphLoop, 0, 0, 0);

[Carl]

for some reason my code is being changed. please use this as the last line:

 

controller.addTween('#choose_talent', morphLoop(), 0, 0, 0);

 

The () in morphLoop() are very important.

[purepixels]

for some reason my code is being changed. please use this as the last line:

 

controller.addTween('#choose_talent', morphLoop(), 0, 0, 0);

 

The () in morphLoop() are very important.

 

Hi Carl,

 

Thanks so much for your help!

 

return morphLoop();

 

does the trick. There is no error anymore.

 

Best regards,

 

Jeroen