"An unusual blend of TWEENJS and threejs creating a mesmerizing

Having successfully created one animation loop with tweenjs, I am now eager to develop an infinite moving animation from top to bottom. However, I am facing some bugs in my code and require assistance! You can check out the code here.

  var group_position_1 = new TWEEN.Tween(group.position)
                .to({ y: THREE.Math.degToRad(-20)}, 1000)
                .yoyo(true)
                .repeat(1)
                .easing(TWEEN.Easing.Linear.None)
                .onStart(() => {
                })
                .onUpdate(() => {
                })
                .onComplete(() => {
                               group_position_2.start()
                })
              var group_position_2 = new TWEEN.Tween(group.position)
                   .to({ y: THREE.Math.degToRad(-30)}, 1000)
                   .yoyo(true)
                   .repeat(1)
                   .easing(TWEEN.Easing.Linear.None) 
                   .onStart(() => {
                   })
                   .onUpdate(() => {
                   })
                   .onComplete(() => {
                             group_position_1.start()
                   })
              

Answer №1

If you want to achieve an infinite yoyo effect with GSAP v3, all you need to do is set .repeat(-1), as detailed in the official documentation:

Simply use -1 to repeat endlessly.

var group_position_1 = new TWEEN.Tween(group.position)
    .to({ y: -0.5}, 1000)
    .yoyo(true)
    .repeat(-1)

On a side note: Degrees or radians are typically used for rotations, whereas setting the y-position can be achieved more simply by using a specific value like 0.5 instead of radians.

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

Javascript code for scrolling to the top isn't functioning as expected

I found a helpful code snippet for adding a scroll to top button on my webpage at the following link: http://jsfiddle.net/neeklamy/RpPEe/ Although I implemented the code provided, unfortunately, the scroll to top button is not displaying correctly. Here ...

Exploring the Visual World of React: The Image Universe

When using create-react-app, where should my images folder be located? Should it be in the src directory or the public directory? Will placing it in one directory over the other cause issues when running yarn build? I've heard that only files withi ...

Move the camera left and right, up and down using the arrow keys in WebGL

I am currently working on implementing a basic camera movement system in WebGL using JavaScript and the keyboard to control the camera's movement along the X and Y axes. However, I am facing an issue where the camera moves in world coordinates rather ...

Is Angular 2 Really Suitable for Multi-Page Applications?

I am currently working on a multi-page app using Angular2 and have noticed that the load times are slower than desired when in development mode. While searching for solutions, I came across a thread on stackoverflow that explains how to set up Angular2 fo ...

locate sibling element

<div class="videoItem"> <div class="innerVideoItem"> <a><div class="overlayBg"></div></a> <a><img class="overlayPlay"><img></a> </div> </div> <script> ...

Is there a repeated call detected in the Readable stream node?

The issue at hand Currently, I have encountered a problem with this code snippet. It involves a Readable stream that retrieves movements from the database in a paginated manner, but it seems to be returning duplicate records inexplicably. const read ...

There is an absence of the 'Access-Control-Allow-Origin' header on the requested resource despite its existence

Currently, I am working on developing an application using Django and Phonegap. While attempting to send an Ajax Request with the following function: <script> $.ajax({ url: "http://192.168.0.101/commerce/pro ...

When using Angular, it is important to remember that calling `this.useraccount.next(user)` may result in an error stating that an argument of type 'HttpResponse<any>' cannot be used with a 'Useraccount' balance

When attempting to use this.useraccountsubject(user) to insert information upon login, I encountered an error: ErrorType: this.useraccount.next(user) then Error An argument of type 'HttpResponse' is not allowed against a balance of 'Userac ...

Encountered an error while building CSS Modules for a Vue.js project

Working on a project in Vue.js, I decided to incorporate CSS modules for my local styles (for sass and scss). However, I continuously encounter a 'Failed to compile error' related to the CSS Loader validation process. Despite attempting various ...

Utilizing Vue.js to add functionality for navigation buttons allowing users to move between survey questions

In my Vue.js component, I've written code to show survey questions in a mobile app for users. Here is a snippet of the code: <div class="col-12 p-0" v-for="( i, index ) in questions" :key="i"> <p cl ...

The page becomes unresponsive and is unable to be scrolled after the modal is closed

Whenever I click a button, two modal boxes pop up simultaneously. Closing these modal boxes by clicking outside of them causes an issue where the page darkens and becomes unscrollable afterwards. var modalA = document.getElementById('projectModalSe ...

Downloading an empty excel file in PHP using iframes

I am trying to create a frame with a header that includes buttons for listing, PDF, and Excel options. The data from the database is displayed under the header, and everything works fine with the listing option. However, when I attempt to download an Excel ...

Encountering difficulties sending modified object values to Node/Express in JavaScript

I am currently working on a project that involves fetching specific stock data from Yahoo Finance based on the user's selection and then transmitting this data to a Node/Express server. ISSUE: Despite everything else functioning correctly, the Node/E ...

morris.js - displaying a dynamic line chart using JSON data

These are the resources I have: clicks.json index.html The contents of my clicks.json file: [ {"day":1,"clicks":"387"}, {"day":2,"clicks":"432"}, {"day":3,"clicks":"316"}, {"day":4,"clicks":"238"}, {"day":5,"clicks":"354"}, {"da ...

Filtering GridView Results with Live Search on ASP.net Textbox

I am currently working on implementing a live search feature for my ASP.net project. The goal is to have a description textbox where users can enter their search term, and the GridView below will dynamically filter the results as the user types. While I ...

The Google API Node.js client version 5.2.0 is facing difficulties in installing its dependencies

After updating to version 5.2.0, I encountered issues with npm failing to install dependencies. Launching my project resulted in a "dependency swig is missing" error message. Attempting to manually install it using the command (npm install swig), I then ...

When the button is clicked, avoid the onclick event and display a modal. If "yes" is clicked, execute the onclick function

I am facing an issue with a page containing multiple input elements that all have similar structure. I want to show a modal before executing the onclick event, and only run the function when the "yes" button in the modal is clicked. However, the problem is ...

One Versatile Ajax Function for Accessing Various PHP Pages

On my index.html, there are buttons displayed below: <button value="about_us.php" onClick="fNt(value)">About Us</button> <button value="faq.php" onClick="fNt(value)">FAQ</button> <button value="contact_us.php" onClick="fNt(val ...

Utilizing JavaScript to trigger an email with PHP variables included

i am trying to pass a few php variables using a javascript trigger. Everything seems to be working with the variables, databases, and script but I am struggling with the PHP part. Here is my attempt at the PHP code, although it clearly has some issues. I ...

What is the best way to incorporate Vue.js component dependencies into a multi-page application (MPA

When working with a multiple page app, incorporating a component inside another component can be challenging, especially without using a build system. $ npm install sagalbot/vue-select <template> <div id="myApp"> <v-select :value.sy ...