Forum Discussion
Carousel
Hi everyone,
I have built this rotating carousel in Articulate Storyline that is controlled by 3 numbered buttons underneath. When you click each button, the corresponding card with the same number as the button rotates around to the front whilst getting bigger.
Sometimes, when I preview it, it works 100%. But sometimes, the wrong card rotates round. For example, if I press the button1, card 2 moves to the front.
Also, when I first preview it, the card2 is at the front, when I would like card 1 to be there instead.
For the life of me, I can't figure out where I am going wrong.
Any ideas?
Thanks in advance!
3 Replies
Hi Keith,
There were several issues with this interaction, including incorrect initial positioning of the cards, cards rotating out of sequence, and visual glitches caused by overlapping transitions. I’ve fixed the positioning so that Card 1 now correctly starts at the front, and the card order logic is aligned with the button inputs.
However, the biggest issue was due to users clicking the buttons too quickly. Each button triggers a GSAP rotation function, and if another button is clicked before the previous animation finishes, the rotation logic breaks often resulting in the wrong card coming forward.
To address this, I’ve added a "locking mechanism" using a variable (isAnimating) that tracks when an animation is in progress. This prevents new rotation calls from being triggered until the current animation is complete. I’ve also linked this variable to Storyline, allowing the buttons to be temporarily disabled while the rotation is active avoiding accidental or rapid clicks.
I've attached a revised version of your Story file for review.
Hi Nedim,
How are you?
Thank you for helping out. That's really appreciated.
However, I don't think that this is working as I have envisioned.
It starts off with the right card when I preview but the buttons do not work as you stated because of the triggers that disable these. Therefore the cards do not rotate around when you click them.Thanks
I understand. The buttons are currently disabled for 1.2 seconds (rotation time) to prevent them from being clicked during ongoing animations. This ensures that rotation functions aren’t triggered too quickly, which could otherwise cause the cards to rotate out of sequence or lead to overlapping transitions.
As mentioned earlier, rapid clicks during animations can break the expected flow. Instead of disabling the buttons, you could also temporarily hide them during the 1.2-second delay.
Alternatively, try reducing the animation duration from 1.2 seconds to 0.6 seconds. Then, remove triggers that disables the buttons during the animation. This might work better for your use case.
