Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Everything posted by danissimo

  1. Is there any way to disable matrix transformation in the engine? Percentage is a must-have in adaptive design (adaptive banners in my case). Yes, I can change x/y with left/top properties, but when I need to tween rotation or scale and I already have some transforms assigned to my div through css, that transforms become overridden with the tween matrix.
  2. ohem: Yep, that's much better, thank you.
  3. Sorry for the late reply. Even with Linear Ease there is jitter (and sometimes trash pixels) in animation in Chrome. Here's the video: https://youtu.be/EDjYEzBNHNk And here is the updated (simplified) pen: https://codepen.io/eliio/pen/NdVebJ I've checked other topics and found this is a long story bug in Chrome. https://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-4
  4. Thank you, Classikd, things get really better in FF, but in Chrome and Opera the flickering remains. I tried both css and js approach: CSS: backface-visibility: hidden, transform: translateZ(0); JS: force3D:true, z:0.01 And if I get it right enabling 3d properties increases CPU usage which is vital for banners. Updated Codepen: https://codepen.io/eliio/pen/NdVebJ
  5. Here's the Codepen (yeah, easy and fun ) ): https://codepen.io/eliio/pen/NdVebJ Plane ease is so unnatural in most cases. I think these jumps are because of svg, will try to change them to bitmaps. And I suppose these antialiasing problems are due browser rendering. Is there any way to change these settings from script?
  6. Here's my example: http://artquest.ru/temp/avon/container.html (sorry for non-Codepen, learning it yet) Notice the 1px jump at the end of the text animations (Chrome, FF), also note the antialiasing change (and similar jump) of all the text after "big V" animation starts (most noticeable in FF). Additionally there is a barely visible pulsing of the middle petal lower border. I think it's all antialiasing problems. Is there any method to avoid it? If pure css animation is used there's no such problems.
  7. Is anyone of you, guys, using GSAP for creating ad templates for sale (for example for Codecanyon)? Is it possible, any tips or pitfalls?
  8. Are there any shortcuts in TransformAroundPointPlugin? Something like TOP_RIGHT or BOTTOM_CENTER as in LiquidStage.
  9. I'm trying to pause nested timeline: prezStartTimeline.call (buttonsHomeOff) .to ([_rootRef.overlay, _rootRef.bottomPlate], 0.5, {autoAlpha:1, ease:Linear.easeNone, onComplete:function():void {backdropLoader.pauseVideo(); _rootRef.backdrop.visible = false;}}) .staggerFromTo ([_rootRef.buttonHome, _rootRef.buttonBack, _rootRef.buttonForward], 0.5, {y:"+=20"}, {y:"-=20", autoAlpha:1, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1) .add (RAOTimeline); RAOTimeline.addLabel ("slide_01") .staggerFrom ([_rootRef.prezRAO.item_01, _rootRef.prezRAO.item_02, _rootRef.prezRAO.item_03], 0.5, {y:"+=20", alpha:0, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1) .addLabel ("slide_02") .addPause ("slide_02") .to ([_rootRef.prezRAO.item_01, _rootRef.prezRAO.item_02, _rootRef.prezRAO.item_03], 0.5, {alpha:0, ease:Linear.easeNone}) .to (_rootRef.logoSmall, 0.5, {y:"-=20", autoAlpha:1, ease:Cubic.easeOut}) .staggerFrom ([_rootRef.prezRAO.item_04, _rootRef.prezRAO.item_05, _rootRef.prezRAO.item_06, _rootRef.prezRAO.item_07, _rootRef.prezRAO.item_08], 0.5, {y:"+=20", alpha:0, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1, "-=0.4") But when I again play child timeline after the pause (.play()), the playhead is already at the end of the child timeline (all objects are already animated to the end values). Looks like the values calculations don't stop at the pause position. Is it a bug or did I miss anything?
  10. Hello, Is it possible to use Bezier and transformAroundCenter plugins simultaneously?
  11. Hello, If I call a function at the end of a timeline, position parameter doesn't work (neither absolute nor relative). Here's the code: var startupTimeline:TimelineLite = new TimelineLite(); startupTimeline.set (overlay, {_visible:false}) .from (backdrop, 0.3, {_alpha:0, ease:Linear.easeNone}) .staggerFrom ([picBox_1, text_1], 0.3, {_y:"+=10", ease:Cubic.easeOut}, 0.1) .staggerFrom ([picBox_1, text_1], 0.3, {_alpha:0, ease:Linear.easeNone}, 0.1, "-=0.4") .from ([arrowLeft, arrowRight], 0.3, {_y:"+=10", _alpha:0, ease:Cubic.easeOut}, "-=0.2") .staggerFrom ([chooseButton, logo], 0.3, {_y:"+=10", _alpha:0, ease:Cubic.easeOut}, 0.1, "-=0.2") .from (text_2, 0.3, {_y:"+=5", _alpha:0, ease:Cubic.easeOut}, "-=0.2") .from (text_18_plus, 0.3, {_alpha:0, ease:Linear.easeNone}, "-=0.2") .set (backdropOverlay, {_visible:true}) .call (function():Void {switchPortraitsTimer = setInterval (switchPortraits, 2000);}, null, "-=1");
  12. Hello, is there any method to avoid blurriness while tweening images with 3d transforms (rotationY exactly)? Additionally there is a tiny jump in size of an image when the tween begins. Here's the screens: before tween, sharp and after tween, blurred:
  13. I have a timeline with infinite repeat and a function call. There are couple of Tweens in that function. It seems these tweens don't fire during the first cycle but do fire in the next cycles. When I delete the repeat option timeline works as expected. Do I miss something? GSAP 12.1.0 rc2. Here's the code: var portraitsTimeline:TimelineMax = new TimelineMax ({delay:1, repeat:-1, repeatDelay:1}); portraitsTimeline.set (overlay, {visible:false}) .call (switchPortraits); function switchPortraits():void { if (!picBox_2.visible){ picBox_2.visible = true; } if (currentPortraitNumber < 5){ currentPortraitNumber++; } else { currentPortraitNumber = 1; } if (odd){ odd = false; portraitCurrent = picBox_1; portraitNext = picBox_2; } else { odd = true; portraitCurrent = picBox_2; portraitNext = picBox_1; } if (portraitNext.numChildren > 2){ portraitNext.removeChildAt (2); } var dynamicClassName:String = "Portrait_" + currentPortraitNumber; var classReference:Class = getDefinitionByName (dynamicClassName) as Class; var currentPortrait:Bitmap = new Bitmap (new classReference (180, 156)); portraitNext.addChild (currentPortrait); portraitNext.getChildAt (2).x = -90; portraitNext.getChildAt (2).y = -78; TweenLite.fromTo (portraitCurrent, 0.7, {x:120, y:115, rotationY:0, scale:1}, {x:-50, y:110, rotationY:50, scale:0.9, ease:Cubic.easeInOut, onStart:function():void {tweenActive = true;}, onComplete:function():void {tweenActive = false;}}); TweenLite.fromTo (portraitNext, 0.7, {x:290, y:110, rotationY:-50, scale:0.9}, {x:120, y:115, rotationY:0, scale:1, ease:Cubic.easeInOut}); }
  14. immediateRender doesn't work on second and further repeat cycles of a timeline. Here's the code: var mainTimeline:TimelineMax = new TimelineMax ({repeat:-1, repeatDelay:0.5}); mainTimeline.from (pic_1, 0.4, {y:"-=63", ease:Back.easeOut}) .from (pic_1, 0.4, {alpha:0, ease:Linear.easeNone}, "-=0.4") .from (pic_2, 0.4, {y:"-=63", ease:Back.easeOut}, "-=0.3") .from (pic_2, 0.4, {alpha:0, ease:Linear.easeNone}, "-=0.4") .from ([pic_1, pic_2], 0.4, {colorMatrixFilter:{colorize:0xffcc00, brightness:2}, ease:Linear.easeNone, immediateRender:false});
  15. Hello, is there any method to add some "empty tape" at the end of a timeline. Something like delay at the end.
  16. Respect! With this code I can point not just to mc inside loaded swf, but to the whole thing. Great! Thank You!
  17. Hello, is it possible to animate ColorMatrixFilter from EaselJS directly?
  18. Solved. I used bezierThrough on movieclip and skewed the content. TweenMax.to (_rootRef.logo_01, 1, {bezierThrough:[{x:251, y:247}, {x:305, y:265}, {x:386, y:278}, {x:484, y:282, scaleX:1, scaleY:1}], startAt:{scaleX:0.3, scaleY:0.8}, ease:Quad.easeInOut}); TweenMax.from (_rootRef.logo_01.getChildAt (0), 1, {transformMatrix:{skewY2:40}, ease:Quad.easeInOut}); Wondering, is this the only way?
  19. Hello, is it possible to tween skew and use the bezierThrough plugin at the same time? The following structure doesn't work, just skewing the object: TweenMax.to (_rootRef.logo_01, 1, {transformMatrix:{skewY:30}, bezierThrough:[{x:251, y:247}, {x:305, y:265}, {x:386, y:278}], delay:0.5, ease:Cubic.easeInOut});