CODEWITHSUNDEEP
javascripthtmljquerycsscss-animations
matheusrvdc
matheusrvdc

Reputation: 35

Trigger animation on page load

I have a code that triggers an animation on some elements when they're hovered by adding a second css class on them, and once it's done, this class is removed so it becomes static again. I don't know how to make the animation happen every time the page is loaded tho, I tried adding a "window.load" function but it didn't work out. I'd appreciate if someone could shed me a light on it.

Here's the snippet: https://jsfiddle.net/6fmno8vb/1/

$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
    $(this).addClass("done");
    if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
        $(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
    }
});

$(".main-logo").mouseenter(function () {
    $(".draw, .draw2, .logo-box").addClass("anim");
});
body {
    width: 100%;
    background: #fff;
}

.main-logo {
    float: left;
    margin: 0 30%;
    display: block;
}

.logo-box {
    background: #000;
    width: 200px;
    height: 200px;
    float: left;
    transition: all 0.25s ease;
    transform: scale(1);
}

.logo-box.anim {
    transform: scale(1.07) translate(-3px, 3px);
    transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}

.draw {
    background: #d7cf00;
    width: 50px;
    height: 50px;
}

.draw.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

.draw2 {
    background: #db0a28;
    width: 50px;
    height: 50px;
}

.draw2.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

@keyframes animate {
    0% {
        transform: scale(0.5);
    }
    20% {
        transform: scale(0.3);
    }
    60% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
    <div class="main-logo">
        <div class="logo-box">
            <div class="draw"></div>
            <div class="draw2"></div>
        </div>
    </div>
</body>

Thanks!

Upvotes: 2

Views: 2646

Answers (2)

s.kuznetsov
s.kuznetsov

Reputation: 15223

I will give two solutions.

Wrap event mouseenter with a window load event.

$(window).on('load', function() {
    ...
    $(".main-logo").trigger("mouseenter");
});


$(window).on("load", function () {
    $(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
        $(this).addClass("done");
        if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
            $(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
        }
    });

    $(".main-logo").mouseenter(function () {
        $(".draw, .draw2, .logo-box").addClass("anim");
    });

    $(".main-logo").trigger("mouseenter");
});
body {
    width: 100%;
    background: #fff;
}

.main-logo {
    float: left;
    margin: 0 30%;
    display: block;
}

.logo-box {
    background: #000;
    width: 200px;
    height: 200px;
    float: left;
    transition: all 0.25s ease;
    transform: scale(1);
}

.logo-box.anim {
    transform: scale(1.07) translate(-3px, 3px);
    transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}

.draw {
    background: #d7cf00;
    width: 50px;
    height: 50px;
}

.draw.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

.draw2 {
    background: #db0a28;
    width: 50px;
    height: 50px;
}

.draw2.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

@keyframes animate {
    0% {
        transform: scale(0.5);
    }
    20% {
        transform: scale(0.3);
    }
    60% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
    <div class="main-logo">
        <div class="logo-box">
            <div class="draw"></div>
            <div class="draw2"></div>
        </div>
    </div>
</body>

If you trigger a mouse event immediately after the page is launched, then it does not always look efficient. I advise you to wrap the event mouseenter call in setTimeout(), specifying any appropriate value for the delay.

setTimeout(function () {
    $(".main-logo").trigger("mouseenter");
}, 1000);


setTimeout(function () {
    $(".main-logo").trigger("mouseenter");
}, 1000);

$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
    $(this).addClass("done");
    if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
        $(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
    }
});

$(".main-logo").mouseenter(function () {
    $(".draw, .draw2, .logo-box").addClass("anim");
});
body {
    width: 100%;
    background: #fff;
}

.main-logo {
    float: left;
    margin: 0 30%;
    display: block;
}

.logo-box {
    background: #000;
    width: 200px;
    height: 200px;
    float: left;
    transition: all 0.25s ease;
    transform: scale(1);
}

.logo-box.anim {
    transform: scale(1.07) translate(-3px, 3px);
    transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}

.draw {
    background: #d7cf00;
    width: 50px;
    height: 50px;
}

.draw.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

.draw2 {
    background: #db0a28;
    width: 50px;
    height: 50px;
}

.draw2.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

@keyframes animate {
    0% {
        transform: scale(0.5);
    }
    20% {
        transform: scale(0.3);
    }
    60% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
    <div class="main-logo">
        <div class="logo-box">
            <div class="draw"></div>
            <div class="draw2"></div>
        </div>
    </div>
</body>

Upvotes: 1

Muhammad Asif
Muhammad Asif

Reputation: 516

Dear according to your question you want the animation to be loaded on page load, so I have added document. ready function and also your old function is also there, so both functionalities on hover and on page is load is available

$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
    $(this).addClass("done");
    if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
        $(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
    }
});

$(document).ready(function () {
    $(".draw, .draw2, .logo-box").addClass("anim");
});

$(".main-logo").mouseenter(function () {
    $(".draw, .draw2, .logo-box").addClass("anim");
});
body {
    width: 100%;
    background: #fff;
}

.main-logo {
    float: left;
    margin: 0 30%;
    display: block;
}

.logo-box {
    background: #000;
    width: 200px;
    height: 200px;
    float: left;
    transition: all 0.25s ease;
    transform: scale(1);
}

.logo-box.anim {
    transform: scale(1.07) translate(-3px, 3px);
    transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}

.draw {
    background: #d7cf00;
    width: 50px;
    height: 50px;
}

.draw.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

.draw2 {
    background: #db0a28;
    width: 50px;
    height: 50px;
}

.draw2.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

@keyframes animate {
    0% {
        transform: scale(0.5);
    }
    20% {
        transform: scale(0.3);
    }
    60% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div class="main-logo">
        <div class="logo-box">
            <div class="draw"></div>
            <div class="draw2"></div>
        </div>
    </div>
</body>

Upvotes: 1

Related Questions