I was able to successful make a countdown timer for a project. But when I duplicate this component, which is made to be interactive with itself, into an auto layout, the timer would count back according to how many duplicates exist within the auto layout.
For example: If I have 4 timer components in an auto layout, then the timer would count back in increments of 4. Does anyone know how to resolve this issue?
Here are my conditional prototype settings:
Hi, Kahlil. Will it be alright for you to send the file? If not, can you send a video showing 2 frames—1 with only 1 instance and the other with 4 instances?
Hi Raphael, here’s a video of timer with 1 instance and a separate video with the timer on 4 instances.
Hmmm… I think because the interaction is on the component level. It does the function as many times as many of your instances is in the frame. So what it do is run 1 function that subtracts 1 on your variables and then repeat it again because there is another function on another instance, and so on as to how many times it detects the same function.
So I think what you need to do is to either:
- Delete the Interaction on the component level and do it on the page level; or
- Delete the interactions of the other instances on the same page (means you can only have 1 function running).
Ok, but I want each component to have this timer. Would I still be able to do that by setting the instance on a page level? If so, how would I do that?
Yes, since they are run with variables.
Just apply the after delay function on the page itself on the frame
I created a brief sample for you. In this video you can see that i set the function on the component level so all instances will also have the same function. For 1 instance its decrement is 1, for 2 its 2, and so on. So, what I did is I remove the functions for the other instances and retain only 1 function.