smooth transition between animations (three.js and GSAP)

[floh]

Hello!

I have a little problem with transition between an animation of a Cube made with three.js and GSAP.

Here is the codefile link (unfortunately I can't provide a Pen, cause it's a huge project and all components are connected).

But just for explanation: the function reloadAnimation makes a little camera movement, which works just fine, and should - while moving the camera - spin the cube fast and transition smoothly from the fast in an infinite slow spinning of the cube. The camera and the fast spinning cube I implemented with GSAP and a timeline (cam movement and spinning are two different animations) and then the continuous slow spinning I implemented in the animate() function [in codefile beneath reloadAnimation()], where I just change the rotation.y value of the cube (which is an Object3D) slightly in every frame. The same behaviour could e.g be achieved when putting the code from the animate() function in the "onUpdate:" variable of a GSAP animation (just a note ;D):
https://codefile.io/f/oWViTvqaFc

[sorry for bad quality, had to compress the video quite hard to upload here :D]

When watching closely u can see, that the fast spinning cube stops fully for a second and then continues its slow spinning movement.

Do you guys know any method, where I can avoid the full stop after the fast spinning and smoothly transition into a infinite slow spin? Is it possible to achieve the desired behaviour with GSAP?

 

Thank you guys for reading!

[Rodrigo]

Hi @floh and welcome to the GreenSock forums!

 

Please create a minimal demo using this codepen starter:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Unfortunately what you provide is not enough to find what could be the issue you're having.

 

Happy Tweening!