Streaming live at 10am (PST)

Modifying Animations On Elements At Different Breakpoints?

Hey all does anyone know if it’s possible to modify animations on specific elements at different breakpoints (specifically simple X-Y axis movements)?

I have a marquee going across my page that resets itself beyond moving a certain horizontal pixel point. The text in the marquee looks way too big on smaller devices (e.g. smartphone) so I’d love to adjust the size of the text in the marquee
by making it smaller, but that would screw up the entire animation on that smaller breakpoint by no longer making the animation seamlessly reset. For example, I have a marquee on my homepage saying “work—work—work—work—work—” across the page, which also serves as a link to my work page listing out all my projects. I have the scrolling marquee reset back to the beginning (i.e. the first work) when it reaches the same point in the third “work” word. I made it so it’s barely noticeable that it resets back to the beginning so that it looks like one seamless moving neverending marquee. My concern is if I shrink the text down to a smaller size that the animation will no longer be seamless since the animation is currently based on the current existing size and would not be based on the new smaller font size on smaller screens. So there’d probably be a sudden jerky movement every 15 seconds or so, which is what I want to stay away from.

Any ideas as to how I could tackle this problem?

I’ll add a screenshot of the three stacked marquees as well as a link to my website below so you can see what I mean.


Here is my site Read-Only:
https://preview.webflow.com/preview/ryan-leckie?utm_medium=preview_link&utm_source=designer&utm_content=ryan-leckie&preview=325d9594cb61b4343296af8b798be0dd&workflow=preview