Jump to content
Search Community

Responsive tween variables - className caching

vektor test
Moderator Tag

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

Hi! I'm a little stuck on a little issue ? 


I am trying to make a simple responsive variable in a tween. At different screen sizes, the box needs to move up by varying amounts ( does not work with yPercent )


It was suggested somewhere on this forum that className would work for this, but the css values seem to 'cache' to whatever rules applied at the screen size on page load. i.e. On the codepen the red box should move to the top of the grey bar, and < 1000px turn black, > 1000px turn green.  

It does this if you run the pen at either size, but if you resize live the initial css value is always used.


Is there an easy way around this? Or a simpler method? 


I also tried using modifier plugin, as suggested elsewhere, but had similar results ( I couldn't find the modifiers plugin js link to make another  codepen, commented out in my demo )


I'm guessing some sort of destroy / rebuild the timeline on resize would do the trick, but would be nice if I didn't have to do that? ( maybe not relevant but I am attaching it to a scrollmagic scene, which triggers the shrink / expand nav logo on scroll )


Cheers Greensock you're awesome!





See the Pen VGYqzz by bananafarma00 (@bananafarma00) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Thanks for the demo it definitely helped to explain what you want to achieve.


I don't have an easy or quick answer for you but perhaps some ideas that will trigger a solution from you or the other mods.


The reason this is a bit of a challenge is because an animation records its starting and end values. Once you create an animation the engine remembers those values and interpolates between them. This makes it very easy to have runtime control over 1000s of animations (play, pause, restart, reverse, etc) with no impact on performance. 


The ModifiersPlugin is probably the first tool to reach for when you want mess with a tween while it is running. Its important to note that it does NOT record new start and end values, but it intercepts and changes values on every update to a tween.


Please consult this demo from @OSUBlake that illustrates that you can resize the browser window while the animation is running and the box always moves to and from opposite corners without changing any start or end values in the tween


See the Pen bMLppe?editors=0010 by osublake (@osublake) on CodePen


Perhaps you can use a similar calculation / ratio based on the screen size to determine the amount of offset of your box.


The ModifiersPlugin is not a members-only bonus plugin so it doesn't need a special URL for CodePen.

To get the URL you can:

However, like you suggested I think it may be a bit easier to:

  • detect the change in window size with a media query
  • record the current progress() of the tween
  • create a new one and start it at the same progress() of the previous one.

Its possible there is another way. @OSUblake has another approach using CSS vars. Its really cool and I suspect you could adapt it to your case

See the Pen XEJMWE?editors=0110 by osublake (@osublake) on CodePen




  • Like 1
Link to comment
Share on other sites

Great, I think I'll start with trying the modifier plugin method, as I have other more complex animations that may need this approach.


Also the other method of creating a new tween at the same progress(), I'd have to get my head around how this would work with Scrollmagic scenes. I assume I would have to also destroy and re-create the scrollmagic scene and re-add the timeline. But don't know if there's a way to add an in progress tween... So using modifiers is sounding a bit nicer at the moment..


I just worked out what I was doing wrong with modifiers method, I was doing this, which was making it jump to the values


tl.to($logo, 0.8, {scale: 0.6, y: 1, modifiers: { y: function(y){return $(window).width() >= 1000 ? -10 : 40}}, repeat: -1, yoyo: true }, "start");


I needed to do this to make it tween properly


tl.to($logo, 0.8, {scale: 0.6, y: 1, modifiers: { y: function(y){return $(window).width() >= 1000 ? y * -10 : y * 40}}, repeat: -1, yoyo: true }, "start");


Here's the working Codepen  

See the Pen YOXPEr?editors=1111 by bananafarma00 (@bananafarma00) on CodePen



CSS vars thing looks cool, unfortunately my project needs to work in IE11 too so will have to think about that one


Great info, Cheers!!! 


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.
  • Create New...