DannyT
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by DannyT
-
-
As I understand it, force3D is not enabled by default because overuse can lead to severe performance issues?
If that's so, do we have any indication as to what is considered "overuse"? Is it animating x many items or so many pixels?
Just curious and appreciate it's subjective but if anyone has any more indication of when it's best to use and not to use force3D I'd be interested
-
Sorry me again with more weirdness I'm sure being caused by my abusing of the library! I'm struggling to simplify into a jsfiddle again but I will keep trying but thought I'd see if I can get some clues from you guys in the meantime.
I have something like the following:
var runnerTimeline = new TimelineMax(); for(var i=0; i<15; i++) { runnerTimeline.to(assets.oct_run_frame1_face1, 0.2, {top:"+=50", left:"+=20", ease:Back.easeOut}); runnerTimeline.to(assets.oct_run_frame1_face1, 0.2, {top:"-=50", left:"+=20", ease:Back.easeOut}); } mainTimeline.add(runnerTimeline); mainTimeline.call(myFunc);The idea being that an object bobs along the screen for 15 iterations and then myFunc gets called. This is all fine and works how I'd expect.
But, I also have a means of skipping past this which seeks to the next part of my animation. With the code as above, myFunc will get called as soon as I seek (which I don't expect as the default is to suppress events and even if I explicitly say seek('something', true) it still gets called. I've tried replacing the .call() with an onComplete event but that exhibits exactly the same behaviour so I assume .call() is just some convenience method to an appropriate event(?).
What really boggles my mind is that if change the loop to be:
for(var i=0; i<=15; i++)
i.e. 16 iterations, then it suppresses the call/event exactly as I want!
Can you offer any clues as to what might be the problem based on this info or will you need (as I suspect) a demonstrable fiddle/pen?
Sorry to be vague but if you can offer any insight as to what's going on internally I'd be most grateful
Dan
-
Rather than "after" an infinitely looping TL what would you recommend for waiting for user input?
Just a completely new timeline I guess?
-
Just in case it helps anyone else with the same issue or with debugging the cause, the workaround I'm using is to avoid {repeat:-1} and instead just setting the repeat to a ridiculously high number:
-
Okay so I've managed to reproduce this in a simple example, it seems to be related to repeat:-1
http://jsfiddle.net/DannyT/zfDJx/1/
What should happen is when you click the spinning box, the next timeline will play through then throw an alert at the end.
The success of the final call being made is based on the following conditions for the duration set on line #9:
0.1, 0.2, 0.6 or 0.7 = Fail
0.3, 0.4, 0.5, 0.8, 0.9 or 1 = Success
Weird huh?
Now I know the conditions I can work around it but thought you might be interested.
-
Thanks Carl, I was fairly sure it was my issue somewhere but just wanted confidence I wasn't battling a known issue. Your information has helped boost that confidence so thank you
I've come this far with my jsfiddle and it's still holding up so I'm pretty sure I just need to find the bug in my own code somewhere http://jsfiddle.net/DannyT/wpdnF/1/
-
1
-
-
Hey guys, really impressed with GSAP having a great time building an interactive html5 animation with it.
I've got a weird issue that I'm trying to create in jsfiddle but unfortunately cannot.
The following code:
var getFebruaryTimeline = function(){ var febtimeline = new TimelineMax() // bring in notice .from(assets.feb_notice, 1, {rotation:120, transformOrigin:"50% -20%", ease:Back.easeOut}) // bring in woman .from(assets.feb_woman1, 1, {top:"+=600",rotation:-90, transformOrigin:"50% 100%", ease:Back.easeOut, delay:3}, 'woman') // bring in man .from(assets.feb_man1, 0.7, {top:"+=600",rotation:90, transformOrigin:"50% 100%", ease:Back.easeOut}, 'man') // dance a bit .to(assets.feb_woman1, 0.5, {top:"+=10", left:"+=10"}, 'man') .to(assets.feb_man1, 0.5, {top:"+=10", left:"+=10"}, 'dance1') .to(assets.feb_woman1, 0.5, {top:"-=0", left:"+=10"}, 'dance1') .to(assets.feb_man1, 0.5, {top:"-=20", left:"-=20"}, 'dance2') .to(assets.feb_woman1, 0.5, {top:"+=10", left:"-=10"}, 'dance2') .to(assets.feb_man1, 0.5, {top:"+=10", left:"+=10"}, 'dance3') // bring in suit .from(assets.feb_suit, 0.1, {opacity:0, onComplete:function(){ $(assets.feb_man1).attr('src', $(assets.feb_man2).attr('src')); }}, 'suitswap') // lose the suit .to(assets.feb_suit, 1.5, {left:"+=50", top:"+=400", rotation:90, ease:Circ.EaseOut}, 'suitswap+=0.5') // embarassing .to(assets.feb_man1, 0.1, {top:"+=1", onComplete:function(){ $(assets.feb_man1).attr('src', $(assets.feb_man3).attr('src')); $(assets.feb_woman1).attr('src', $(assets.feb_woman2).attr('src')); }}, 'suitswap+=1.2') // run away .to(assets.feb_woman1, 0.5, {left:"+=300"}) .to(assets.feb_man1, 2, {left:"-=650"}) // clear notice .to(assets.feb_notice, 0.5, {rotation:120, transformOrigin:"50% -20%"}) .call(nextMonth); return febtimeline;on the line highlighted with "// bring in man" if the duration value is set to 0.7 then for some reason the .call(nextMonth) never gets executed. If I change this to 0.5 the call is fine!? All the other steps in the sequence run as expected just the call never happens.
I've got numerous similar animations and am experiencing similar fragilities throughout and so wondered if there was some known quirk I might be experiencing? There's quite a lot of other stuff going on (preloading the assets for each timeline before creation) hence the complexity in reproducing.
I'll keep trying to recreate in a simplified jsfiddle but thought I'd post this now in case there's something obvious I'm missing.
Cheers!
force3D as default
in GSAP
Posted
Good shout, a quick play already starts to give some indication.
I'm well aware it was a very subjective question but from a point of complete ignorance knowing whether 3, 30, 300 or 3000 animations is too much helps.