Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #1066660

    I have a Tab section with 3 tabs – and have 3 columns in each tab with multiple 1/3 columns with a fade animation on all the column element containers.
    The first tab works great, all content fades in sequentially. However when switching from tabs – it seems the fade in stops working after the second row. It seems to get stuck on transparent for some reason. If i shift refresh the page – it seems to force them to load and fade in correctly.

    it seems this css does not get triggered at times:

    .avia_transform.avia_desktop .av-animated-generic {
        opacity: 0;

    Any thoughts on what is going on or how i can fix?

    • This topic was modified 1 year, 7 months ago by  jomo5280.

    Fixed! I added the following classes to my column elements to force all fade-in columns to animate on page load or tab title click (not waiting to scroll through viewport).

    CSS Class:
    av-animated-generic fade-in avia_start_animation avia_start_animation_when_active

    I think the “avia_start_animation_when_active” class forced it to start animation on page load/tab title click.
    This fixed content in my tab-sections that had the fade effect not to get stuck on 0 opacity.

    Hope this fix helps others if they have same situation!

    • This reply was modified 1 year, 7 months ago by  jomo5280.

    Hi jomo5280,

    Glad you got it working for you and thank you for sharing! :)

    If you need further assistance please let us know.

    Best regards,

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.