Login
Animations

Bold-logo

07 Oct 2022

Bold logo animation
HTML
SCSS 
                            <div class="cont bold-logo-wr">
    <a href="https://www.boldidentities.com/" id="bold-credits" target="_blank"></a>
    <script>
                    var site_dir = '<?= _SITEDIR_ ?>'
                    // BOLD Lottie init
                    window.addEventListener("load", function () {
                        lottie.loadAnimation({
                            container: document.getElementById(`bold-credits`),
                            renderer: "svg",
                            loop: true,
                            autoplay: true,
                            path: site_dir + "./public/js/lottie/BOLD-white-logo.json",
                        });
                    })
   </script>
</div>
                        
                            .bold-logo-wr {
    display: flex;
    justify-content: flex-start;
}

#bold-credits {
    width: ac(150px, 120px);
    margin: ac(30px, 20px) 0;
    transition: all 0.3s;

    &::before {
        display: none;
    }

    &:hover {
        transform: scale(1.14);
    }
}

lottie.zip

0