Is there a way to identify when a Tween.js animation has completed?

Is there a completed or finished event available when using this code for animating the camera in a scene with tween.js?

            tween : function (target){
                var position = camera.position;
                var tween = new TWEEN.Tween(position).to(target, 1800);

                tween.onUpdate(function(){
                    camera.position.x = position.x;
                    camera.position.y = position.y;
                    camera.position.z = position.z;
                    if (android){
                        camera.lookAt(android.position)
                    }
                });
                tween.easing(TWEEN.Easing.Bounce.Out);
                tween.start(); 
            },
javascriptanimationthree.jstween.js

Answer №1

Make sure to include an onComplete function:

tween.onComplete(function() {
  console.log('finished!')
});

Documentation

Answer №2

According to the latest updates in April 2018, the .onComplete method is not available in the documentation. Instead, you can utilize the .call function and then specify a custom function to be executed.

   createjs.Tween.get(target).to({alpha:1}, 1000).call(handleComplete);
    function handleComplete() {
        //Execution when Tween is complete
    }

For more information, refer to the documentation at:

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

Eliminate apostrophes in a string by using regular expressions

Can someone help me with this word What is The Answer? I need to eliminate the space and apostrophe '. To remove spaces, should I use this method: data.text.replace(/ +/g, ""). But how can I remove the apostrophe? ...

javascriptregextypescript

Adding negative values to the Tailwind CSS utility plugin is a simple process that can greatly enhance

Adding Negative Values to Tailwind CSS Utility Plugin Quick Summary: I've developed a custom Tailwind utility plugin that includes numeric values. I'm looking for a way to introduce negative numbers by adding a - at the start of the class, simi ...

javascriptcssreactjsnext.jstailwind-css

What advantages does using extend in the prototype offer in the inheritance pattern of three.js?

While delving into the world of Three.js framework and in search of an efficient JavaScript inheritance pattern, I decided to explore how it was implemented in Three.js itself. After studying it closely, I have gained a solid understanding of most aspects, ...

javascriptthree.js

IE is failing to trigger jAlert function

When I validate a text box by pressing the enter key on my keyboard, the validation works fine but the JAlert doesn't show up. However, when I call the same function on a button click, the alert shows in IE. I am quite confused by this behavior and wo ...

javascriptjqueryjquery-ui

Ember JS: Master of Controlling

I am working with the following controllers: clusters_controller.js.coffee Portal.DashboardClustersController = Ember.ArrayController.extend dashboard_controller.js.coffee Portal.DashboardController = Ember.ArrayController.extend In my template, I am ...

javascriptember.js

"Upon populating an object with Mongoose, the return value is an

Recently, I set up a mongo database and created a Post model that has a reference to the User by _id. I wanted to retrieve information about the posts a user has made, so I implemented a callback function within exec() while populating the selected User. H ...

javascriptmongoosemongoose-populate

Can you explain the concept of (A == B == C) comparison in JavaScript?

Surprisingly, the comparison I expected to fail was this: var A = B = 0; if(A == B == 0) console.log(true); else console.log(false); To my surprise, it doesn't return true. What's even more astonishing is that console.log((A == B == ...

javascriptcomparisontruthiness

Is there a way to access a project on an Ubuntu server by specifying the IP address along with the port number?

Deploying my application on an Ubuntu server has presented a challenge. When trying to start the production build or even just in development mode, I encounter difficulty accessing the application by specifying the server address and port. I attempted depl ...

javascriptnext.jsserver-side-renderingstatic-site-generation

What are the steps to crafting a basic JavaScript or jQuery function within CodeIgniter?

I'm currently working on creating a basic JavaScript function within CodeIgniter that is triggered when a radio button is clicked. <input type="radio" name="amount" value="<?php echo $plan['amount']; ?>" onclick="fn()" /> The J ...

javascriptphpjquerycodeigniter

Having trouble getting CSURF (CSRF middleware) to function properly with XSRF in AngularJS

Struggling to get the CSRF middleware working with Express and Angular? You're not alone. Despite various guides on the internet, the process remains unclear. Express 4.0 uses csurf as its CSRF middleware, while Angular requires setting X-XSRF-TOKEN. ...

javascriptangularjsnode.jsexpresscsrf

Getting the most out of your weather API: optimizing search parameters for precise location results and avoiding any confusion with similar locations

When experimenting with new platforms, I often utilize the openweathermap.org's api. However, I have encountered a recurring issue where I struggle to define a precise query for finding certain cities. The api functions smoothly for major cities like ...

javascriptjqueryajaxweather-api

The issue with Extjs store.proxy.extraParams being undefined appears to only occur in Internet Explorer

I currently have an ExtJs store set up with specific configurations. var fieldsStore = new Ext.create('Ext.data.Store', { model : 'FieldsModel', proxy : { type : 'ajax', url : 'queryBuilder_getQueryDetails', ...

javascriptextjsextjs4

The instance does not have a defined "key" property or method in this Vue/Laravel application

When I attempt to delete a register in my application, I encounter a Vue-warn message: The property or method "key" is referenced during render but is not defined on the instance. Make sure that this property is reactive by initializing it in the data o ...

javascriptvue.jsecmascript-6

"Troubleshooting: Why is the JavaScript canvas.toDataURL method returning an

While I know this question has been asked multiple times before, I still haven't been able to find a solution. My goal is to take an image, rotate it, and place it in an HTML canvas. To achieve this, I am utilizing another canvas where I rotate the i ...

javascripthtmlcanvas

Receiving a response from a Node.js server using an AJAX GET request

Here's a snippet of code from app.js that retrieves an aggregated value from mongo.db. I'm attempting to use this response value on my HTML page by making an AJAX call. However, I'm facing an issue where I can't retrieve the value in my ...

javascriptajaxnode.jsmongodb

An effective method for converting a string into a two-dimensional array using JavaScript

One challenge I am facing is checking from a string if a specific fruit has the correct amount on a given date. I've managed to achieve this by converting the string into a 2D array and iterating over the columns. While this method works, I can't ...

javascriptarraysloops

Proper method for verifying line-clamp in a Vue component

I came across a question that aligns perfectly with my current task - determining if text is truncated or not. The query can be found here: How can I check whether line-clamp is enabled?. It seems like my approach may not be accurate, so any guidance on ho ...

javascriptcssvue.js

What techniques can be used to optimize the SEO of HTML generated by JavaScript? How does React.js go about achieving this

Is my webpage optimized for SEO if it was created using appendChild and innerHTML with JavaScript? Can react.js improve the SEO of a webpage? ...

javascriptreactjsseo

Is it possible to modify the size of a bullet image in Javascript?

Can an image bullet style loaded via a URL be resized using JavaScript code like this: var listItem = document.createElement('li'); listItem.style.listStyleImage = "url(some url)"; listItem.style.listStylePosition = "inside"; I aim to increase ...

javascriptcss

Why does the Google Tag Manager noscript tag show up as a string when using react-gtm-module?

Implementing Google Tag Manager Tags in a React/Next.js app hosted on Netlify, I used the react-gtm-module. While the gtm script tag in the head section works perfectly, the noscript tag in the body is displaying an iframe as a string: <body> < ...

javascriptreactjsgoogle-tag-managernext.jsnetlify