I am having trouble triggering animations correctly in the tab section that has “supervised”, “secured” and “auditable” on the homepage of the website.
The first tab automatically plays when scrolled into view which is the desired interaction. When you first click on the tabs, the animations correctly play. They don’t loop, which is fine. But when you select a tab after it’s been selected and played once, the relative animation is frozen at the end and doesn’t trigger to play again. This is happens for when you select on a tab on the second time after its animation has already played through.
The ideal state is that when you click on a tab, the relative animation starts playing every time, even if you have clicked on it a few times before. You can ideally switch from tab to tab and always have the relative animation start playing.
I still want to make sure that when the entire section is scrolled into view, the “secured” animation automatically starts to play.
1- uncheck set as initial state, will fix the restarting animation issue.
2- If you want to lottie animation to restart playing on everytime tab button is clicked, just create a single interaction and attach to tab button using class selector, you created multiple Tab Change IN 2, Tab Change IN 3, Tab Change OUT 2,
@ahmed_moeed
1- Where is the set as initial state that you are referring to here?
2 - Right now the interactions are different because the animation that they are playing has a different class name. Aka Tab Change IN 2 changes lottie-tab2 and Tab Change IN 3 changes lottie-tab3. Are you saying that the lottie tabs should just be 1 class name?
