Is it possible to set alternate triggers?

  • I have a tabs block that I would like the animations to play when a tab is displayed. At the moment the animation on hidden tabs is playing when the tabs block scrolls into view, so there’s no animation on the tab is displayed.

    I appreciate that it’s impossible for you to code for every single tabs block out there, so I was wondering if there is a mechanism whereby I could add a setting so that I can specify the active tab css and your plugin then adds the relevant css for the animation.

    Cheers

Viewing 1 replies (of 1 total)
  • Plugin Author websevendev

    (@websevendev)

    One potential method could be to use custom CSS depending on what animation you use. For example if you’re using “Flip down” then the block receives this CSS from AOS:

    for the initial state:

    html:not(.no-js) [data-aos=flip-down] {
    	transform: perspective(2500px) rotateX(100deg);
    }

    and for the animated state:

    html:not(.no-js) [data-aos=flip-down].aos-animate {
    	transform: perspective(2500px) rotateX(0);
    }

    Take the initial state CSS and apply it with higher specificity to the block in the hidden tab to “unanimate” it, for example:

    html:not(.no-js) .tabs > .tab-content [data-aos=flip-down] {
    	transform: perspective(2500px) rotateX(100deg);
    }

    and animate it when the tab is opened:

    html:not(.no-js) .tabs > .tab-content[data-open=true] [data-aos=flip-down] {
    	transform: perspective(2500px) rotateX(0);
    }
Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.