[Multiple animation with a single spritesheet]

OSUblake thank you very much. Really helpful

[Multiple animation with a single spritesheet]

Thanks Carl! This forum is just awesome

 

I want to study GSAP more in depth (I bought the Noble Desktop's Step by Step guide. Still reading). Hope to upgrade my plan soon

 

Thanks again all guys!

[Multiple animation with a single spritesheet]

Hi @PointC and thanks for Your reply

 

I created the codepen but unfortunately the cdn I used to link the external images, didn't work

 

I saw You used amazon s3. Good to know for the next time

 

Thanks again, I take a look to your solution

[Multiple animation with a single spritesheet]

I modified the spritesheet to this

 

 

And this is my code:

 

html

<div class="aligner" style="height:100vh;">
	<div>					
		<div id="guile"></div>					

		<div style="margin-top: 1em;">
			<button id="play" class="button big primary">Play</button>						
		</div>					
	</div>
</div>

css

#guile {
  background: url('../../spritesheet_guile.png') no-repeat;
  width: 140px;
  height: 122px;
}

.aligner {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

button {
	margin-top: 1em;
}

Javascript

var tl = new TimelineLite();
var guile = document.getElementById('guile');

tl.to(guile, 2, { backgroundPosition:"-1848px 0px", ease:SteppedEase.config(13), repeat: -1 });

$( "#play" ).click(function() {
   //
});

[Multiple animation with a single spritesheet]

Hello,

I created a single spritesheet that cointains two animations inside it

 

As You can see from this image

 

 

 

The last four frames represent the initial animation, while the first ten, represent the second animation (And It starts when I click a play button)

 

What I would achieve is:

 

1) The first animation (last four frames) start and it loops UNTIL I press the play button

2) Then the second animation start

3) TimelineLite come back to the first animation

 

I tried to obtain this result with two spritesheet but though a single one should be a more elegant solution

 

Thanks in advance for any help

[Animate svg with gradient]

Thanks again Jonathan!! Really helpful

[Animate svg with gradient]

Hello jonathan and thanks

 

Annoyng question: Can You please provide me a working example with my codepen?

[Animate svg with gradient]

Hi all

 

I need to animate an svg with gradient and I'm using SMIL at this time. Unfortunately in IE and Edge it doesn't works

 

Is it possible to animate it with GSAP?

 

Thanks in advance

See the Pen PZLjeg by anon (@anon) on CodePen

[animate text with gsap and blast.js]

Hey Michael, really thanks for the reply. I solved using this code:

$(window).load(function () {

	$("h2").blast({ delimiter: "letter" });

	var tl = new TimelineMax({delay:1, onComplete:completeHandler});

	tl.staggerFromTo(".blast", 0.15, {autoAlpha:0}, {autoAlpha:1},0.2);

	function completeHandler()
{
    $("h2").blast(false);
}

});

[animate text with gsap and blast.js]

Hi all I'm a new member

 

I need to animate text with Gsap. I know of SplitText plugin, but unfortunately I am not a premium member. I found blast.js that it's perfect for my needs:  http://julian.com/research/blast/

 

Is it possible to use it with Gsap? If yes, can You provide me an example, please?

 

Thanks in advance