After delay not working in preview

Hey everybody

Im creating a component using “after delay” and even though its not grayed out and i can add it normally, when i go to preview mode, it doesnt work!!

Ive been trying it for a few days now with different components but it never works.

Does anyone know ther reason?

Thanks

1 Like

i think it actually start working only after i have the preview page on for like 10 min… which is weir coz i have the dealy after 1ms …

I’ve just had this issue and I’ve figured it out (I think)

Firstly, It’s ony happening in browsers on windows for me. MacOS seems fine.

If the delay is set to a time short than it takes for all the images to load in - then transition wont trigger:

3 work arounds that I can see:

  1. Add an intro frame that hides the loading process, maybe with a “start prototype” button?

  2. Increase initial delay to cover that loading time (not ideal if part of a looping chain of transitions)

  3. Compress images to load faster

None of these are ideal - really, figma should pre-load every asset before it shows the prototype!

1 Like

I faced the same issue and was looking for a solution. It felt like Figma was going buggy.

I had applied an after-delay transition but it didn’t seem to work in the preview mode.

But then when I was trying to change the settings in preview mode I found a restart button at the bottom right corner, and after clicking it, the after-delay started to work out fine.

I hope this helps if someone faces this problem again.

3 Likes

I’m not exactly sure whether this applies.

I was having a similar result (delay-induced cycling only starting after a very long while), but I wasn’t able to reproduce that specifically after reading this thread.

Anyway, what lead me to this discussion in the first place was that I was unable to load a cyclical animation in a component. At all. Even after a while, the timer never seemed to trigger. In my case it’s a text input cursor blinking (half a second on, half a second off).

After a long session of debugging (toggling every possible option on and off to see if it had an impact), I realized my problem was that I was toggling the first variant visibility with a boolean. Basically, the component starts as invisible, its visibility is linked to a boolean (initially false) variable. Clicking somewhere sets that variable to true, revealing the component.
This chain of events seems to be incompatible with the way the timer of the After Delay option is normally triggered (as a result, it never starts).

I remember in a previous iteration of this (although unaware of what I have just described at the time), after trial-and-error I had ended up solving it by triggering the equivalent of my boolean toggle via a mouse-click.
In this iteration though, mouse-click wasn’t an option for me. Given that the visibility boolean was set to true by clicking on the very location where the variant was meant to appear, adding a Mouse Enter condition to trigger a change to the 2nd variant of the cycle did the trick for me.

So basically:
Click
_ → Visibility Boolean set to true
__ → Variant1 is visible, but timer is frozen
___ → Mouse is already over Variant1
____ → Change to Variant2 and timer initiates successfully

After the Mouse-Enter-triggered variant-change, the timer of the second variant starts normally and the cycle is initiated successfully.