Jump to content


TweenMax ignoring immediateRender: false

Moderator Tag
Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.




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/

  • Like 3
Link to comment
Share on other sites

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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.