Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vishnu Manda

How to make Motion Blur when Object moves

Recommended Posts

<!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

Link to post
Share on other sites

@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

  • Like 3
  • Thanks 1
Link to post
Share on other sites

Other threads on the subject:

 

  • Like 1
  • Thanks 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×