Jump to content

glassbean

Members
  • Content Count

    9
  • Joined

  • Last visited

Community Reputation

4 Newbie

About glassbean

  • Rank
    Newbie

Recent Profile Visitors

254 profile views
  1. @Jack and @Carl Thanks a lot for your help. Your replies have prompted me to look at the files in Chrome and it works as you say, but not in Firefox, my default browser, the most recent version. The sprite part doesn't loop. Did you see it working in Firefox? Thanks for the tips. I will make sure to upload a correct codepen next time around.
  2. Hey Jack, Thanks for your reply. Ive stripped down the problem to its essentials. Ive attached a zip of the file for you to look at in its simplest The loop should replay the whole timeline including the stepped ease on the sprite sheet but its doesnt it only loops the fade on the beam. If I remove the line of code tweening the beam, the sprite sheet is reanimated with the loop as expected. I just cant figure out why its doing this? function doAnim() { TL = new TimelineMax(); TL.stop(); TL.set([spriteSheet], { x: 0 }); TL.set([bg], { alpha: 0 }); TL.play() /*--- FRAME 1 IN ---*/ TL .to(spriteContainer, .1, { autoAlpha: 1, ease: Sine.easeInOut }) .to(spriteSheet, 1.5, { x: -11400, ease: SteppedEase.config(38) }, "+=0.2") .to(beam, .7, {autoAlpha:.6, ease:Sine.easeOut}, "+=.5") // If i remove this line the sprite is looped .call(loopMe) } function loopMe() { console.log("loopMe"); TL.set([spriteSheet], { x: 0 }); TL.restart(); } simpleSpriteLoop.zip
  3. Hi There, I am not quite sure why the following code which simply repeats a timeline that plays a animated sprite twice works fine: TL = new TimelineMax({repeat:1}); TL.stop(); TL.set([spriteSheet], {x:0}); TL.play(); TL.addLabel("f1", "0") TL.to(spriteContainer, .1, {autoAlpha:1, ease:Sine.easeInOut}, "f1+=0"); TL.to(spriteSheet, 1.5, {x:-(spriteWidth * spriteCopyFrame),ease:SteppedEase.config(spriteCopyFrame)}); but if I add another tween after the sprite stepped ease animation, the sprite is not reanimated on the repeat but the new tween is animated twice as per the repeat:1 TL = new TimelineMax({repeat:1}); TL.stop(); TL.set([spriteSheet], {x:0}); TL.play(); TL.addLabel("f1", "0") TL.to(spriteContainer, .1, {autoAlpha:1, ease:Sine.easeInOut}, "f1+=0"); TL.to(spriteSheet, 1.5, {x:-(spriteWidth * spriteCopyFrame),ease:SteppedEase.config(spriteCopyFrame)}); TL.to(beam, .5, {autoAlpha:.8, y:80, x:-35, scaleX:.35, scaleY:.35, ease:Sine.easeOut}, "f1+=1.9"); Ive tried resetting the the sprites x position with different methods but still it will not replay and seems to always hold on the first frame. Any help appreciated as Ive spent a few hours trying different solutions without success
  4. I am using stepped ease to animate a sprite and it works fine. The problem i have is that there are so many frames that strip is now too wide and I need to have a grid of rows and columns of images Is there a way of animating the y position incrementally as well the x position using the following: TL.to(spriteSheet, 4, {x:-(spriteWidth * spriteNoOfFrames),ease:SteppedEase.config(spriteNoOfFrames)},"f1+=2.5" ); Thanks in advance... I really would love to use stepped ease since its so slimline compared with other js sprite animation code.
  5. Thanks both for the replies really useful.
  6. Hello, Simple question that I can can't seem to find the answer for in the docs. I want to split a word into characters and animate each character individually to a spot, but I cannot find the syntax to identify them individually, from what I gather they are stored as an array.. I have var mySplitText = new SplitText("txt1"); TL.to(mySplitText.chars, 0.5, {x:150, ease:Back.easeOut}) But rather than shift all the characters by 150px to the right I want all the character to condenses to the same point at x=150 Thanks in advance.
  7. Thanks for the swift reply Dipscom, seems I've a lot to learn. Quick replies and good advice such as yours will speed my up my learning.
  8. Hi There, Finally migrating from Flash to HTML5 and am completely new to CSS & JS. I'm making some simple banners to get up to speed. I have a problem tweening single characters of a text which are broken apart in html using span tags. In the codepen example linked, why for example does the opacity property work fine but not the scale or co-ordinate positions? Thanks for you time, G*