Can I bine multiple tweens and run them with one ease function? Something like this:
var el = $('#some-element');
var tw1 = new TweenMax.to(el, 1, {left: 100});
var tw2 = new TweenMax.to(el, 1, {left: 200});
var tw3 = new TweenMax.to(el, 1, {left: 300});
var tl = new TimelineMax({ease:Power2.easeOut})
.add(tw1)
.add(tw2)
.add(tw3);
I've made sandbox example for this issue:
So how to make move the box with mon easing?
UPD
New sandboxes:
We need to make to move the box from the first example with one mon easing function, as it has been shown in the second example, but without removing middle tweens.
Can I bine multiple tweens and run them with one ease function? Something like this:
var el = $('#some-element');
var tw1 = new TweenMax.to(el, 1, {left: 100});
var tw2 = new TweenMax.to(el, 1, {left: 200});
var tw3 = new TweenMax.to(el, 1, {left: 300});
var tl = new TimelineMax({ease:Power2.easeOut})
.add(tw1)
.add(tw2)
.add(tw3);
I've made sandbox example for this issue: http://codepen.io/panych/pen/qpjCK
So how to make move the box with mon easing?
UPD
New sandboxes:
- http://codepen.io/panych/pen/qpjCK
- http://codepen.io/panych/pen/aLHGy
We need to make to move the box from the first example with one mon easing function, as it has been shown in the second example, but without removing middle tweens.
Share Improve this question edited Dec 16, 2013 at 14:16 a.s.panchenko asked Nov 12, 2013 at 14:01 a.s.panchenkoa.s.panchenko 1,23617 silver badges23 bronze badges2 Answers
Reset to default 8One way to do it is tweening the timeline's progress value, like this:
var el = $('#some-element');
var tw1 = new TweenMax.to(el, 1, {left: 100});
var tw2 = new TweenMax.to(el, 1, {left: 200});
var tw3 = new TweenMax.to(el, 1, {left: 300});
var tl = new TimelineMax()
.add(tw1)
.add(tw2)
.add(tw3);
TweenLite.to(tl, tl.duration, {progress:1, ease:Power2.easeOut});
Also the add() method allows you to add an array of tweens and then pass the alignment as a string, like this:
var el = $('#some-element');
var tw1 = new TweenMax.to(el, 1, {left: 100});
var tw2 = new TweenMax.to(el, 1, {left: 200});
var tw3 = new TweenMax.to(el, 1, {left: 300});
var tl = new TimelineMax()
.add([tw1,tw2,tw3], 'sequence');
Like that the tweens in the array play one after the other.
Also you can tween the time property of the timeline like Jamie Jefferson illustrated in this codepen:
http://codepen.io/jamiejefferson/pen/zsEAt
Take a look at the add() method which has an amazing range of uses.
Rodrigo.
EDIT: I forgot to add the position parameter in the add() method. This method accepts a position parameter and an alignment parameter, and since both are strings it's mandatory to include both.
So the code looks like this:
var el = $('#some-element');
var tw1 = new TweenMax.to(el, 1, {left: 100});
var tw2 = new TweenMax.to(el, 1, {left: 200});
var tw3 = new TweenMax.to(el, 1, {left: 300});
var tl = new TimelineMax()
.add([tw1,tw2,tw3], '+=0', 'sequence');
With the +=0, we're telling GSAP to include all those elements, in sequence, at the end of the timeline.
Use only one tween (the final destination) and if pass through points are required use the BezierPlugin to add them.
http://api.greensock./js//greensock/plugins/BezierPlugin.html#bezierThrough();