twkmedia

Hi Zach, I'm struggling to see why the codepen is working but the site is not. Have you got any pointers on what could cause the behaviour I'm describing? Are you able to take a quick look at the link I sent you to see the problem? I've added a red stroke on the path to make the issue more obvious. Thank you David

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

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

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

Hi there, I have a SVG with some paths in that I'm scaling up and then getting a ball to follow the path. This works great in Chrome but in safari the ball follows the original path rather than the scaled path. It does however look like the path is being scaled up correctly (see screenshot). Any ideas? Thanks in advance