Search the Community
Showing results for tags 'timlinelite'.
Found 3 results
-
I know this is a bit off topic but i wanted to know is there anyway to do this? I'm creating a animation editor and i used GSAP for tweens and timeline,and I want users to be able to export animation as video and download them.
-
Hi all, I have a timelineLite that disables pointer-events on a div. When the div is clicked, it fires the timeline. This works except that it allows 1 final 'mouseout' event after pointer-events should have been disabled. let div = document.querySelector(`div`); div.onclick = function() { console.log('click!'); tl.play(); }; div.onmouseout = function() { console.log('mouseout!'); }; let tl = new TimelineLite({paused: true}); tl.set(div, {css: {pointerEvents: `none`}}) Any ideas?
-
I'm making the switch from Flash to GSAP HTML5 animation and want to really make sure I'm doing this the best way. Right within my html doc I have a series of animation that utilize TimelineMax so that I may loop the entire set of animations. I have a few questions about these. First of all here is the code: <script> window.onload = function(){ var tl = new TimelineMax({repeat:2, repeatDelay:3}); tl.add( TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn}) ); tl.add( TweenLite.to(my_films, 1, {width:177, height:44, alpha:1, ease:Power1.easeIn}) ); tl.add( TweenLite.from(season2, 1.5, {alpha:0}) ); tl.add( TweenLite.to(grantland, .5, {x:19, alpha:1}) ); tl.add( TweenLite.to(packshot, 2, {alpha:1, ease:Power4.easeIn}) ); tl.add( TweenLite.to(holiday, 1, {alpha:1}) ); tl.add( TweenLite.to(starts, .75, {alpha:1}) ); tl.add( TweenLite.to(buy, .5, {alpha:1, top:142, ease:Back.easeOut}) ); } </script> Is there a more optimized way to load these? I know that window.onload = function(){ isn't the best way - I heard that document.ready could be a good way but having a hard time getting that work. Further more I can probably scrap the TweenLite reference all together and just use tl.to, is that correct? Also right now I'm pulling in the entire TweenMax library in this manner: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script Is there a way to only load the select things that I need and therefore save on file size? Please advise. Apologies for the noob questions! Thanks in advance for any help!
