Timeline event chain and usage

[Vagabond]

Greetings, kudos to the developers of this wonderful product!

 

I'm currently using Tweenlite to animate an HTML5 multiplayer game, it works great!!

However I'm interested in incorporating TimelineLite as well for multi-phase animations, just not sure how/if TimelineLite syntax would work. Hopefully someone can point me in the right direction or toss out a simple example that I can follow up on.

 

Example animation: Simple space game your ship fires a missile at another ship. The missile will go from point A (your ship) to point B (enemy ship), with say a rocket boost half way through. 

 

So far I've coded this in JS, creating my game engine and doing the tween calls without TimeLine.

 

My questions are 

 

1) In the example, using TweenLite the missile is moved to the position of the target (div). However that div is also moving using TweenLite as well. Is there a way to follow another tween'ing div?

 

2) In my current implementation, I'm using the TweenLite "onComplete" events to fire the next stage of the animation. Is there a way to do this using TimelineLite? something like "onComplete: tl.Run();" ? Need this for both delay (wait) tweens as well as tween is done (div position moves). 

 

3) Is there a way to change div background image in the TweenLite syntax? Don't need to animate it, just have it change. Adding custom function hooks inside TimelineLite would be fine as well. 

 

Clear as mud?

Thanks!!

 

 

 

 

 

 

 

 

 

[Carl]

Hi and welcome to the GreenSock forums.

 

 

Is there a way to follow another tween'ing div?

Timelines are best when you know the start and end values of all the properties you are animating at the time the timeline is created. They are not meant for constant updates in the case where a missile has to follow an enemy that is moving on its own. 

 

Is there a way to do this using TimelineLite? something like "onComplete: tl.Run();

Yes, timelines have onComplete callbacks just like tweens

var tl = new TimelineLite({onComplete:run});

To better understand the capabilities of timelines please view the following resources. They should help a lot.

 

TimelineLite docs: http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/

watch: http://greensock.com/sequence-video

watch: http://greensock.com/position-parameter

 

Is there a way to change div background image in the TweenLite syntax? 

I would recommend using a background spritesheet with 2 images. When you need to change which image is shown just offset it's position with a set()

TweenLite.set(element, {backgroundPosition:"-500px 0"});// shift image over 500px to reveal another image

However if you really want to change the image to something else you can set() the backgroundImage url like

var tl = new TimelineLite()
tl.to(".green", 1, {x:400})
  .set(".green", {backgroundImage:"url(http://greensock.com/wp-content/uploads/2015/06/showcase-youtube10.jpg)"}, 1)

http://codepen.io/GreenSock/pen/LkOEOw?editors=0010

 

if you don't use a timeline, a TweenLite.set() will work the same way.

TweenLite.set(".green", {backgroundImage:"url(http://greensock.com/wp-content/uploads/2015/06/showcase-youtube10.jpg)"})

[Vagabond]

Thanks mate!

 

Your answers and the docs are helping it gel together. 

The tools are perfect, lots of different ways to use them.

 

Looking forward to getting in the "Club" soon.... 

[OSUblake]

You should check out this thread about an experimental plugin that will let you modify values. 

 

There's actually a couple homing missile examples in there.

Demo 1 - 

See the Pen 0dd392ed3b61af3f917293c434e563ab?editors=0010 by osublake (@osublake) on CodePen

Demo 2 - 

See the Pen 2c675acc600ce42bd0533efafa64548a?editors=0010 by osublake (@osublake) on CodePen

 

But in all honesty, a homing missile really doesn't belong in a tween. I just did that to show that you can do pretty much anything. In a real project, I would update the missiles on each animation frame.

 

However, you can kind of tween a homing missile using some of the Club GreenSock plugins. A real missile tracks a target by figuring out where it's going to be. Using the VelocityTracker, you can apply the same principle. All you have to do is add the target's current position to the current velocity multiplied by a time value. As long as the velocity of the target doesn't change, you can create a tween that will intercept it. This also makes it a little more realistic as a missile does not always hit it's target. To create a curved path, you could use the BezierPlugin or a reversed ThrowPropsPlugin tween.

 

See the Pen 3fa25cbac40dc007aac2c2c7ce5ef60e?editors=0010 by osublake (@osublake) on CodePen

[TheHulk]

Is the collision detection part of a plugin

[Carl]

hi TheHulk,

 

Welcome to the forums.

 

In Blake's demo there is no hit detection, he pre-determines where the object will be at a certain time and sends the missile there.

 

 

 

FWIW Draggable does have a hitTest() method that can be used like this:

 

TweenLite.set("#orange", {x:500});
TweenLite.to("#orange", (Math.random() *3) + 0.5, {x:0, onUpdate:checkHit});
TweenLite.to("#green", (Math.random() *3) + 0.5, {x:500});


function checkHit() {
  if (Draggable.hitTest("#orange", "#green")){
    TweenMax.killTweensOf(".box");
    TweenMax.to("body", 0.1, {backgroundColor:"red", repeat:3, yoyo:true});
  }
}

http://codepen.io/GreenSock/pen/ZOayGO?editors=0010

 

 

 

 

 

[Jonathan]

Very cool and helpful example Carl

 

Hulk SMASH

 

Sorry i just had too

[Vagabond]

But in all honesty, a homing missile really doesn't belong in a tween. I just did that to show that you can do pretty much anything. In a real project, I would update the missiles on each animation frame.

 

 

Thanks for the examples!

That's close to what I have, although to speed things up I just went with getting close. 

The project is an online multiple player RPG game, so the client is "dumb" and just represents server results.

 

Seems so far though even using TweenLite inside tight loops just to move divs really speeds things up and eliminates requestAnimationFrame code. So I'll be revisiting that for sure  

[OSUblake]

Looks like the plugin is going to be part of the GSAP package, and has been rewritten to run faster. That should help with making some of your tweens more dynamic.

http://greensock.com/forums/topic/14558-feature-request-wrap-values-modulo/?p=63131

 

If the client is dumb, and you know ahead of time if it's going to hit or miss, you could probably do the entire animation using the bezier plugin. For the acceleration, you could tween the timeScale. These examples might be helpful...

See the Pen xbJKWQ?editors=0010 by GreenSock (@GreenSock) on CodePen

See the Pen LuIJj by GreenSock (@GreenSock) on CodePen

 

That Wayne Gretzky quote is perfect!

 

Carl is correct about how the missile hits the target. However, I did add in a really simple distance check for collision detection so that the tween doesn't finish. If I didn't do this, the throwProps tween might cause the rotation to change dramatically right at the end. Here's what it looks like letting the tween finish...

See the Pen 70b882ba514d319c959ae24ced4f7b0b?editors=0010 by osublake (@osublake) on CodePen