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!

javascriptjqueryioscssanimation

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In React JS, the data from my response is not being saved into the variable

My goal is to store the response data in the variable activityType. Within the useEffect function, I am iterating over an API based on the tabs value. The API will return a boolean value of either true or false. While I can successfully log these values ...

javascriptreactjsnext.jsuse-effectreact-query

Is it possible to run a local file on a localhost server in Sublime Text 3 with the help of the SideBar

I am attempting to host my index.html file on a localhost server in order to utilize an angular routing directive. Despite following the steps, I am encountering issues. //sidebarenchancements.json { "file:///C:/Users/Jdog/Desktop/projects/Calibre/soci ...

javascriptangularjs

Observing the state of a variable within a directive using a service from a different module

I currently have two modules named "core" and "ui". The "ui" module has a dependency on the "core" module. Below is the code for my core.js file: var core = angular.module('core', [ 'ngRoute' ]); // Services core.service('httpI ...

javascriptangularjs

Ways to verify audio in several HTML5 video files

I am working on a way to determine if multiple videos have audio or not. Here is an example of what I have so far: https://jsfiddle.net/hrd4a0c3/ However, my current solution only checks one video at a time. I am looking for a way to extend this functiona ...

javascripthtmlaudiovideo

The React class component is throwing an unexpected error with the keyword 'this'

I encountered an error stating "Unexpected keyword 'this'" while attempting to update the React state using Redux saga. Could someone shed light on what's wrong with the code below and how I can fix it? class Welcome extends React.Component ...

javascriptreactjsnext.js

Is there a way to customize Angular's number filter?

I'm trying to achieve a consistent number format with Angular's number filter, regardless of the localization selected. After inspecting the Angular source code on GitHub, I found the implementation of the filter to be like this: function number ...

javascriptangularjsangular-filters

What is the best way to duplicate a value and save it in an array?

I have a calendar and I want to be able to copy the selected day's value and store it in an array. Then, if another day is clicked, I would like to add the current day's value along with the previous day's value to the array. Users should be ...

javascriptreactjsarrays

How to retrieve the value of an observable from a regular JavaScript array in Knockout JS?

Context In my project, I am working with a plain JavaScript array that starts off empty but gets populated with Knockout observables later on. These values are numbers and I need to compare them with values in another Knockout observable array. The issue ...

javascripthtmlknockout.jsko.observablearray

How can we determine the nL and nH values using an ESC/POS command?

Looking to adjust the printer's head position using ESC / pos commands: ESC $ command sets the absolute horizontal position ESC $ nL nH Trying to figure out how to calculate the values for nL and nH? ...

javascriptphpc

What is preventing WebRTC from re-establishing connection after being disconnected?

In my current React web application project, I am implementing a feature where users can engage in group calls using WebRTC through a NodeJS server running Socket.IO. The setup allows for seamless joining and leaving of the call, similar to platforms like ...

javascriptnode.jsreactjswebrtc

Issue encountered when trying to load a Jquery Datatable with input from a textbox

Seeking assistance with this issue. This is the code for my Controller: namespace PruebaBusquedaRun.Controllers { public class TestController : Controller { MandatosModel md = new MandatosModel(); // GET: Test public ActionResult Index() ...

c#jqueryjsonasp.net-mvcdatatables

What is the process for extracting the background color from a typescript file in Angular and connecting it to my HTML document?

My typescript array population is not changing the background color of my div based on the values in the array. I've attempted to set the background using [style.backgroundColor]="statusColor[i]", where statusColor is an array declared in my typescrip ...

htmlcssangulartypescript

How can I efficiently map an array based on multiple other arrays in JavaScript/TypeScript using ES6(7) without nested loops?

I am dealing with 2 arrays: const history = [ { type: 'change', old: 1, new: 2 }, { type: 'change', old: 3, new: 4 }, ]; const contents = [ { id: 1, info: 'infor1' }, { id: 2, info: 'infor2' }, { id: ...

javascripttypescriptecmascript-2016

Hide the drawer when a user clicks on a currently selected tab

Just starting to explore Material-UI and React here, so please bear with me if I'm making any rookie mistakes. :) I've set up a Drawer component containing a Tabs element with multiple Tab components inside. It's nothing too fancy yet - mos ...

javascriptreactjsmaterial-ui

Discontinuing the fieldset tab interface feature from a Dexterity content type

I am looking to modify a condition to prevent the loading of certain javascript code when inserting an object of my content type. The current condition works only when editing the object: <?xml version="1.0"?> <object name="portal_javascripts"> ...

javascriptplonedexteritygenericsetup

Sequelize throwing Javascript heap out of memory error when inserting large files into database

I have successfully converted an excel file to MySQL on my local machine. However, when I try to do the same with larger files on a container limited to 2048MB of memory, it doesn't work. I attempted to increase the memory limit using node --max-old-s ...

javascriptnode.jsexpresssequelize.js

Convert form data into a JSON object using Vue.js

I'm attempting to generate a JSON object from the submitted form data. Fortunately, I've accomplished this using a variable. However, is there an alternative approach for creating a JSON object? Form <form @submit.prevent="submit"& ...

javascriptarraysjsonvue.js

Javascript for Cordova utilizing WebSocket and incorporating client side certificates

I am looking to establish a secure SSL/TLS connection between my client and server, with only a specific authorized client allowed to connect. To achieve this, I have generated a client certificate using OpenSSL on the server for mutual authorization. The ...

javascriptcordovasslwebsocketwss

Maintain the value of `this` using a recursive setImmediate() function

Hey there! I'm working on a node.js app where I need to utilize setImmediate() to recursively call a function while maintaining its context for the next iteration. Let's take a look at an example: var i=3; function myFunc(){ console.log(i ...

javascriptnode.js

Exploring Vue Routing with Regular Expressions

Recently, I integrated a route with a parameter in my Vue project. const routes = [ { path: "/:lang(^$|^es$|^pt$|^cn$)", name: "Home", component: Page, }, { path: "/privacy", name: "Privacy", component: Privacy, }, { ...

javascriptvue.jsvue-router