0

I have a very strange problem with passing object to GSAP animation. At using variable called "clone" every parameter is working instead of "rotation" but when I will use "clone2" rotation is working too:

animate(initial = false) {
    let scrolled = this.scroll * -1 + window.innerHeight;
    for(let animation of this.animations) {
        if(scrolled < animation.from) scrolled = animation.from;
        if(scrolled > animation.to) scrolled = animation.to;
        let progress = (scrolled - animation.from) / (animation.to - animation.from);

        console.log("animation loop:");
        console.log(JSON.stringify(animation.gsap));
        let clone = {...animation.gsap};

        for(let key in clone) {
            if(typeof clone[key] == "number") {
                if(clone[key] == 0) clone[key] = 1;
                clone[key] *= progress;
                if(clone[key] == 0) clone[key] = 1 - clone[key];
            }
        }

        let speed = 0;
        if(!initial) speed = this.speed;

        let clone2 = {x: -60.42296072507553, rotation: -15.105740181268882, opacity: 0.3021148036253776, scale: 0.45317220543806647};

        console.log(JSON.stringify(clone));
        console.log(JSON.stringify(clone2));
        console.log(JSON.stringify({ease: Power4.easeOut, ...clone}));
        console.log(JSON.stringify({ease: Power4.easeOut, ...clone2}));

        TweenLite.killTweensOf(animation.selector);
        TweenLite.to(animation.selector, speed, {ease: Power4.easeOut, ...clone2}); // here rotation and others are working
or...
        TweenLite.to(animation.selector, speed, {ease: Power4.easeOut, ...clone}); // here rotation is not working but opacity, scale, x, y, ect. are working
    }
}

The console.log output from that code is:

animation loop:
{"x":-200,"rotation":-50,"opacity":0,"scale":1.5}
{"x":-60.42296072507553,"rotation":-15.105740181268882,"opacity":0.3021148036253776,"scale":0.45317220543806647}
{"x":-60.42296072507553,"rotation":-15.105740181268882,"opacity":0.3021148036253776,"scale":0.45317220543806647}
{"ease":{"_func":null,"_type":1,"_power":4,"_params":[,0,1,1]},"x":-60.42296072507553,"rotation":-15.105740181268882,"opacity":0.3021148036253776,"scale":0.45317220543806647}
{"ease":{"_func":null,"_type":1,"_power":4,"_params":[,0,1,1]},"x":-60.42296072507553,"rotation":-15.105740181268882,"opacity":0.3021148036253776,"scale":0.45317220543806647}

So as you can see by this example situation is really strange. Am I doing something wrong? Did you had similar problems with GSAP?

Please for help - I will be very thankful.

Patrick Roberts
  • 49,224
  • 10
  • 102
  • 153
Artimal
  • 651
  • 7
  • 24
  • It isn't ES6 operator. It's ES.next operator, not a part of existing spec. Where do clone and clone2 come from? There cannot be any difference between them if they are equal as you show. But console.log output cannot be trusted because an object may be changed later. It should be `console.log(JSON.stringify(clone))` instead. – Estus Flask Nov 15 '17 at 13:42
  • @estus Thanks for comment. I have edited my post to show all the function that I use to my "small ScrollMagic" plugin. – Artimal Nov 15 '17 at 14:03
  • I don't see how it's possible. The problem is somewhere else then. Can you provide a way to replicate it? A plunk or so. – Estus Flask Nov 15 '17 at 16:24
  • I don't know too... Change to Object.assign instead of spread operator is ending at the same result. – Artimal Nov 15 '17 at 21:26
  • When I comment for loop rotation is working. (Of course I am getting always fully done animation). – Artimal Nov 15 '17 at 22:35

0 Answers0