Troubleshooting the problem of fast rotation and scrolling of text in the middle but slow movement at the end with

Question

Troubleshooting the problem of fast rotation and scrolling of text in the middle but slow movement at the end with

Currently, I am utilizing the jquery animate function for animating text while also aiming to rotate the text if a specific degree is passed. In order to achieve this, I have implemented the following code snippet:

var leftCss = "-"+$('#mydiv').width();
var leftAnt = $('#mydiv').parent().width();
$('#mydiv').each(function () {this.xpos =  leftCss; })
           .animate({  xpos: leftAnt}, {
                duration:10000,
                step: function (now) { 
                   var scaleVal =parseInt( now);
                   $(this).css('transform','rotate(0deg) translateX('+scaleVal+'px) translateY('+$('#mydiv').height()+'px)'); 
                },
            },'linear');

https://jsfiddle.net/nufafjjs/1/

Although it begins fast and slows down towards the end, I desire a consistent speed throughout the animation. Any idea what could be causing this inconsistency? Furthermore, when the rotation exceeds 90 degrees, the text disappears from view.

Thank you!

javascript jquery ios css animation

Answer 1

Answer №1

In this scenario, the reason why the default easing swing is applied to the animation is because you are passing animate options as the second parameter in the .animate() function and the third parameter 'linear' doesn't make sense here. To resolve this issue, you need to include easing:'linear' within the second options parameter like so:

function scrollAnimation() {
  $(".item").each(function() {
    this.offsetX = '-' + $('.item').width();
  }).animate({
    offsetX: parseInt($('.container').width())
  }, {
    duration: 10000,
    step: function(now, fx) {
      var moveValue = parseInt(now);
      moveValue += 10;
      $(this).css('transform', 'rotate(0deg) translateX(' + moveValue + 'px) translateY(0px)');
    },
    complete: function() {
      return scrollAnimation();
    },
    easing: 'linear' // specify linear easing here
  });
}
scrollAnimation();

.item {
  position: absolute;
  float: left;
  font-size: 50px;
  background-color: red;
}

.container {
  width: 500px;
  height: 50px;
  border: solid;
  position: absolute;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item">some content here....</div>
</div>

Answer 2

In this scenario, the reason why the default easing swing is applied to the animation is because you are passing animate options as the second parameter in the .animate() function and the third parameter 'linear' doesn't make sense here. To resolve this issue, you need to include easing:'linear' within the second options parameter like so:

function scrollAnimation() {
  $(".item").each(function() {
    this.offsetX = '-' + $('.item').width();
  }).animate({
    offsetX: parseInt($('.container').width())
  }, {
    duration: 10000,
    step: function(now, fx) {
      var moveValue = parseInt(now);
      moveValue += 10;
      $(this).css('transform', 'rotate(0deg) translateX(' + moveValue + 'px) translateY(0px)');
    },
    complete: function() {
      return scrollAnimation();
    },
    easing: 'linear' // specify linear easing here
  });
}
scrollAnimation();

.item {
  position: absolute;
  float: left;
  font-size: 50px;
  background-color: red;
}

.container {
  width: 500px;
  height: 50px;
  border: solid;
  position: absolute;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item">some content here....</div>
</div>

Answer 3

Answer №2

For a sleek and simple solution, utilize CSS animations exclusively. To maintain a consistent speed throughout the animation, make use of animation-timing-function:linear. Adjust the speed of the animation by modifying the value of animation-duration.

.block {
  position: absolute;
  float: left;
  font-size:50px;
  background-color: red;
  animation-name: example;
  animation-duration: 6s;
  animation-timing-function:linear;
  animation-iteration-count: infinite;
  
  //or just a shorthand
  //animation: example 6s linear infinite;
}
  
@keyframes example {
  from {transform:translateX(-500px);}
  to {transform:translateX(500px);}
}
.parent{
  width:500px;
  height: 50px;
  border:solid; 
  position: absolute;
  overflow:hidden
}

<div class="parent">
<div class="block">some content here....</div>

Answer 4

For a sleek and simple solution, utilize CSS animations exclusively. To maintain a consistent speed throughout the animation, make use of animation-timing-function:linear. Adjust the speed of the animation by modifying the value of animation-duration.

.block {
  position: absolute;
  float: left;
  font-size:50px;
  background-color: red;
  animation-name: example;
  animation-duration: 6s;
  animation-timing-function:linear;
  animation-iteration-count: infinite;
  
  //or just a shorthand
  //animation: example 6s linear infinite;
}
  
@keyframes example {
  from {transform:translateX(-500px);}
  to {transform:translateX(500px);}
}
.parent{
  width:500px;
  height: 50px;
  border:solid; 
  position: absolute;
  overflow:hidden
}

<div class="parent">
<div class="block">some content here....</div>

Troubleshooting the problem of fast rotation and scrolling of text in the middle but slow movement at the end with

Answer №1

Answer №2

Similar questions

Stylish Pop-up Box appears hidden behind a different element

Unusual Actions from the Text Field

"Escaping from the typeahead feature in Angular-UI Bootstrap results in the input field value becoming

Vue displays error logs within Karma, however, the test failure is not being reflected in the Karma results

Error Encountered: "JSON Post Failure in ASP.net MVC resulting in 500

When using ng-repeat with Angular ui-bootstrap and tabs, the new tab will not be selected if there are no existing tabs present

Obtaining the blog slug dynamically upon clicking with ReactJS

Discover the best practices for utilizing the npm commands.test function

Customize the appearance of each TreeItem in JavaFX using CSS to assign unique

Pass user input values to PHP via AJAX and display the outcome on a designated div

An unforeseen issue arose while trying to update the data in a Chart.js chart within a Vue application

Changing Background Images Based on Screen Size in CSS Media Queries

In Vue, reactivity does not extend to nested child objects

Working with the React JS Reducer, I am limited to only printing the returned payload and unable to perform any other actions

What is the best way to tile textures in Three.js without causing distortion?

Tips for inserting a property into an array of objects when it matches the specified ID

JavaScript Execution Sequence: Demystifying the Order of Operations

Guide to sharing a global object among multiple Vue.js mini apps within the same page

JavaScript module encounters an uncaught error: Attempting to assign a value to a constant variable

At random intervals, a ReferenceError is triggered stating that Vue is not defined