redmile

OSUblake thank you very much. Really helpful

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!

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

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() { // });

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

Thanks again Jonathan!! Really helpful

Hello jonathan and thanks Annoyng question: Can You please provide me a working example with my codepen?

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

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); } });

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