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>

    <template id="o_animate_options" inherit_id="website.snippet_options">
        <xpath expr="." position="inside">
            <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(o_animate_elements)"/>
            <div data-js="o_animate"
                t-att-data-selector="o_animate_selector"
                data-exclude=".o_not-animable">
                <div class="dropdown-submenu o_anim_li">
                    <a href="#" class="dropdown-item"><i class="fa fa-bolt"/>Animate</a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item" data-select-class="">Disable animation</a>
                        <div class="dropdown-divider"/>
                        <div class="dropdown-submenu o_anim_entrance-fading_li">
                            <a href="#" class="dropdown-item">Fading</a>
                            <div class="dropdown-menu">
                                <a href="#" class="dropdown-item" data-select-class="o_anim_fade_in">Fade In</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_fade_in_down">Fade In-Down</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_fade_in_left">Fade In-Left</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_fade_in_right">Fade In-Right</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_fade_in_up">Fade In-Up</a>
                            </div>
                        </div>
                        <div class="dropdown-submenu o_anim_entrance-bounce_li">
                            <a href="#" class="dropdown-item">Bouncing</a>
                            <div class="dropdown-menu">
                                <a href="#" class="dropdown-item" data-select-class="o_anim_bounce_in">Bounce In</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_bounce_in_down">Bounce In-Down</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_bounce_in_left">Bounce In-Left</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_bounce_in_right">Bounce In-Right</a>
                            </div>
                        </div>
                        <div class="dropdown-submenu o_anim_entrance-rotate_li">
                            <a href="#" class="dropdown-item">Rotating</a>
                            <div class="dropdown-menu">
                                <a href="#" class="dropdown-item" data-select-class="o_anim_rotate_in">Rotate In</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_rotate_in_down_left">Rotate In-Down-Left</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_rotate_in_down_right">Rotate In-Down-Right</a>
                            </div>
                        </div>
                        <div class="dropdown-submenu o_anim_entrance-rotate_li">
                            <a href="#" class="dropdown-item">Zoom</a>
                            <div class="dropdown-menu">
                                <a href="#" class="dropdown-item" data-select-class="o_anim_zoom_in">Zoom In</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_zoom_in_down">Zoom In-Down</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_zoom_in_left">Zoom In-Left</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_zoom_in_right">Zoom In-Right</a>
                            </div>
                        </div>
                        <div class="dropdown-submenu o_anim_effects-attention_li">
                            <a href="#" class="dropdown-item">Attention Seekers</a>
                            <div class="dropdown-menu">
                                <a href="#" class="dropdown-item" data-select-class="o_anim_flash">Flash</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_pulse">Pulse</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_shake">Shake</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_tada">Tada</a>
                            </div>
                        </div>
                        <div class="dropdown-submenu o_anim_effects-flippers_li">
                            <a href="#" class="dropdown-item">Flippers</a>
                            <div class="dropdown-menu">
                                <a href="#" class="dropdown-item" data-select-class="o_anim_flip_in_x">Flip-In-X</a>
                                <a href="#" class="dropdown-item" data-select-class="o_anim_flip_in_y">Flip-In-Y</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div data-js="o_animate_duration"
                t-att-data-selector="o_animate_selector"
                data-exclude=".o_not-animable">
                <div class="dropdown-submenu d-none"> <!-- Visible only if an animation is active (js) -->
                    <a href="#" class="dropdown-item"><i class="fa fa-hourglass-half"/>Animation Duration</a>
                    <div class="dropdown-menu o_anim_ul_timing">
                        <span class="timeline duration">
                            <span>
                                <span simulate="delay"/>
                            </span>
                            <span>
                                <span simulate="duration"/>
                            </span>
                        </span>
                        <a href="#" class="dropdown-item" data-select-class="o_anim_dur500">500ms</a>
                        <a href="#" class="dropdown-item" data-select-class="">1000ms (default)</a>
                        <a href="#" class="dropdown-item" data-select-class="o_anim_dur1500">1500ms</a>
                        <a href="#" class="dropdown-item" data-select-class="o_anim_dur2000">2000ms</a>
                        <a href="#" class="dropdown-item" data-select-class="o_anim_dur2500">2500ms</a>
                        <a href="#" class="dropdown-item" data-select-class="o_anim_dur3000">3000ms</a>
                    </div>
                </div>
            </div>
            <div data-js="o_animate_delay"
                t-att-data-selector="o_animate_selector"
                data-exclude=".o_not-animable">
                <div class="dropdown-submenu d-none"> <!-- Visible only if an animation is active (js) -->
                    <a href="#" class="dropdown-item"><i class="fa fa-clock-o"/>Animation Delay</a>
                    <div class="dropdown-menu o_anim_ul_timing">
                        <span class="timeline delay">
                            <span>
                                <span simulate="delay"/>
                            </span>
                            <span>
                                <span simulate="duration"/>
                            </span>
                        </span>
                        <a href="#" class="dropdown-item" data-select-class="">No delay (default)</a>
                        <a href="#" class="dropdown-item" data-select-class="o_anim_del500">500ms</a>
                        <a href="#" class="dropdown-item" data-select-class="o_anim_del1000">1000ms</a>
                        <a href="#" class="dropdown-item" data-select-class="o_anim_del1500">1500ms</a>
                        <a href="#" class="dropdown-item" data-select-class="o_anim_del2000">2000ms</a>
                        <a href="#" class="dropdown-item" data-select-class="o_anim_del2500">2500ms</a>
                    </div>
                </div>
            </div>
            <div data-js="o_animate_options"
                t-att-data-selector="o_animate_selector"
                data-exclude=".o_not-animable">
                <div class="dropdown-submenu d-none"> <!-- Visible only if an animation is active (js) -->
                    <a href="#" class="dropdown-item"><i class="fa fa-cogs"/>Animation Options</a>
                    <div class="dropdown-menu o_anim_ul_options">
                        <a href="#" class="dropdown-item" data-toggle-class="o_animate_both_scroll">Each time it becomes visible</a>
                    </div>
                </div>
            </div>
        </xpath>
    </template>
</odoo>