Creating smooth animations in JavaScript without relying on external libraries such as jQuery

Question

Creating smooth animations in JavaScript without relying on external libraries such as jQuery

Is there a way in JavaScript to make a <div> slide in from the right when hovered over, without relying on jQuery or other libraries? I'm looking for a modern browser-friendly solution.


        const div = document.querySelector('.from_right');

        div.addEventListener('mouseover', function() {
            let position = 0;
            
            function slideIn() {
                if (position > -300) {
                    position -= 1;
                    div.style.right = `${position}px`;
                    requestAnimationFrame(slideIn);
                }
            }

            slideIn();
        });

javascript jquery css html

Answer 1

Answer №1

The magic lies in CSS transitions.

div {
    width:100px;
    height:100px;
    background:red;
    -webkit-transition:margin 3s ease-out;
    -moz-transition:margin 2s ease-out;
    -o-transition:margin 2s ease-out;
    -ms-transition:margin 2s ease-out;
    transition:margin 2s ease-out;
}
div:hover {
    margin-left:300px;
}

Check out the DEMO here.

Answer 2

The magic lies in CSS transitions.

div {
    width:100px;
    height:100px;
    background:red;
    -webkit-transition:margin 3s ease-out;
    -moz-transition:margin 2s ease-out;
    -o-transition:margin 2s ease-out;
    -ms-transition:margin 2s ease-out;
    transition:margin 2s ease-out;
}
div:hover {
    margin-left:300px;
}

Check out the DEMO here.

Creating smooth animations in JavaScript without relying on external libraries such as jQuery

Answer №1

Similar questions

Vue template is not being rendered when served through Django

Is there a way to retrieve the client's IP address from the server side within a Next.js application?

What is the best way to send multiple input box values to a function set in the controller?

Exploring the possibilities of developing WebComponents within Angular using TypeScript

Sending a comprehensive form via jQuery ajax without relying on the serialize() method

Submitting an AJAX form redirects to a different page instead of keeping the user on the current page

Angular's ng-repeat allows you to iterate over a collection and

Execute multiple events using jQuery's .trigger() method

jQuery causing issues with CORS configurations

Locating a particular table without an identifier

Waypoint function malfunctioning when overflow:hidden is applied

How can you use JavaScript to identify resize or zoom changes across all ancestor DOM elements?

React Hook is failing to trigger an update

How can a form be submitted in Extjs without using ajax?

The functionality of the jQuery scroll feature appears to be malfunctioning

Updating the content of a div when the mouse hovers over it

What enables typescript to be eligible for transpiling is its equivalent level of abstraction to javascript?

Tips for clicking the OK button in an alert box with Protractor

Creating customized headers using $.ajax for JSONP or JSON requests

Limiting the quantity in SimpleCart (js)