Fly In Animated Headline

[guybower1]

Hi

I have been doing some research on animating a headline and found an interesting demo here https://www.youtube.com/watch?v=QZpZ1zRcR6c

The gist of it is you create a list like this

<ul class="fly-in-text hidden">
            <li>W</li>
            <li>E</li>
            <li>L</li>
            <li>C</li>
            <li>O</li>
            <li>M</li>
            <li>E</li>
</ul>

The letters are unimportant for now, as was simply trying to get it to work.

The CSS to affect the letters is this

* {
                margin: 0;
                padding: 0;
            }
            body {
                background-color: #000;
            }
            .fly-in-text {
                list-style: none;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
            .fly-in-text li {
                display: inline-block;
                margin-right: 50px;
                font-family: Open Sans, Arial;
                font-weight: 300;
                font-size: 4em;
                color: #fff;
                opacity: 1;
                transition: all 2.5s ease;
            }
            .fly-in-text li:last-child {
                margin-right: 0;
            }
            .fly-in-text.hidden li {
                opacity: 0;
            }
            .fly-in-text.hidden li:nth-child(1) { transform: translateX(-200px) translateY(-200px); }
            .fly-in-text.hidden li:nth-child(2) { transform: translateX(20px) translateY(100px); }
            .fly-in-text.hidden li:nth-child(3) { transform: translateX(-150px) translateY(-80px); }
            .fly-in-text.hidden li:nth-child(4) { transform: translateX(10px) translateY(-200px); }
            .fly-in-text.hidden li:nth-child(5) { transform: translateX(-300px) translateY(200px); }
            .fly-in-text.hidden li:nth-child(6) { transform: translateX(20px) translateY(-20px); }
            .fly-in-text.hidden li:nth-child(7) { transform: translateX(30px) translateY(200px); }

That all seems well and good. if I change the opacity to 1, I can see that the letters are indeed there and spaced all over the place.

What doesn’t seem to work is the javascript to make the animation happen and I wondered if you had any idea what is stopping it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript">

            $(function() {

                setTimeout(function() {
                    $('.fly-in-text').removeClass('hidden');
                }, 500);

            })();

        </script>

Is there anything specific to Pro which would stop such an animation from working? It’s quite a nice smooth transition effect. and was wondering how to properly implement it in Pro

Regards

[tristup]

Hi @guybower1,

Just to inform you that currently we don’t have but, effects are going to be added in the future. See https://theme.co/content/status-report-july-01-2020
Till then you can add this code without adding the jQuery as WordPress adds it automatically. Just add the following code to your JS section.

(function($){
 setTimeout(function() {
                    $('.fly-in-text').removeClass('hidden');
                }, 500);
});
})(jQuery);

Hope it works for you

Thanks.