design-themes/website_animate/views/options.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="no-js_fallback" inherit_id="website.layout">
        <xpath expr="//t[@t-set='head']" position="before">
            <t t-set="head_website_animate">
                <!-- Show elements if js is disabled -->
                <noscript id="o_animate-no-js_fallback">
                    <style type="text/css">
                        .o_animate{
                        /* If no js - force elements rendering */
                        visibility:visible;

                        /* If browser support css animations support - reset animation */
                        -webkit-animation-name: none-dummy;
                        animation-name: none-dummy;
                        }
                    </style>
                </noscript>
            </t>
            <t t-set="head_website" t-value="head_website + head_website_animate"/>
        </xpath>
    </template>

    <!--
    How to define an animable element in your theme
    ===============================================
    <xpath expr="//t[@t-set='o_animate_elements']" position="after">
        <t t-set="o_animate_elements" t-value="o_animate_elements + ['.myclass']"/>
    </xpath>
    ===============================================
    -->
    <template id="o_animate_options" inherit_id="website.snippet_options">
        <xpath expr="(//div[@data-js])[last()]" position="after">
            <t t-set="o_animate_elements" t-value="['.o_animable', 'section', 'img', '.fa', '[class^=\'col-md\']', '.btn']"/>
            <t t-set="o_animate_selector" t-value="', '.join([s + ':not(.o_not-animable)' for s in o_animate_elements])"/>

            <div data-js='o_animate' t-att-data-selector="o_animate_selector">
                <li class="dropdown-submenu o_anim_li">
                    <a href="#"><i class="fa fa-bolt"/>Animate</a>
                    <ul class="dropdown-menu">
                        <li data-select-class=""><a href="#">Disable animation</a></li>
                        <li class="divider"/>
                        <li class="dropdown-submenu o_anim_entrance-fading_li">
                            <a href="#">Fading</a>
                            <ul class="dropdown-menu">
                                <li data-select-class="o_anim_fade_in"><a href="#">Fade In</a></li>
                                <li data-select-class="o_anim_fade_in_down"><a href="#">Fade In-Down</a></li>
                                <li data-select-class="o_anim_fade_in_left"><a href="#">Fade In-Left</a></li>
                                <li data-select-class="o_anim_fade_in_right"><a href="#">Fade In-Right</a></li>
                                <li data-select-class="o_anim_fade_in_up"><a href="#">Fade In-Up</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu o_anim_entrance-bounce_li">
                            <a href="#">Bouncing</a>
                            <ul class="dropdown-menu">
                                <li data-select-class="o_anim_bounce_in"><a href="#">Bounce In</a></li>
                                <li data-select-class="o_anim_bounce_in_down"><a href="#">Bounce In-Down</a></li>
                                <li data-select-class="o_anim_bounce_in_left"><a href="#">Bounce In-Left</a></li>
                                <li data-select-class="o_anim_bounce_in_right"><a href="#">Bounce In-Right</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu o_anim_entrance-rotate_li">
                            <a href="#">Rotating</a>
                            <ul class="dropdown-menu">
                                <li data-select-class="o_anim_rotate_in"><a href="#">Rotate In</a></li>
                                <li data-select-class="o_anim_rotate_in_down_left"><a href="#">Rotate In-Down-Left</a></li>
                                <li data-select-class="o_anim_rotate_in_down_right"><a href="#">Rotate In-Down-Right</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu o_anim_entrance-rotate_li">
                            <a href="#">Zoom</a>
                            <ul class="dropdown-menu">
                                <li data-select-class="o_anim_zoom_in"><a href="#">Zoom In</a></li>
                                <li data-select-class="o_anim_zoom_in_down"><a href="#">Zoom In-Down</a></li>
                                <li data-select-class="o_anim_zoom_in_left"><a href="#">Zoom In-Left</a></li>
                                <li data-select-class="o_anim_zoom_in_right"><a href="#">Zoom In-Right</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu o_anim_effects-attention_li">
                            <a href="#">Attention Seekers</a>
                            <ul class="dropdown-menu">
                                <li data-select-class="o_anim_flash"><a href="#">Flash</a></li>
                                <li data-select-class="o_anim_pulse"><a href="#">Pulse</a></li>
                                <li data-select-class="o_anim_shake"><a href="#">Shake</a></li>
                                <li data-select-class="o_anim_tada"><a href="#">Tada</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu o_anim_effects-flippers_li">
                            <a href="#">Flippers</a>
                            <ul class="dropdown-menu">
                                <li data-select-class="o_anim_flip_in_x"><a href="#">Flip-In-X</a></li>
                                <li data-select-class="o_anim_flip_in_y"><a href="#">Flip-In-Y</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </div>
        </xpath>
    </template>

    <template id="o_animate_options_options" inherit_id="website_animate.o_animate_options" active="False">
        <xpath expr='//div[@data-js="o_animate"]' position="after">
            <div data-js='o_animate_duration' t-att-data-selector="o_animate_selector">
                <li class="dropdown-submenu hidden"> <!-- Visible only if an animation is active (js) -->
                    <a href="#"><i class="fa fa-hourglass-half"/>Animation Duration</a>
                    <ul class="dropdown-menu o_anim_ul_timing">
                        <span class="timeline duration">
                            <span>
                                <span simulate="delay"/>
                            </span>
                            <span>
                                <span simulate="duration"/>
                            </span>
                        </span>
                        <li data-select-class="o_anim_dur500"><a href="#">500ms</a></li>
                        <li data-select-class=""><a href="#">1000ms (default)</a></li>
                        <li data-select-class="o_anim_dur1500"><a href="#">1500ms</a></li>
                        <li data-select-class="o_anim_dur2000"><a href="#">2000ms</a></li>
                        <li data-select-class="o_anim_dur2500"><a href="#">2500ms</a></li>
                        <li data-select-class="o_anim_dur3000"><a href="#">3000ms</a></li>
                    </ul>
                </li>
            </div>

            <div data-js='o_animate_delay' t-att-data-selector="o_animate_selector">
                <li class="dropdown-submenu hidden"> <!-- Visible only if an animation is active (js) -->
                    <a href="#"><i class="fa fa-clock-o"/>Animation Delay</a>
                    <ul class="dropdown-menu o_anim_ul_timing">
                        <span class="timeline delay">
                            <span>
                                <span simulate="delay"/>
                            </span>
                            <span>
                                <span simulate="duration"/>
                            </span>
                        </span>
                        <li data-select-class=""><a href="#">No delay (default)</a></li>
                        <li data-select-class="o_anim_del500"><a href="#">500ms</a></li>
                        <li data-select-class="o_anim_del1000"><a href="#">1000ms</a></li>
                        <li data-select-class="o_anim_del1500"><a href="#">1500ms</a></li>
                        <li data-select-class="o_anim_del2000"><a href="#">2000ms</a></li>
                        <li data-select-class="o_anim_del2500"><a href="#">2500ms</a></li>
                    </ul>
                </li>
            </div>

            <div data-js='o_animate_options' t-att-data-selector="o_animate_selector">
                <li class="dropdown-submenu hidden"> <!-- Visible only if an animation is active (js) -->
                    <a href="#"><i class="fa fa-cogs"/>Animation Options</a>
                    <ul class="dropdown-menu o_anim_ul_options">
                        <li data-toggle-class="o_animate_both_scroll"><a href="#">Each time it becomes visible</a></li>
                    </ul>
                </li>
            </div>
        </xpath>
    </template>
</odoo>