Jump to content
GreenSock

redmile

Members
  • Posts

    10
  • Joined

  • Last visited

Posts posted by redmile

  1. I modified the spritesheet to this

    spritesheet_guile_cxecmn.png

     

     

    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() {
       //
    });
    
    • Like 1
  2. Hello,

    I created a single spritesheet that cointains two animations inside it

     

    As You can see from this image

     

    2nwmOzv.png

     

     

    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()
    {
        $("h2").blast(false);
    }
    
    });
    
    • Like 1
×