TWEENJS strange yoyo threejs

403 Views Asked by At

After one success circle of animation, tweenjs gets me twitching, i wanna create infinity moving animation, from top, to bottom, but i have some bugs in my code I need help! http://weblife.su/WineBazar/1/

  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()
                   })
              

1

There are 1 best solutions below

0
M - On

With GSAP v3, you can yoyo indefinitely by setting .repeat(-1), as explained in their docs:

To repeat indefinitely, use -1.

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

An aside: Degrees or radians are typically reserved for rotations. I don't think you need radians when setting the y-position when you can just use a hard value like 0.5.