Search the Community
Showing results for tags 'tweenlinemax'.
-
HI, i don't understand how can i dynamic update values on tween: Example in attach. Code: $(function () { var tween = new TimelineMax({paused: true}), box = $('.box'), leftBtn = $('.btn-left'), rightBtn = $('.btn-right'), direction = '-', distance = 500, value1= direction + '=' + distance; function directionMove(playk) { if (playk == 'playk') { direction = '-'; value1 = direction + '=' + distance; // how to update value tween.play(); } else if (playk == 'reversk') { direction = '+'; value1 = direction + '=' + distance; //how to update value tween.play(); } } tween .to(box, 15, {css: {x: value1}, ease: Linear.easeNone}); // no need move by default leftBtn.on({ click: function () { directionMove('playk'); } }); rightBtn.on({ click: function () { directionMove('reversk'); } }) }); I want update value1 dynamic (on this example: onClick). I can find solution, can you help me, Thanks!
-
I have created two pens as I cannot combine both in the same pen example to explain my issue. Pen1 (part 1) https://codepen.io/nudgepixels/pen/dMgxKg The clock ticking tween repeats for 3 times as seen on the pen. Pen2 (part 2) https://codepen.io/nudgepixels/pen/PNyMaM At the end of my pen 1, I want Pen2 to follow without any delay. My objective is to join these two pens. (And at the end, I will have to join this single pen to my main project - i.e, https://codepen.io/nudgepixels/pen/XdRVdP - I will handle this part) As you can see, for the clock loop tween, I'm using a new variable - var time = new TimelineMax . . time.staggerTo(".clock", 1.04, {display: 'block'}, 0.25) .to(".clock", 0, { display: 'none'}); which is different from my main variable - var tl = new TimelineMax(); . . tl.staggerTo([frame274_12a, frame274_1, frame274_2,frame274_3], 0.32, {display: 'block'}, 0.25) My main project is based on 'tl variable. For some reason, I cannot loop and join the second tween (Pen 2) using the same timeline variable. This looks simple, for some reason, none of my solutions are working. If this can be achieved, it would help me to apply similar solution to other animations. Kindly help me on this.