TweenMax ignoring immediateRender: false

[ratherbcoding]

I'm trying to create a parallax effect by animating the background y of an image. I'm planning on using ScrollMagic to manage the duration property and feed this object to it. I'm making a ```new TweenMax()``` however it's ignoring the ```immediateRender: false``` property and beginning its animation right away. 

var tween = new TweenMax($("#parallax1"), 1, {  
  backgroundPosition: "0px 200px",
  ease: Linear.easeNone,
  immediateRender: false
});

Can anyone tell me why this isn't working?

See the Pen yOgZgN by ksefchik (@ksefchik) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo!

 

immediateRender isn't used for suspending playback, it applies to a very specific way from() tweens work. This video explains it best:

 

 

to pause a tween you can just add paused:true to the constructor.

 

However since you are using ScrollMagic it will control when animations start.

I think the problem is that in your demo the parallax1 item is already in the viewport on page load so it automatically starts animating.

 

I moved it down 800px and now it seems to start animating when it scrolls into view.

 

http://codepen.io/GreenSock/pen/QNdopd?editors=0010

 

I know very little about ScrollMagic so you may want to consult the author for my advice.

 

Petr Tichy has a great series of tutorials to walk you through the basics of ScrollMagic: https://ihatetomatoes.net/5-days-with-scrollmagic/

[ratherbcoding]

Thanks for the informative reply, Carl! And while I'm at it, thanks for GreenSock! I'm loving it so far! 

 

Using your advice and a bit of experimentation, I was able to get this working great!

 

You can see it

See the Pen yOgZgN by ksefchik (@ksefchik) on CodePen

! It seems that ScrollMagic is smart enough to pause the animation and hijack it itself as soon as it gets it's grubby mitts on the tween object. :3

 

The relevant code was: 

var scene1 = new ScrollMagic.Scene({
  triggerElement: "#parallax1"
});
scene1.setTween(new TweenMax($("#parallax1"), 1, {
  backgroundPosition: "center 200px",
  ease: Linear.easeNone
}));
scene1.addTo(controller);