Search the Community
Showing results for 'page transition' in content posted in GSAP.
Found 654 results
-
clearProps has its uses but is by no means required. In general if I'm doing a 3D transform that finishes on a 'non-transformed' state (i.e. rotation,x,y etc are all 0) then I usually prefer to clearProps, but that's just me. You can also target specific properties to clear so you can remove some/leave some e.g. // removes transform, but foo is still red TweenLite.to(foo, 1, {rotation:0, background:'red', clearProps:'transform'}); Performance wise, I suppose the clearProps will probably cause a repaint, but on the other hand removing transforms should remove the need for a GPU layer (assuming the browser used one) which is probably a good thing too (it's really hard to quantify performance - it really depends on how the site is sturctured, what browser and hardware etc). Also I guess it depends on if you plan to tween the element further or if it's just going to remain static for the life of the page. If it's something to be tweened a lot, the clearProps probably doesn't have much benefit. ---- As for the click stuff, its because you have existing tweens to the active class that aren't being cleared by removeClass i.e the tween completes and adds .active after the click. The hover class can also interfere here. Try this: // menu active var links = $('#menu li a').click(function(e) { // link goes nowhere in codepen e.preventDefault(); // leave 'this' out so it can have a direct transition var others = links.not(this); // kill active '+=hover' and '+=active' tweens TweenLite.killTweensOf(others, true); // clear classes and leftover, in-progress styles TweenLite.set(others.removeClass('active hover'), {clearProps:'all'}); // set single link to active TweenLite.to(this, 0.3, {className:'+=active'}); });
-
Hey there, I've inherited someone else's code at work. They use your plugin and I gotta say, it's very cool. There's still some stuff I can't figure out though... I need to replace an animation that uses the "left" property to a css transition to make it more smooth, but i can't figure out the syntax... (Just to give you some context, the site has a full height menu on the left. When your cursor goes on top of it, the contents of the page shifts to the left with the menu, but the timing isn't the same so we get an overlapping animated effect) defineOpenCloseAnimation: function() { var e = this, n = e.$el.width(); e.openCloseAnimation = TweenMax.fromTo(e.$el, .500, { left: -1 * n }, { left: 0, paused: !0, ease: Quart.easeOut }), $body = $("body"), e.openCloseBodyAnimation = TweenMax.fromTo($body, 0.8, { left: 0, ease: Quint.easeInOut }, { left: n, paused: !0, ease: Quart.easeInOut }) } Thanks!
-
I've tried all possible combinations of gpu-triggers (in CSS classes, from TweenMax.set, inside the Tween options...) - like those you suggest and other tricks (setting perspective, hiding backface visibility etc.). In my setup clearly the gpu is kicking in (the difference would otherwise be huge). Plain CSS3 transitions are noticeably smoother in some cases (esp. visible in relatively long-range translations of large elements - like in the above example). From what I can tell there is a connection between number of updates performed by GSAP and the smoothness of the result - which lead me to the conclusion that either frequent updates of DOM style attributes have a non-trivial negative performance impact on Android or simply the browser is optimized for fire-and-forget CSS3 transitions and it reacts a bit slower when it has to apply css property changes in rapid sequence. Other than that GSAP works well in many other scenarios also on Android - and even the page translation animation is not that bad after all. But the plain CSS3 transition is smoother and more fluid.
-
Hi all! I want to make animation as here http://css-tricks.co...ples/Circulate/, the bottom of the page, the flying balls. But nothing happens. Tried Bezierplugin saddled with, but in the end there is a sharp transition is not smooth. Maybe someone knows how to do, tell me please. Here's an example of my code var maxx = new TimelineMax({repeat:-1,delay:1}); maxx.to($('.b-circul1'), 1, {css:{x:400,y:20,scale:0.5},ease:Linear.easeNone}); maxx.to($('.b-circul1'), 1, {css:{x:800,y:0,scale:1},ease:Linear.easeNone}); maxx.to($('.b-circul1'), 1, {css:{x:400,y:-20,scale:1.5},ease:Linear.easeNone}); maxx.to($('.b-circul1'), 1, {css:{x:0,y:0,scale:1},ease:Linear.easeNone});
