Tween - Endlessly repeating without resetting to the initial position

I have a div that I need to continuously move downwards in a loop. When using Tween with repeat -1, the movement starts from where it began which is not what I desire.

var tlMain = new TimelineMax({repeat:0});
tlMain.to(group.position, 2 , {y: '-=10', ease: Power0.easeNone, repeat:-1});

Currently, the timeline behaves as follows:

Start: 10
1st  : 10
2nd  : 10

With every iteration, the position changes accordingly:

Start: 10
1st  : 0
2nd  : -10
3rd  : -20

Is there a way to achieve this looping behavior with Tween or should I implement it in a more primitive way like in my render method?

function render(...args) {
    group.position.y -= 10;

    requestAnimationFrame(render(...args))
}

Alternatively, should I use a for loop to create an infinite animation instead of relying on repeat? (which does work)

Answer №1

The .repeat() method is not effective in this situation because the animation always resets to the original position, and modifying this behavior would require altering the library. In cases like this, it is better to manually animate the object's position as shown in your code sample. Alternatively, consider setting a very low y value with a longer duration to create a single smooth tween effect.

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

Display a loading progress bar with jQuery AJAX as your single page website content loads

I am currently working on a simple web page layout that consists of a navigation bar at the top and a body wrapper. Whenever a user clicks on a link in the navigation bar, I use .load to load the content of the page into the wrapper div. $(this).ajaxStar ...

Preventing the opening of a past event's modal dialog in jQuery

I am having trouble with setting up the jquery full calendar. Whenever I click on a past event, the modal opens when it shouldn't. Only current and future events should trigger the opening of a modal. eventRender: function(event, element, view) { ...

The @azure/search-documents JavaScript SDK allows the SearchDocumentResult to retrieve facets

Is it normal for the facets property of SearchDocumentResult to only return undefined instead of the facets involved in the query and their values? If this is the expected behavior, is there an alternative method to access the facets using the sdk? ...

What is the best way to access the display property of a DOM element?

<html> <style type="text/css"> a { display: none; } </style> <body> <p id="p"> a paragraph </p> <a href="http://www.google.com" id="a">google</a> &l ...

Transferring Data between Rails and Angularjs using JSON

Utilizing Angularjs to fetch JSON data from a Rails test app deployed on Heroku is proving to be a bit challenging. Below you can find the snippets of my Angular and Rails code. An error message displayed in my Firebug console reads: "NetworkError: 404 N ...

Utilizing i18n for moment formatting techniques

As I switch from moment to date-fns, I came across this code that involves moment, which I don't quite understand. However, I do comprehend the map function. this.events[0].dates.map(date => moment(date).format(this.$i18n.locale)) I set up an e ...

The data stored in LocalStorage disappears when the page is refreshed

I'm facing an issue with the getItem method in my localStorage within my React Form. I have added an onChange attribute: <div className = 'InputForm' onChange={save_data}> I have found the setItem function to save the data. Here is ...

Console.log() will not display any JSON duplicates

My JSON data structure is pretty flat and can have duplicate attributes. I built a logic to remove the duplicates but when testing it out, something strange happened. The logic was always counting the attributes once, resulting in no duplicates. To test th ...

Modify the names of the months (output) in the datetime calendar

Currently, I am developing a web application where I am utilizing a date picker feature from the Materialangular calendar extender. <md-datepicker ng-model="mddate" ng-blur="dateformatechanged()" md-placeholder="Enter date"></md-datepicker> W ...

Prevent certain dates from being selected in a designated input field

I am facing an issue with disabling certain array dates for a specific input field in a datepicker calendar. Even though I have included the script to exclude those dates, they are not getting disabled for that particular input field. html <input cla ...

Animate jQuery Images - Transform and smoothly reveal element

Hey there! I've managed to create a color switcher that gives a sneak peek of different themes. Currently, it simply switches the image source and loads the new image. But I'm curious if it's possible to add a fadeIn effect to enhance the t ...

Retrieve the downloaded status of a blob within a specific function

I need a way to verify if the blob downloading process is finished when generating an excel file on the NodeJS server side in response to a request from the React frontend side. Is there a method or promise that can help me achieve this? I want to update t ...

Troubleshooting Vue.js: Why is .bind(this) not behaving as anticipated?

Demo: https://codesandbox.io/s/23959y5wnp I have a function being passed down and I'm trying to rebind the this by using .bind(this) on the function. However, the data that is returned still refers to the original component. What could I be missing h ...

The XMLHTTPRequest Access-Control-Allow-Origin allows cross-origin resource sharing to

I am attempting to send a request to a PHP file. I collect the longitude and latitude from a function in the Maps API, then use AJAX to store these points in a MySQL database. Using AJAX function savePoint(latitude, longitude){ $.ajax({ ...

Why is it that methods lose their binding when they are returned from a ternary operator?

class TestClass { constructor() { this.prop = 5; } MethA() { console.log(this); console.log(this.prop); } MethB() { (true ? this.MethA : null)(); } } Test = new TestClass(); Test.MethB(); What is the ...

Object3D.frustumCulled property in ThreeJS helps determine if an object

In ThreeJS, Object3D objects have a built-in function to determine if they are within the camera's view - Object3D.frustumCulled. Is there a way to access and retrieve the result of the "Object3D.frustumCulled" check? ...

Make sure to implement validations prior to sending back the observable in Angular

Each time the button is clicked and if the modelform is invalid, a notification message should be returned instead of proceeding to create a user (createUser). The process should only proceed with this.accountService.create if there are no form validation ...

Changes made to the data are not reflected in the user interface, but they are visible in the console

When working on a React project with input fields, I encountered an issue where the date data can be changed but doesn't get reflected in the UI. Instead, the updated data is visible in the console. The code snippet below showcases how I'm using ...

Steering clear of using relative paths for requiring modules in Node.js

When it comes to importing dependencies, I like to avoid using excessive relative filesystem navigation such as ../../../foo/bar. In my experience with front-end development, I have found that using RequireJS allows me to set a default base path for "abso ...

Angular ng-repeat can sometimes lead to annoying flickering on the webpage

I have a code snippet that displays a list of thumbnails: <div class ="channel" ng-repeat ="channel in UIModel.channels" ng-class ="{evenchannel: ($index % 2) == 0, oddchannel: ($index % 2) == 1}"> <img class="channel-img" ng-src ="da ...