How to make Motion Blur when Object moves

Vishnu Manda · May 26, 2020

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .loading{
        background: orangered;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: -99;
    }
    button{
        padding: 10px 30px;
        background:#323232;
        color: white;
        outline: none;
        border: none;
        position: absolute;
        z-index: 9;
        top: 45%;
        left: 45%;
        cursor: pointer;
    }
</style>
<body>

<div class="loading"> </div>
<div class="btn">
    <button>CLick</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js "></script>

<script>

    const ld_gray = gsap.timeline({paused: true});
    ld_gray.from('.loading', {duration: 1, delay: 0.5, scaleX: 0, transformOrigin: 'left', ease: "expo.out",});
    ld_gray.to('.loading', {duration: 1, delay: 1, scaleX: 0, transformOrigin: 'right', ease: "expo.in",} );

    $('button').click(function () {

        ld_gray.restart();
    });

</script>
</body>
</html>

See the Pen dyYLJmq by vishnumanda (@vishnumanda) on CodePen

Shaun Gorneau · May 26, 2020

@Vishnu Manda

While I don't know what you're trying to show us with your included code ... a fairly simple method of adding motion blur would be to wrap the element, create another few instances of the element your moving and append them to the new parent, set each clone's opacity down (in CSS), and stagger there movement very tightly.

See the Pen xxwNKPm?editors=0010 by sgorneau (@sgorneau) on CodePen

ZachSaucier · May 26, 2020

Other threads on the subject:

Notifications

Messages

How to make Motion Blur when Object moves

Recommended Posts

Vishnu Manda

Link to comment

Share on other sites

Shaun Gorneau

Link to comment

Share on other sites

ZachSaucier

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members