[Animation Scene Manager?]

This is good stuff, Dave.

 

I'm going to be digging into it later for sure!

[What causes screen tearing? How can I improve performance?]

Setting force3D to true seems to have corrected the issue.

 

Thanks, Jonathan!

[What causes screen tearing? How can I improve performance?]

Windows 7 (32-bit) and Chrome 38 is the only browser with the issue. IE and Firefox seem to be working fine.

 

I will attempt setting force3D to true.

 

Will this break in IE8/9 or simply revert back to false?

[What causes screen tearing? How can I improve performance?]

So I have a problem with images tearing or not being completely removed from the screen on transitions. See attached image.

 

What is the cause of this? Am I trying to do too much on the screen and the browser can't keep up? Can I do anything to improve performance?

 

I have a link here. (Still very rough as I'm just playing with some ideas)

http://bcifiles.bytesofknowledge.com/dev/acc/rough

 

 

 

[.call and .delayedCall - Spritesheet Problems]

Thanks for your help Jamie. I used the separate timeline and it worked great!

[Adding multiple TweenMax to timeline in loop - Browser Performance Issue? Hi Carl!!]

Pretty sure it has to do with maximum image size for Safari Mobile. 

 

http://www.williammalone.com/articles/html5-javascript-ios-maximum-image-size/

 

My solution was to simply reduce my image sizes.

[.call and .delayedCall - Spritesheet Problems]

Pretty awesome stuff, jamie... Thanks for your help. I owe you a beer.

 

How do I access a Timeline created in that way? Can you please check out this fiddle and click the girl once she appears?

http://jsfiddle.net/nicktest2222/sV5Ug/77/

[.call and .delayedCall - Spritesheet Problems]

Fiddle is here: http://jsfiddle.net/nicktest2222/sV5Ug/74/

 

So I'm preparing to build my timeline. I have a buildAnimation function that creates my sprite-sheet animations. If there is a better to way to go about doing this, please share some knowledge with a noob. I want to create my sprite-sheet animations up front and call them at certain points in my timeline. I don't need to build them on the fly. Any help would be GREATLY appreciated.

 

I was expecting to use: Didn't work.

tl.call(buildAnimation, ["title", 628, 510, 10, 4, 0.11])

So I played around with this: Which kinda worked until...

tl.add( TweenLite.delayedCall(-1, buildAnimation,  ["title", 628, 510, 10, 4, 0.11]))

Until I added this after it, which caused the sprite-sheet not to work (or force itself to last frame)

tl.add( TweenLite.delayedCall(-1, buildAnimation,  ["title", 628, 510, 10, 4, 0.11]));
  .to("#title", 0.5, {left:-1000}, "+=1.5");

[TranslateZ sends image flying off the page]

Awesome job!

[Adding multiple TweenMax to timeline in loop - Browser Performance Issue? Hi Carl!!]

Thanks Carl!

 

One last thing, do either of you know what would cause issues in IOS with my code above? I'm seeing some strange things. Duplicating frames, white screen flashes... I have a scary feeling you are going to tell me to use <canvas>.

 

Here is a link to test with:

http://bcifiles.bytesofknowledge.com/dev/accident/

 

An image of the problem.

[Adding multiple TweenMax to timeline in loop - Browser Performance Issue? Hi Carl!!]

Argh, I did. Thanks for your help, Jack!

[Adding multiple TweenMax to timeline in loop - Browser Performance Issue? Hi Carl!!]

Thanks, Jack! Your solution worked, except that adding a label seems to have affected the animation. What is causing this? 

 

Here with:

http://jsfiddle.net/nicktest2222/sV5Ug/70/

 

Here without the label:

http://jsfiddle.net/nicktest2222/sV5Ug/72/

[Adding multiple TweenMax to timeline in loop - Browser Performance Issue? Hi Carl!!]

I'm having some performance challenges. Very new to Greensock and animation in general, so I'm not sure where my problem is coming from. 1 animated spritesheet at a time works very well, it's just when I try and put 3 in the same loop that it gets very sluggish.

 

Can anyone help point me in a better direction? Maybe the way I'm attempting to build my timeline can be optimized? Any help would be greatly appreciated!

 

Fiddle: http://jsfiddle.net/nicktest2222/sV5Ug/67/

Full screen: http://jsfiddle.net/nicktest2222/sV5Ug/67/embedded/result/

 

[Continuous background looping in timeline]

Try this: 

See the Pen sueqI by GreenSock (@GreenSock) on CodePen

 

Does that help?

 

You the man! Thanks!

[Continuous background looping in timeline]

Example: http://mailinator.com/index.jsp

The background is a static blue and the cloud image found here: http://mailinator.com/assets/img/clouds-s.png

, just subtracts along the x-axis. 

 

How would you duplicate this action in a timeline? I think I get the x:-1 and repeat:-1 part; I'm just not sure how you would reset the image so a small image can loop on forever?

 

Any help would be greatly appreciated.

 

Thanks.

 

[Play sound clip in tweens]

Thanks a bunch for the reply and the warm welcome. Very excited to be using GSAP!

[Play sound clip in tweens]

Using SoundManager2 library, my sound has already been created. I want to call the play function once my timeline reaches the correct point. Any ideas how I can do this? Thanks in advance.

tl.set("#mod5", {visibility:"visible"}, "#mod5")
  // call soundManager --> soundManager.play('mod5')
  .staggerFrom("#e5", 0.5, {autoAlpha:0, x:180})
  .to("#e6", 0.5, {delay:1});