Search the Community
Showing results for tags 'tweenlinemax'.
Found 4 results
-
I am playing with spiral animation using tweenlinemax, I saw couple of examples related to spiral animation for growing text font size during animate but I also want to reduce the size of font after 1 second duration. tl.to("#Text",10,{attr:{startOffset:'100%'}}) .to("#theText", 5, {fontSize:50},2) .to("#theText", 5, {fontSize:10},1); //this is not working so is there any way to grow up and down the font size while animate on SVG path using tweens.
-
Hello, I have a problem where when I hover out it repeats the animation the numbers of times it has played over the time the mouse has been on it. If I hover out before it finishes his first animation iteration, then it will go back to normal without a problem. However, if I hover it for more than 2 seconds for it complete at least 2 iterations counts, then the reverse will also repeat it 2 times before it goes back to its initial position. Basically, I want it to float continuously when I hover it, and I want it to go back down once I hover out of it. Is there a way for it to just smoothly go back to its initial position? Thank you in advance.
-
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.
