SPRITE ANIMATION - Failed Attempt

[SoL2Squiz 3 Likes (Newbie)]

Hello Guys,

 

I am trying to understand how SPRITE ANIMATION works using GSAP and found this example which is exactly what I have in mind.

See the Pen MYdwRP by MAW (@MAW) on CodePen

 

Now, I tried to simplify the whole code by removing those that I don't need. (My only purpose was to PLAY a simple animation for my project). But for some reason, I screwed things up. I do not know what happened after this.......

 

 

 

 

Thank you!!

 

 

See the Pen WwEmbY by BUroKHUli (@BUroKHUli) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi SoL2Squiz 

 

var animate = TweenMax.to('.MySprite2', 1, {
  repeat: -1, // >> loops the sprite ( -1 = infinity loop )
  x: -2250, //  >> -( width - width/frame )
  ease: SteppedEase.config(15) // >> total frame - 1
});

 

pls load TweenMax too 

[SoL2Squiz 3 Likes (Newbie)]

 

Hi SoL2Squiz 

 

var animate = TweenMax.to('.MySprite2', 1, {
  repeat: -1, // >> loops the sprite ( -1 = infinity loop )
  x: -2250, //  >> -( width - width/frame )
  ease: SteppedEase.config(15) // >> total frame - 1
});

 

pls load TweenMax too 

 

so I just did not load the TweenMax? what is wrong with the code itself? I cannot seem to see what's the difference. NOOB mistake!!! LOL

[Jonathan 5,176 Likes (Superhero)]

Hello SoL2Squiz,

 

To add to Diaco's great advice

 

Here is another image sprite animation using GSAP you can use as a reference example:

 

See the Pen zrGGmQ by jonathan (@jonathan) on CodePen

 

[SoL2Squiz 3 Likes (Newbie)]

Hi @Diaco @Jonathan, 

 

Thank you responding to my post. I was to realize my mistake now. However, if have one last question about the sequence. How will I add another "sprite animation" in the same page that will load after the first animation is finished?

[SoL2Squiz 3 Likes (Newbie)]

I have another question, I removed this code block below

 

function timeScale(X) {

  TweenLite.to([sprite01], 1, {

    timeScale: X

  });

};

 

and the animation still goes one; i thought the function calls the variable?

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

For adding a new sprite animation use an onComplete callback on the timeilne, only if the timeline doesn't have a repeat:-1, in that case the timeline is set for an endless loop and will never complete, in that case you can use a call() method at a certain position in the timeline.

 

For the second question, for what can I see, the timeline you're using is not paused or it's timeScale is not set to 0. The code you add simply tweens the timeScale property of the animation, just that.

 

I'm not completely sure of what you're after here. I forked your codepen and made some changes to it, please check it and adapt it to fit your scenario so we can follow up properly:

 

See the Pen bpoWzL by rhernando (@rhernando) on CodePen

[SoL2Squiz 3 Likes (Newbie)]

Hi,

 

For adding a new sprite animation use an onComplete callback on the timeilne, only if the timeline doesn't have a repeat:-1, in that case the timeline is set for an endless loop and will never complete, in that case you can use a call() method at a certain position in the timeline.

 

For the second question, for what can I see, the timeline you're using is not paused or it's timeScale is not set to 0. The code you add simply tweens the timeScale property of the animation, just that.

 

I'm not completely sure of what you're after here. I forked your codepen and made some changes to it, please check it and adapt it to fit your scenario so we can follow up properly:

 

See the Pen bpoWzL by rhernando (@rhernando) on CodePen

 

I wanted to start another animation after the first animation is finished. that's why I tried to remove all the extra codes to see how the basic works

[Rodrigo 2,662 Likes (Superhero)]

In that case either an onComplete callback or a Timeline is what I could recommend, but that would depend on how your app is planned.

[dalisoft 16 Likes (Newbie)]

Hello Guys,

 

I am trying to understand how SPRITE ANIMATION works using GSAP and found this example which is exactly what I have in mind.

See the Pen MYdwRP by MAW (@MAW) on CodePen

 

Now, I tried to simplify the whole code by removing those that I don't need. (My only purpose was to PLAY a simple animation for my project). But for some reason, I screwed things up. I do not know what happened after this.......

 

See the Pen WwEmbY by BUroKHUli (@BUroKHUli) on CodePen

 

 

 

Thank you!!

In your pen TweenMax not loaded, you can add TweenMax via Settings of your pen.

Thanks, @dalisoft