Streaming live at 10am (PST)

Looped animation skipping in safari

Hello! I am having a problem with one of my looping animations. It looks fine on chrome, but on safari, it randomly jumps across the page for one loop and then moves correctly except for it skips between each loop. It is supposed to be a smooth transition between 50% and 100% opacity back and forth.

The element in question is the text that says “scroll down to see projects.” Is there any way to fix it in safari, or if not, is there any way to disable the animation in everything but chrome?

Thanks in advance!


Here is my public share link: https://www.jakemartindesigns.com
Read-only link: https://preview.webflow.com/preview/jakemartin?utm_medium=preview_link&utm_source=dashboard&utm_content=jakemartin&preview=ff32af6df319d53f7a302733564351f6&mode=preview

hi @7mjake

Try to do the animation both the opacity and move in the same interaction - see if that helps

@IVG that didn’t fix it unfortunately :frowning: thanks for the idea though, cleaned up my animation organization

here is another thing to try,

first, instead of using “selected element” selector used “class”

second, for every interaction step fill in all the values - meaning if it doesn’t move add a zero and if it moves add a value, and make sure that all the units (px’s or %'s or whatever) are the same on every step of the animation

1 Like

@IVG That fixed the skipping between each loop (yay!) but the arrow is still jumping to the left side of the screen every few loops (totally random, don’t see a pattern or trigger).

FIXED IT!! Took some messing around, but instead of animating the opacity of the text and arrow as a group, I gave each of them their own opacity action within the animation! :man_shrugging: