Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by redmile

  1. I modified the spritesheet to this




    And this is my code:



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


    #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;


    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() {
    • Like 1
  2. 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 :)

  3. 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()
    • Like 1