Tips for resolving flickering animations in CSS and JavaScript

Question

Tips for resolving flickering animations in CSS and JavaScript

Is it possible to dynamically set a scale and margin for an element in order to center it fluidly using the wheel event? I am aiming to achieve a smooth transition while also adjusting scroll position on the wrapping element in a fluid manner.

In the provided jsfiddle example, I have utilized the CSS transition attribute to create a fluid effect. However, there seems to be an issue where the margin animation triggers faster than the scale adjustment, causing the div to initially move sideways. This can be observed especially when zooming in with greater intensity. How can this be rectified so that the cross located in the middle of the image does not shift sideways during zoom in and out?

To view the problem clearly, simply use the mouse scroll once and then repeat the action at the end of the animation.

To address this issue, I followed Gabriele Petrioli's solution but still required further information regarding the positioning of the element. As a result, I decided to integrate the margins into the CSS transform attribute through the 'translate' option, which appears to be functioning correctly.

I made the following modification:

$el.css({
    'transform': "translate(" + t + "px, " + l + "px) scale(" + scale + ")",
});

For more insight, you can refer to the updated jsfiddle.

javascript css

Answer 1

Answer №1

To center the element, I recommend using absolute positioning right from the start.

Here are some adjustments:

Utilize position:absolute along with left/right to align it in the center
Use transform: translate(-50%, -50%) to align the grid center with the wrapper center
Set the origin to 50% 50% so that you don't have to calculate movement
Since margins are not needed anymore, focus on adjusting the scale
Added a Math.max/Math.min function for maintaining sanity during testing

var scale = 1;
var $wrap = $('#wrap');
var $el = $('#el');

$(function() {
  $el.on('wheel', function(e) {
    e.preventDefault();
    
    scale = e.originalEvent.wheelDelta > 0 ? scale * 1.5 : scale / 1.5;
    scale = Math.min(Math.max(scale, 0.2), 20);
    
    $el.css({
      'transform': `translate(-50%,-50%) scale(${Math.max(scale, 0.1)})`,
    });
  });
});

#wrap {
  position: fixed;
  width: 400px;
  height: 300px;
  background: pink;
}

#el {
  position: absolute;
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  transition: transform 1s;
  transform-origin: 50% 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: radial-gradient(circle at 0px 0px, #666 1px, transparent 0);
  background-size: 4px 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<html>
  <div id="wrap">
    <div id="el">
      +
    </div>
  </div>

</html>

Answer 2

To center the element, I recommend using absolute positioning right from the start.

Here are some adjustments:

Utilize position:absolute along with left/right to align it in the center
Use transform: translate(-50%, -50%) to align the grid center with the wrapper center
Set the origin to 50% 50% so that you don't have to calculate movement
Since margins are not needed anymore, focus on adjusting the scale
Added a Math.max/Math.min function for maintaining sanity during testing

var scale = 1;
var $wrap = $('#wrap');
var $el = $('#el');

$(function() {
  $el.on('wheel', function(e) {
    e.preventDefault();
    
    scale = e.originalEvent.wheelDelta > 0 ? scale * 1.5 : scale / 1.5;
    scale = Math.min(Math.max(scale, 0.2), 20);
    
    $el.css({
      'transform': `translate(-50%,-50%) scale(${Math.max(scale, 0.1)})`,
    });
  });
});

#wrap {
  position: fixed;
  width: 400px;
  height: 300px;
  background: pink;
}

#el {
  position: absolute;
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  transition: transform 1s;
  transform-origin: 50% 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: radial-gradient(circle at 0px 0px, #666 1px, transparent 0);
  background-size: 4px 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<html>
  <div id="wrap">
    <div id="el">
      +
    </div>
  </div>

</html>

Tips for resolving flickering animations in CSS and JavaScript

Answer №1

Similar questions

Exploring nested objects and arrays with Plunker - extracting their values

What is the method used to incorporate the radial gradient in this design?

Generate Sub Menu for Navigation Bar based on Main Menu Selection

Is it possible to make a form field inactive based on another input?

Tips for locating all events linked to a specific text box using JQUERY

Transmit both image and JSON data in a single response using Node.js and Express

Is there a way for me to extract the true text content that is concealed within the page source code?

Unexpected token "," in jQuery UI autocomplete error

"Received 'grunt command not found' error even though I have successfully installed grunt and

SyntaxError: Unexpected symbol

Designing the Mailchimp signup form with React styling techniques

In ReactJS, when passing an array of objects to a child component, the first instance may sometimes return as undefined, causing the code to break

Modifying a variable within the return statement in a React Native component

Two CSS Issues - One specific to mobile devices, the other unique to Chrome browser

What is the best way to increase the spacing between buttons in a Bootstrap navigation bar?

Issue with Bootstrap v3.3.7 panel not collapsing as expected following height adjustment

Assistance Required for Making a Delicious Cookie

What is the best way to fetch Ajax information for use in several drop-down menus?

Display a loader while waiting for an API call to complete within 5 seconds using Angular and RxJS operators. If the API call takes longer

Issues with plugins in Rails 4 are causing functionality to not be operating