twkmedia Posted June 9, 2020 Share Posted June 9, 2020 Hi there, I'm looking for the best way to make the values in a timeline responsive. So at certain breakpoints the value to tween to changes. I've looked at using the modifiers but this then doesn't tween between the values it just sets it: modifiers: { left : function(val){ var newVal = 50; if($(window).width() < 920){ newVal = '70'; } return '-' + newVal + 'vh'; } } Is there a way to make this approach work, or would you recommend another? Thanks Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 9, 2020 Share Posted June 9, 2020 2 hours ago, twkmedia said: I'm looking for the best way to make the values in a timeline responsive. It depends on the nature of how you want it to be responsive. Often times people will use different timelines for different breakpoints. Or they'll kill them off and recreate them if the breakpoint is passed. Or they use responsive units so it works on all sizes. Not many people use modifiers, but you could use it if you used a formula instead of just setting it to an explicit value. It depends on the nature of what you need Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 9, 2020 Share Posted June 9, 2020 By the way, try to avoid animating the left value as it's not very performant. Try to use x instead whenever you can. Link to comment Share on other sites More sharing options...
twkmedia Posted June 9, 2020 Author Share Posted June 9, 2020 Thanks Zach. Ah yes, very good point on the x instead of left. Is there a reason not to use modifiers? It seems like the DRYest solution for long timelines. What sort of formula would you use? Guess it would need to be multiplied by the time of the current tween somehow? Thanks Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 9, 2020 Share Posted June 9, 2020 3 minutes ago, twkmedia said: Is there a reason not to use modifiers? Complexity is one argument against them. But if it works, it works. 3 minutes ago, twkmedia said: What sort of formula would you use? Guess it would need to be multiplied by the time of the current tween somehow? Well, if you have a tween that goes from 0 -> 50 and you want it to do 0 -> 70 instead then you need to multiply the value by 70/50 = 1.4. Link to comment Share on other sites More sharing options...
twkmedia Posted June 9, 2020 Author Share Posted June 9, 2020 ok yeah makes sense thank you. Needed to use the val paramater to then modify. This is what I ended up using for anyone else interested: .to('.full-screen-menu__ball', { left: '-50', ease: "power4.out", duration: 0.65, modifiers: { left : function(val){ var newVal = parseInt(val); if($(window).width() < 920){ newVal = newVal * 1.4; } if($(window).width() < 768){ newVal = newVal * 1.8; } return newVal + 'vh'; } } }, 'ball-moving') Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now