Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
SoL2Squiz

SPRITE ANIMATION - Failed Attempt

Recommended Posts

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

Link to comment
Share on other sites

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 
  • Like 1
Link to comment
Share on other sites

 

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

Link to comment
Share on other sites

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

 

:)

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×