[Minimum System Requirements for GreenSocks?]

I'm wondering how little RAM and GHZ of CPU and GPU Ram would be needed to run an application that is solely GSAP? The application utilizies blurs, and advanced easing that render poorly when out of RAM. The application also runs in Google Chrome.
 

Ideas on ideal system requirements? 

[onComplete functions not firing in first timeline]

That is what I had implemented the first time and it works quite well, however this application has to work on an iPad where the only way to animate is using requestAnimationFrames which is how this works on the iPad but I cant intercept that to make the plant animate. Sad face iPad

[onComplete functions not firing in first timeline]

Ok that does fix the on completes, but with that I would have to go in and redo all of my animations as the timing is off with all of the staggering.

 

I think I am going to have to find a better way to animate my plant image, as the rest of the application is already in a good state and changing this fixed the plant and destroyed everything else lol.

 

Thanks!

[onComplete functions not firing in first timeline]

Ok so I realized all of the appends are doing the same, it just looked different.

 

So If I were to .add() instead of append what position would I put the other 9 appends I have at, would 1-9 work?

 

I think this is more of an experiment now because of superscrollerrama

[onComplete functions not firing in first timeline]

Ok I just tried the onStart and they all start at the same time as well.

 

Any ideas on how to run my functions during each animation? I can't attach the plant sprite to SuperScrollerama and a Tween because I don't need to animate its position but make it change positions immediately.

[onComplete functions not firing in first timeline]

Thanks for taking the time to make that video Carl.

 

I understand now what is going on with the Superscrollerama and Greensocks pair.

 

What I was trying to do is attach the tree sprite to change at the end of every animation, but as each of those all end at the same time because they are in the same append it wont work.

 

I can't put every animation in a new append as that would mean the red covers the screen, then the text comes down etc etc, making the animation much longer (meaning more scrolling) than intended.

 

What I think I can do for the staggered approach to the sprite while keeping the animations the same is to use the onStart instead of the onComplete, as I believe each animation would indeed start at a different time because of the 0.5 on the previous animation.

 

Am I correct in thinking thats how it would work?

 

Thanks

James

[onComplete functions not firing in first timeline]

Getting a 404 error on that link. 

 

From looking at the code alone it seems that the first 5 tweens should start and end at the same time thus firing their onComplete callbacks in unison.

 

Very hard to imagine a situation where 1 tween's onComplete callback doesn't fire until another tween completes like you are suggesting.

 

 

 

 

There is no all at once in this application its not possible as its all stepper based animating with superscrollerama.

 

And what you say doesn't explain why the other animations fire fine.

[onComplete functions not firing in first timeline]

http://play.jerw.ca/demo/ link wont paste...

[onComplete functions not firing in first timeline]

I dont know how .html got in there 

[onComplete functions not firing in first timeline]

I don't really have the time to make a subset, the whole thing is here http://play.jerw.ca/demo.html

[onComplete functions not firing in first timeline]

That didn't work. SuperScrollerama acts as a stepper for the animations, attaching one pixel scrolled to one frame of animation basically. So it's always paused until you start scrolling.

 

All other animations happen no problem, and the first 5 animations happen no problem it's just that the onComplete function's do not fire until the 5th one has finished then all at once console logs complete on all 5.

[onComplete functions not firing in first timeline]

I can't create it in another form it would defeat the purpose of finding the bug. I show you two .appends that have animations in them

 

The second appends oncomplete animations fire just fine and the next 40, however the first 5 do not until the 5th animation has completed

[onComplete functions not firing in first timeline]

This also doesn't explain why all 40 other animations work just fine and the first 5 do not...

[onComplete functions not firing in first timeline]

I am passing it an anonymous function that calls a function neither of your examples properly explain how to implement passing of my variable to the function.

[onComplete functions not firing in first timeline]

I checked and the animations onComplete are ALL being called after the first append statement.

 

All 5 get called but right after each other, not when the tween has finished.

[onComplete functions not firing in first timeline]

I have a separate stepped animation that I am using on the onComplete of the TweenMax animations and it works great everywhere except the first 5 animations.

 

Here is the code excerpt. The last onComplete will fire causing all previous onComplete's to fire.

function treeanimation(treeFrame){
		bgPos = treeFrame*211;
		$("#plant").css('background-position', '0px -'+bgPos+'px');
	}
	var controller = $.superscrollorama({})
	controller.pin($('#slides'), aniDur,{
		anim: (new TimelineLite())
		.append([
			TweenMax.to($('#slide1-bg'), .5, 
				{css: 
					{
						top:"100%"
					},
					onComplete: function(){
						treeanimation(1);
					},
					onReverseComplete: function() {
						treeanimation(0);
					}
				}
			),
			TweenMax.to($('#slide1-content'), .5, 
				{css: 
					{
						top:"-50%",
						display: "none"
					},
					onComplete: function(){
						treeanimation(2);
					},
					onReverseComplete: function() {
						treeanimation(1);
					}
				}
			),
			TweenMax.to($('#slide1-body'), .5, 
				{css: 
					{
						display:"none"
					},
					onComplete: function(){
						treeanimation(3);
					},
					onReverseComplete: function() {
						treeanimation(2);
					}
				}
			),
			TweenMax.to($('#slide2-content'), .5, 
				{css: 
					{
						marginTop:"20%"
					},
					onComplete: function(){
						treeanimation(4);
					},
					onReverseComplete: function() {
						treeanimation(3);
					}
				}
			),
			TweenMax.to($('#slide2'), .5, 
				{css: 
					{
						top:"0"
					},
				onComplete: function(){
					$("#slide2-nav").html('<img src="img/active-btn.png" alt="Slide 2">')
					$("#slide2-nav").parent().addClass('active')
					treeanimation(5);
					},
				onReverseComplete: function(){
					$("#slide2-nav").html('<img src="img/inactiv-btn.png" alt="Slide 2">')
					$("#slide2-nav").parent().removeClass('active')
					treeanimation(4);
					}
				}
			)
		])
		.append([
			TweenMax.to($('#slide2'), .5, 
				{css: 
					{
						right:"-100%"
					},
					onComplete: function(){
						treeanimation(6);
					},
					onReverseComplete: function() {
						treeanimation(5);
					}
				}
			),
			TweenMax.to($('#slide2-content'), .5, 
				{css: 
					{
						marginLeft:"-90%",
						display: "none"
					},
					onComplete: function(){
						treeanimation(7);
					},
					onReverseComplete: function() {
						treeanimation(6);
					}
				}
			),
			TweenMax.to($('#slide3'), .5, 
				{css: 
					{
						left: "0%"
					},
				onComplete: function(){
					$("#slide2-nav").html('<img src="img/inactiv-btn.png" alt="Slide 2">')
					$("#slide3-nav").html('<img src="img/active-btn.png" alt="Slide 3">')
					$("#slide3-nav").parent().addClass('active')
					$("#slide2-nav").parent().removeClass('active')
					treeanimation(8);
					},
				onReverseComplete: function(){
					$("#slide3-nav").html('<img src="img/inactiv-btn.png" alt="Slide 3">')
					$("#slide2-nav").html('<img src="img/active-btn.png" alt="Slide 2">')
					$("#slide3-nav").parent().removeClass('active')
					$("#slide2-nav").parent().addClass('active')
					treeanimation(7);
					}
				}
			),
			TweenMax.to($('#slide3-content'), 0.5, 
				{css: 
					{
						marginLeft: "10%"
					},
				startAt: {css:
						{
							marginLeft: "110%"
						}
					},
					onComplete: function(){
						treeanimation(9);
					},
					onReverseComplete: function() {
						treeanimation(8);
					}
				}
			),
		])

Any Help would be greatly appreciated. This is integrated with SuperScrollerama