Responsive timeline values

[twkmedia]

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

[ZachSaucier]

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  

[ZachSaucier]

By the way, try to avoid animating the left value as it's not very performant. Try to use x instead whenever you can.

[twkmedia]

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

[ZachSaucier]

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.

[twkmedia]

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')