Stack Overflow
Stack Overflow

Questions tagged [tween.js]

TweenJS is a simple tweening library for use in Javascript. It was developed to integrate well with the EaselJS library, but is not dependent on or specific to it. It supports tweening of both numeric object properties & CSS style properties. The API is simple but very powerful, making it easy to create complex tweens by chaining commands.

About

TweenJS is a simple tweening library for use in Javascript. It was developed to integrate well with the EaselJS library, but is not dependent on or specific to it. It supports tweening of both numeric object properties & CSS style properties. The API is simple but very powerful, making it easy to create complex tweens by chaining commands.

tween.js may also refer to another JavaScript tweening library located at http://github.com/tweenjs/tween.js

Example

var tween = createjs.Tween.get(myTarget).to({x:300},400).set({label:"hello!"}).wait(500).to({alpha:0,visible:false},1000).call(onComplete);

Links

Website

Github (CreateJS/TweenJS)

Github (tweenjs/tween.js)

141 questions
11
votes
1 answer

Tween camera position while rotation with slerp -- THREE.js

I want to tween camera position while rotation. Here is my function: function moveAndLookAt(camera, dstpos, dstlookat, options) { options || (options = {duration: 300}); var origpos = new THREE.Vector3().copy(camera.position); // original…
abernier
  • 27,030
  • 20
  • 83
  • 114
9
votes
5 answers

Three.js tween camera.lookat

I'm attempting to tween the camera.lookAt in Three.js using Tween.js with little success. This works selectedHotspot = object; var tween = new TWEEN.Tween(camera.lookAt( object.position),600).start(); But rotates the camera directly to…
beek
  • 3,522
  • 8
  • 33
  • 86
6
votes
2 answers

Three.js how to fade out audio?

A want to make crossfade effect between two audio. I try Tween.JS for that, but it's not do it smoothly, how I want... var sound_b_1 = new THREE.PositionalAudio( listener…
skywind
  • 892
  • 6
  • 22
  • 44
6
votes
2 answers

How to detect Tween.js animation finished?

I am using this code to animate camera in scene using tween.js Does there a exists any done or finshed event? tween : function (target){ var position = camera.position; var tween = new…
Stephan Ahlf
  • 3,310
  • 5
  • 39
  • 68
5
votes
3 answers

three.js animate a Mesh with Color transition (tween.js)

I'm getting crazy trying to achieve this. I want to change the color of a mesh(ConvexGeometry) when I hovered, until here I can do it without any problem, I can change the color of the mesh. The problem comes when I want to make it with a color…
elverde
  • 193
  • 2
  • 7
4
votes
1 answer

Three.js | Tween chain : How to start multiple tween's simultaneous?

My code is : function move(){ var A = new TWEEN.Tween(meshA.position).to({ z: -10 }, 2000).start(); var B = new TWEEN.Tween(meshB.rotation).to({ z: Math.PI }, 2000); var C = new TWEEN.Tween(meshC.position).to({ x: 10 }, 2000); …
Treize Cinq
  • 417
  • 5
  • 16
4
votes
1 answer

Put a number of spheres in an animation with the same distance

I have a code that performs animation. a sphere moves from the beginning of a line to the end of the line. When starts again ends the motion again. starts from the first vertex and ends at the last vertex of the line. I want to put 20 or so spheres,…
yavg
  • 2,761
  • 7
  • 45
  • 115
4
votes
1 answer

tween camera movement around globe three.js and tween.js

Trying to get a camera to smoothly rotate around a globe to a new position when a button is pressed. I'be done proof of position with the following to check the coordinates are OK camera.position.set(posX,posY,posZ); camera.lookAt(new…
Bob Haslett
  • 961
  • 1
  • 10
  • 31
3
votes
0 answers

Move Camera to the User-Clicked Location Using Tween for Three.js Panorama

My goal is to move Camera to the user-clicked location so the clicked location is centered for my equirectangular panorama. I am using tween.js to achieve this and the Camera does span but I cannot get the new coordinates centered correctly. I tried…
Vad
  • 3,658
  • 8
  • 46
  • 81
3
votes
3 answers

Tween.js Not Calling onUpdate Function

I am using tweenjs and Typescript to change the x and y coordinates of a three.js cube. I created the following tween to change the x position of an item of class "FallingItem". this.movementArcData.horzTween = new…
reggie3
  • 1,018
  • 2
  • 15
  • 22
3
votes
2 answers

How to stop tween of element in CreateJS/TweenJS

I have multiple Tweens in CreateJS/TweenJS: createjs.Tween.get(elem1).to({..}); createjs.Tween.get(elem2).to({..}); In timeline, I need to stop one of Tweens. I tried: var tween1 = createjs.Tween.get(elem1).to({..}); var tween2 =…
zur4ik
  • 6,072
  • 9
  • 52
  • 78
3
votes
1 answer

Morph a cube to coil in three js

I have tried to morph a thin rectangular cube to coil by three.js and tween.js. I've searched questions that already has been ask but none of them guide me. Which morph function should I use, and how can I create a coil shape?
Emad Emami
  • 6,089
  • 3
  • 28
  • 38
3
votes
2 answers

How to change material color for only one object in THREE.js

I'm editing a program wrote in Three.js and Tween.js. I try to find the solution here and on the web, without results. I have a lot of object (cones) create by THREE.Mesh and there is a little script that every 5 second select one of these and…
maniuz
  • 45
  • 1
  • 6
3
votes
1 answer

Using three.js and tween.js to rotate object in 90 degree increments to create a 360 loop

I have a working animation, just not the way I would like. I would like the object to rotate 90 degrees with a delay (works) then continue to rotate 90 degrees, ultimately looping forever. No matter what I do, it always resets. Even if I set up 4…
sn4ke
  • 587
  • 1
  • 14
  • 30
3
votes
2 answers

Threejs | How to tween Radius (RingGeometry)

How can I tween the innerRadius attribute of THREE.RingGeometry() in three.js using tween.js. I don't want to scale the ring, I want to update geometry.
Treize Cinq
  • 417
  • 5
  • 16
1
2 3
…
9 10