Animating at Same Time - Missing Point of TimeLineMax

[ainsley_clark]

Hi all,

 

Sorry if this has been covered but the links I'm using I cant relate to my code.

 

I have a TimeLineMax set up and wish to animate different items along the timeline, for example below, .blue_stroke, .orange_stroke and .shadow I want to animate at the same time, at the moment Im using an animation delay at the end of the tween, which is sort of defeating the purpose of timelinemax for me.

 

Thanks in advance for your help.

 

	$(document).ready(function(){
		var timeLine = new TimelineMax();
		timeLine.add("start", 2);
		timeLine
			.to('#logo', 2, {strokeDashoffset: 0, ease:Power2.easeIn})
			.to('.blue_stroke', 1, {fillOpacity: 1})
			.to('.orange_stroke', 1, {fillOpacity: 1}, '-=1')
			.to('.shadow', 1, {opacity: 0.57}, '-=1')
			.to('#logo', .5, {opacity: 0.5, ease:Power2.easeIn}, '-=.8')
			//.to('#logo', 0.2, {strokeDashoffset: length});	
	});

 

[mikel]

Hi @ainsley_clark,

I'm not sure what your question is about.

A reduced CodePen example would be helpful ....

 

I assume it's about positioning.
Here are some help and examples:

https://greensock.com/position-parameter

 

Best regards

Mikel

 

 

[ainsley_clark]

Hi Mike,

 

Thanks for your reply.

 

Apologies if it isn't clear

The question is regarding timing. 

I would like 3 tweens (.blue_stroke, .orange_stroke and .shadow) all to start at the same time without adding a negative delay to them.

Currently I minus 1 second to the tweens so they play at the same time, but I'm wondering if there is a more dynamic way to-do so.

 

Thanks again.

 

Ainsley.

[OSUblake]

You don't need a negative delay. Look at the link look he suggested, and watch the video.

 

[ainsley_clark]

Apologies. Misread the answer. Many thanks all!

[PointC]

In addition to the position parameter info, I'd note that you can target multiple elements in one tween. Your tween could look like this:

 

.to('.blue_stroke, .orange_stroke', 1, {fillOpacity: 1})

 

Happy tweening.