How to make Motion Blur when Object moves

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.

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.

May 26, 2020

Other threads on the subject:

Notifications

Messages

How to make Motion Blur when Object moves

Recommended Posts

Vishnu Manda

Shaun Gorneau

ZachSaucier

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members