failure13
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by failure13
-
Hmm intersting, i've come to something like that without plugin which works but i'm not sure it's truly efficient... // list group hover $('.list-group a').hover(function() { TweenMax.to(this, 0.42, {className: '+=hover'}); svgExist = false; svg = $(this).find('svg'); if (svg.length) { svgExist = true; snapAnim = svg.find('*[fill]'); TweenMax.to(snapAnim, 0.42, {'fill': '#FFFFFF'}); console.log('svg animation ' + snapAnim); } }, function() { TweenMax.to(this, 0.35, {className: '-=hover'}); if (svgExist == true) { TweenMax.to(snapAnim, 0.35, {'fill': '#2B2B2B'}); } }); What's the actual benefits of using plugin? I'm just asking to be sure, since we seem to be able to tween dom and all atrrs directly anyway.. The whole problem is that i need to access elements after callback of snap, for the reason there are a loooooot of svgs involved dynamically through angular and i need to minimize callback to just append function, so i could avoid laggy loading of those elements..Anything additional cause delays, especially if you're adding direct tweens And select function doesn't seem to help too much here i guess, for the reason i have different id's on each layer that i probably will animate somehow directly in future, but now i need to access all elements, therefore i thought svg.find('*[fill]') will do..
-
Hey guys, what if i have let's say some complex snap object with multiple paths, polygons, lines etc, and i just want to quickly tint all of their fills with some color and then go back to original? I'm just loading external svgs like that now: var e = element; var s = Snap(e[0]); Snap.load('public/svg/logo.svg', SVGLoaded); function SVGLoaded(data) { s.append(data); }; How would i do such task? It sounds simple, but...i guess something like .find must be involved sadly
-
Well i guess my problem is that when you create dynamically inside directive of angular stuff like: $('button.btn, a.btn, .list-group a, .navbar li a, .nav li, .select .btn').each(function() { var buttonTL = new TimelineLite({paused:true}); buttonTL.to(this, 0.35, {className: '+=hover', immediateRender: true}, 0); this.hoverTween = buttonTL; }); This gets extreeeemly resourse intensive. So the only way is to go hover only, therefore i need to get rid of all :hover, :active, :focus states in Bootrstap. So i ended by multiple cursors of Sublime Text 2. Just find some :hover, press ALT + F3 to select all of them inside file, then press HOME to go on the start of line and write .nojs class, that's it! And in html i got this: <body ng-app="Shop" class="nojs" gsap> ........ <body> js have this directory to let it work on dinamically created parts of angular.js: LavkaModule.directive('gsap', function() { return { link: function(scope, element, attrs) { // all hovers $('button.btn, a.btn, .list-group a, .navbar li a, .nav li, .select .btn, .dropdown-menu li').hover(function() { TweenMax.to(this, 0.25, {className: '+=hover'}); }, function() { TweenMax.to(this, 0.35, {className: '-=hover'}); }); } } }); This way it seems to work pretty good! Hope it will help somebody
-
So guys, anything more specific? I still kinda lost to what aproach to choose, coz it seems pretty slow when i use directories and stuff like that. I hoped that somebody else have already found good way of integrating. Free lesson on egghead doesn't seem to work good / fast enough while loading page...
-
jonathan Hi! Your theory was perfect, and it still works for static, but it seem that with angular .on doesn't work as it should, still no animation for anything that was created dynamically via AngularJS... My programmers said that they get data through angular controllers and then use ng-repeat to call for objects that should be created...To be honest i don't understand how angular works at all carl schooff Yep, i've just found yesterday evening this one: http://www.thinkster.io/angularjs/bTlcxYTO2l/angularjs-animating-with-javascript And this logic doesn't seem to work, i've done this so far: var LavkaModule = angular.module('Shop', ['ngAnimate']); LavkaModule.animation('.list-group a, .navbar li a, .nav li, .select .btn, .dropdown-menu li', function() { return { enter: function(element, done) { TweenMax.to(element, 0.25, {className: '+=hover', onComplete: done}); }, leave: function(element, done) { TweenMax.to(element, 0.35, {className: '-=hover', onComplete: done}); } } }); Maybe you could see something that i miss? P.S. Oh and i haven't forgot to include angular.min.js and angular-animate.min.js, just in case
-
http://codepen.io/failure13/pen/ziFJK Well something like that! Idea is just to do some parameter with separate tween settings, like for example i want this color: #FFFFFF; to animate later and with longer duration than everything else from +=hover
-
Solution about eases works perfectly, very flexible! One thing i'm not certain about progress: 1 and progress: 0 controls TimelineLite,s progress or TweenLite's? Well, about htis it ain't seem to be that simple, coz when i do this 2nd tween with color:'red' doesn't seem to override 1st, and it do immideately color of 1st... Any ideas?
-
Well, i mean something like... We have angular now working like it loads templates of code and then start to draw them, so before that happens they're not in dom, and any tween that was created for object inside that dinamycally created template won't work, right now i put my tweens like that: $(document).ready(function() { $('button.btn, a.btn, .list-group a, .navbar li a, .nav li, .select .btn').each(function() { var buttonTL = new TimelineLite({paused:true}); buttonTL.to(this, 0.35, {className: '+=hover', immediateRender: true}, 0); this.hoverTween = buttonTL; }); $('button.btn, a.btn, .list-group a, .navbar li a, .nav li, .select .btn').hover(function() { this.hoverTween.play(); console.log(this.hoverTween); }, function() { this.hoverTween.reverse(); }); }); But i guess .ready is not the case, i'm really not sure about angular yet, just started to work with it, maybe it have something native to let GSAP work? P.S. Objects that wasn't created dynamicaly are tweening fine, since they're in DOM from start.
-
Well, simple as that... How to work with angular efficently? How to make tweens for something that haven't been shown on page yet and will be loaded dynamically later?
-
Oh, that's exactly what was needed to fire, with immideateRender it works like charm! Thanks! Well, also for example if i want some custom ease or animation speed for hover out, can i pass it somehow through .reverse()? And also, for example if i have some button with a lot of CSS and i animate it whole like now with +=hover, how would i properly animate some single parameter separately with some totally different animation parameteres, like for example button text color? Should i just precreate some tween for this parameter only?
-
jamiejefferson Wait, now this is very interesting, but i don't understand how to do this about className, could you make a simple example please? Now i try this: // button hover $('button.btn, a.btn').each(function() { var buttonTL = new TimelineLite({paused:true}); buttonTL.to(this, 0.95, {className: '+=hover'}, 0); this.hoverTween = buttonTL; }); $('button.btn, a.btn').hover(function() { this.hoverTween.play(); }, function() { this.hoverTween.reverse(); }); And it still have those issues with blue at first
-
jamiejefferson Haven't worked with LESS yet, you meant like here http://getbootstrap.com/customize/ How would i remove all hovers at once? They seem to have only colors, not whole rules.. Right now they have 133 hover rules, which is pretty massive.. Not sure i understood what you've meant here exactly, but sounds technically same, no? About immideate render, i'd need to precreate them outside of hover function scope? Will it force pseudo-elements to shut up? O_o P.S. I've found this hardcore solution http://stackoverflow.com/a/19787258 doesn't seem to work (i haven't forgot to include underscore.js), but i really like the concept, any idea how it could be implemented as working solution?
-
jonathan Yep, that would be cool solution, but project is big and i have a lot of elements with very different css rules, some have box-shadows, some radius, some borders etc.. Therefore, for example if i call things like .btn or a, i would ideally love to use className on such unified elements to call different rules, that's exactly why className was born i guess.. I thought maybe of something like function that would get all minimum necessary parameters from this, and then if they exist - animate them one by one with usual tween, as you said for backgroundColor example. But something tells me this ain't right and not very fast.. P.S. I haven't know about !important, nice that you've mentioned, could save some time!)) But for my case it's not very elegant, too many rules i'd have to override with !important
-
Long time ago Jamie answered me some interesting solutiion for CSS plugin: http://forums.greensock.com/topic/7752-just-started-cant-get-it-to-work-at-all/?view=findpost&p=29850 But now i have to work with Bootstrap 3 framework, so it has of course it's own default CSS, and then i customize it with my own css, and leave default untouched. So for example in default Bootstrap .btn-primary have blue background, and i changed it for red, and then animated this button with TweenMax and body .nojs trick, like Jamie teached: MY CSS: .btn-primary.hover, .nojs .btn-primary:hover { background: #A21D20; border: 1px solid rgba(162,39,32,0.3); } JS: // allow class animation $(document.body).removeClass('nojs'); // button hover $('button.btn, a.btn').hover(function() { var span = $(this).find('span'); var rset = span[0].rset; TweenMax.to(this, 0.35, {className:'+=hover'}); for(var i = 0; i < rset.length; i++) { TweenMax.to(rset[i], 0.35, {raphael:{fill: lavkaRed}}); } }, function() { var span = $(this).find('span'); var rset = span[0].rset; TweenMax.to(this, 0.3, {className:'-=hover'}); for(var i = 0; i < rset.length; i++) { TweenMax.to(rset[i], 0.3, {raphael:{fill: '#2b2b2b'}}); } }); I got is at first when hover in i got very fast blink of blue, and then it animates red like usual. Of course it's obvious why it happens, coz i haven't and absolutely don't want to change default Bootstrap 3 CSS to add .nojs before all :hover s everywhere, it's just very bad practice in my case i guess.. Do you guys see any other ways it could be done right and easy?
-
jamiejefferson Oh...That explains, thank you! rhernando And this is pretty elegant solution for saving colors!
-
I've found that such code creates jumpy effect before tween, i mean like if there was no fill at all, and than in fades from nothing to color for both hover-in and hover-out: http://codepen.io/failure13/pen/xcLuf If i use span[0].rset[0] to go directly for first raphael layer, it do job fine, fades from current color to desired... Any ideas of how to avoid such effect with whole rset? And also if anybody knows good way to tint multilayer raphael object with some color easy and fast, and than fade back to original colors - it would be super-cool
-
Yes, you guessed exactly right Jamie! And rset if i'm correct is shortcut for raphael.set, you've teached me tricks like that in the past to create sets that can be modified with GSAP later: // minimum vector size var seedOfLife = 48; // core svg draw function function flowerOfLife(e, circle) { var svg = []; svg['w'] = e.width(); svg['h'] = e.height(); svg['coef'] = svg['w'] / seedOfLife; if (circle == true) { svg['cc'] = seedOfLife * 0.5; svg['cr'] = svg['cc'] - 3; } return svg; }; $('.iLogout').each(function() { var svg = flowerOfLife($(this)); var paper = Raphael(this, svg['w'], svg['h']); paper.setStart(); paper.path('M 29 9.7 L 29 15 C 30.4 15.7 31.7 16.5 32.8 17.7 C 35.2 20 36.5 23.2 36.5 26.5 C 36.5 29.8 35.2 33 32.8 35.3 C 30.5 37.7 27.3 39 24 39 C 20.7 39 17.5 37.7 15.2 35.3 C 12.8 33 11.5 29.8 11.5 26.5 C 11.5 23.2 12.8 20 15.2 17.7 C 16.3 16.5 17.6 15.7 19 15 L 19 9.7 C 11.8 11.9 6.5 18.6 6.5 26.5 C 6.5 36.2 14.3 44 24 44 C 33.7 44 41.5 36.2 41.5 26.5 C 41.5 18.6 36.2 11.9 29 9.7 L 29 9.7Z M 21.5 4 L 26.5 4 L 26.5 24 L 21.5 24 L 21.5 4Z') .attr({'fill':'#4d4d4d','stroke':'none'}); this.rset = paper.setFinish(); this.rset.transform('s'+ svg['coef'] +','+ svg['coef'] +',0,0'); }); Again, sorry for not stricktly GSAP question, but it's all connected, and not obvious, so i think i could help anyone later anyway!
-
Let's say i have code like: <div class="btn-group"> <button type="button" class="btn btn-link btn-sm btn-avatar dropdown-toggle" data-toggle="dropdown"> <img src="http://placehold.it/30x30" alt="30x30" class="img-circle"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#" class="dropdown-header">Name</a></li> <li><a href="#"><span class="svg24 iSettings"></span> Settings</a></li> <li><a href="#"><span class="svg24 iMessage"></span> Messages <span class="badge">9</span></a></li> <li><a href="#"><span class="svg24 iHelp"></span> Help</a></li> <li class="divider"></li> <li><a href="#"><span class="svg24 iLogout"></span> Logout</a></li> </ul> </div> // dropdown hover $('.dropdown-menu li a span').hover(function() { TweenMax.to(this, 0.35, {className:'+=hover'}); TweenMax.to(this.rset, 0.35, {raphael:{fill: '#FC6608'}}); }, function() { TweenMax.to(this, 0.3, {className:'-=hover'}); TweenMax.to(this.rset, 0.3, {raphael:{fill: '#2b2b2b'}}); }); But what if i want to hover li itself, and then trigger rset animation of it's children or some other div at all, like for example in this case i would think of something like $(a span).this.rset but it doesn't work. How should i talk with raphael through GSAP in such case?
-
Totally agree, i used it just as small example, but of course this should be used for something lot heavier. So, a lot of manual work it seems... Thx for answer!
-
Also i wanted to know if it possible with gsap easy way, for example Bootstrap 3 have some CSS transitions in thumbnail calss: .thumbnail { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } Which makes some cool thing, it seem to react on any change, for example if you resize borwser it will smoothly react on div position change, or if you have 0 border radius and 10 on hover, it will slowly fade from 0 to 10. Would love to know if such concept of reaction can be achieved via GSAP
-
Answer is certainly no So basicly, as i understood, idea behind this plugin is that you just include it and than it immediately override usual jQuery methods and functionality, but you still work with it in usual jQuery animate methods? Very cool, thank you!
-
Questiuon is as simple, as it gets complex i guess... Is there any simple and effective way to completely rewrite Bootstrap 3 default very slow and sluggy jQuery + CSS3 animation for super-awesome and fast GSAP? Well, at least core stuff like sliders, collapse, tabs... Maybe somebody have done it already?
-
I'm on Win7 x64 And well, thing is i need those prefixes, for old crapbrowsers
-
Yep, new one works as it should, but it still doesn't eliminate the problem of how many previous versions could have this effect... Only addon that i use is adblock plus, but it's not cause.. I really want to know exact cause of this effect, coz i want my stuff to work properly for as many browsers as it possible! )
-
I use Firefox 25, just checked other browsers and weirdly enough it works as intended in IE10 and Latest Chrome... Hmm, looks like it's strictly Firefox problem. The problem itself is well... In theory on hover it should just change shadow color and add second shadow of 12px and it does, but then it actually fade shadow from 0 to 3px width on rollout. Probably it's because i use double-shadow on hover state, but at normal state i use single?
