Jump to content


TweenMax: change pixel value based on browser size

Go to solution Solved by GreenSock,

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 using TweenMax with scrollmagic.  I was hoping to have my top: 200px, change dynamically based on the size of the browser, so something like $('#container-div).position().top * 1.2 instead of 200px
Is this possible?
Thanks very much
var controller = new ScrollMagic();
  var seq = new TimelineMax()
    .add(TweenMax.to("#top-text-container", 100, {top: "200px", force3D:true}))
  new ScrollScene({

Link to comment
Share on other sites

  • Solution

If I understand your question correctly (and I may not), yes, you can certainly do that but it won't be truly dynamic in the sense that it's not going to reach into the tween and update the end value if the user resizes the browser after you created the tween. But you're welcome to do what you were talking about:

.add(TweenMax.to("#top-text-container", 100, {top: $('#container-div').position().top * 1.2, force3D:true}))

You could also kill() the old tween and create a new one whenever the user resizes the browser window, feeding in the new values that you've calculated.

  • Like 1
Link to comment
Share on other sites

thanks.  the kill() is a solution that works great actually!

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.