determin1st

Sorry, but you broke your hand. You missed the specifi.. cascade rules. It was not really a className* task, but, anyway I added it. Check the CSS: These are only words. Why not bring any diff example here? Something, that adds wight to "completely different". ...just checked Angular2 "quick start"... it got even worse Why you look at fancy pictures.. it's a propaganda. That's what I was talking about. They won't make any complex widget with this. (can) you can decide yourself what is what.(?) You broke an example - not a big deal. The idea of this flip-flop video widget is good. You may try to make it unbreakable yourself. If you think you can, let's discuss interface (not banner) building in telegram (@determin1st), it's faster. I'm also interested in widget building.

No noo, I fixed it already. Now It proves only the difficulty on your side. Do you really think that making first statement to look un-appealable will make it so? If it has nothing in common, then why they name it Angular2,3,4,.. I'm okay with text editor and keyboard, it's not mind-shifting (video) to me. Sure, it's better to keep style settings in JS object to reuse it later, i agree. You don't remember tool names because they are not necessary, imo. Architecture.. nice word. I've seen somewhere in React (probably) docs, that component is a function. What the heck do I need that if i can write one-liner declaration right here? MyComponent - is a data structure bound with logic which translates itself to multiple visual representations, handles its own internal states and has some api to control. Something, ready to use, like GSAP. Let's open https://www.webcomponents.org/ first thing there is now 'date-picker', okay, opening.. where is the styling? how to make it look not default way (change color/font/itemSize/..). Where is codepen/fiddle/.. easy-access examples? This is not satisfactory for reusable widget at all. To get it up, first you need to read tons of docs and after that you will realize if it fits your needs (it usually does not). Let it go... Nice. https://csstriggers.com/ represent an accordion widget - a list of content panels. my lib is also a single-request thing and it will work faster.. Catch!

I cant take your advice, because I disagree with the first sentence. I really want to animate transitions, between visual states of the element or group of elements. Well, yea, looked. Almost completed the angular1 guide (where you build phone-store). Not excited. Maybe missed something or maybe got the idea. CSS looks like JSON.. which looks like JS object definition.. so, imo, it's only matters where it is. Is it merged with code? In one place or mixed in with everything else? I just don't get what you are trying to say.. Nice pic. That is happening when they try to build something great on the unsteady ground. Violate separation of concerns principle once, and, forget about any complex+reusable widget creation. What is left.. talking about "components" and stuff. I'm not scared. It's not under our control - it is a browser area and a browser job (to change width/height following holy CSS spec). Look at the item select animation (https://csstriggers.com/) - it lags at the start (firefox shows it better). I open no code, looking at the address /height gives a hint - that's the React/Vue/Angular.. type of lib. Maybe. CSS syntax allows transitions, right? Given that we are talking about the interface animation (each state means something) and not the banner (static info, single flash+wow) animation.. Let me interpret your word "FLIP": First/Last. You just described code logic in the className handler, lookup it yourself, it does these two things. Invert. Is not necessary. Because, there is only one, current visual state (what you see now) of the element in the interface. Don't waste time, use Play. Play. Adding or Removing of css class may mean inverting to previous visual state. Okay, let's talk about your interpretation of FLIP. I see, that the APP is holding effect parameters but not the effect data. It is good - separation. The bad thing, I can't grasp how it works. Maybe videoModifier is an event handler or maybe... Compare: var video = document.querySelector("#video"); var flipOn = [ { className: '<minimized', duration: 0.5, ease: Sine.easeOut } ]; var flipOff = [ { className: '>minimized', duration: 0.4, ease: Sine.easeIn } ]; function videoModifier(state) { someGSAPabstrationLib.queue((state ? flipOn : flipOff), video).play(); } Logic is observable, data is separated, right? Interesting, but I don't know if it is good. Can you reduce the example to see it clearer. Maybe I would be able (I'm sure for now) to reproduce it using only className.

I've made some modification to className, take a look: It works through document.styleSheets interface to get the original css props... Benefits: + might be faster as it doesn't compare all the computed style props, but only those, which are going to change. + super flexible Losses: - requires new browsers - more size Here is line of change: https://github.com/determin1st/redsock/blob/b3f5996839665dc42b0f6af3e33a4ace772c4385/TweenMax.js#L5004 I didn't fully tested it, just an example of what can be done.

Oh, I just realized I was wrong. There is no interface to get "raw" value of the style (it was in IE6 - currentStyle) and compare.. Anyway, digged into GSAP-related code little more

GSAP is a filter between your app and the browser. Only the browser implements CSS specs. So, you can read that spec and make it "right" or "wrong" or "weird". In that example, suppose, className is handled directly (without GSAP conforming to box-sizing and adding more style props to the counter) the result of animation would be "right". Im okay that className implements this way, but it lacks an option, imo. 1) will cause css class combination problems (if it's not a "forever" value) 2) not smooth, discrete animation.. not GSAP way, right? 4) look at this, same trap: I just added padding animation to the element and removed any paddings from container (to see problem better), now, it "blinks" at the right border, because of width prop which is taken by GSAP following the holy CSS spec. Now, put back border-box and width=100% == no problem. 3) checkout what you can do with the CSS classes put in right order: The animation function is not changed. only CSS rules. that flexibility is not reachable by manual tween setup. As I see it, reusable widget/control must use cascading style powers. Hello, Yes, Thanks a lot. Sure, it rules.. but you see, every king have vassals... i didn't see any around.. Hey, how then, this happens: Apply your logic to manual tween setting... it doesn't work. There is not much work to fix that, i believe: Okay, but transforms are horrible in CSS definition (GSAP is much better at defining them). Also, i don't know for now, how scaling will react on window resize, how children of the scaled container should be handled.. etc. Maybe it's a way, didn't dig into it...

Hello, but I still don't agree with GSAP realization of this particular algorithm. There should be an option to turn it off as it may be not the only way - I calculate absolute heights including padding&border myself ( trying to make jquery-like UI lib, writing accordion widget now, here is the demo: https://rawgit.com/determin1st/cis/accordion/index.html ) I don't think I can't use "box-sizing: content-box" as there, i see, one huge loss -> if padding is set on the child element in the container, relative values stop working (height/width: 100%) and everything should be re-made re-calculated for this new (actually, old) model (content-box). Now I use !important which is only covers inline style during animation, yes, i understand that. Take a look at this small change: Sure, if you need to *flash* user with particular effect, and repeat or remove it afterwards - transforms are better. But not for interface objects, right? That's why I use className, because of potential of easy styling/theming. You can change CSS only, no JS code rewrite - same code, many visual representations/effects. So I put those settings as a conditions where the trap is. If you help me and this lib will become popular, GSAP will rule forever 8)

yes, thanks, I set it to !important and it works, but there would be more collisions in future. I disagree with the @Acccent statements

Hello, I have some unexpected (for me) behavior while sizing elements, here is the pen: As you see, red box is not synced with blue while animation runs (after clicking). It happens because the height of the container is animated, but it is not supposed to be, as the .clicked (container css class) doesn't contain height property. Can you explain please, how to animate only properties defined in target class?

Hello, see, here (in the Pen) it goes GRAY and then goes to WHITE. I suppose, I have to use RGBA() start color and not HEX/RGB/HSL to fade it normally (avoid gray), right?

Oke, thanks Jack. I will try to implement RGBA. Im using className to have more control over styles (no change of code, separate concern), so its not a option for me. Color animation looks like: .default {background-color: #123456;} to .faded {background-color: transparent;} what is the best values for these you think? (to fade only transparency, not actual color, because as i noted it goes GRAY and *flashes* at some point) Optimisation, yes yes, have a lot of questions about... but not yet come to a question...

I'm using 'className' to animate background-color from HEX value to TRANSPARENT. but it goes GRAY at some point. Is there any solution to this? Should I use HSL or RGBA color? Im also traped with LESSCSS, it coverts HSL to HEX value(( oh, too late now, need to sleep, kek.

I've updated the example.. Now it should be readable, sorry. here, I mean combined effect is several individual effects nested in temporary timeline. temporary, because it may change on conditions. i can't post those conditions here (trying to create widget "accordion", it's all in LS and lot of code). individual effects are created because hover effect run faster this way (instead of all group refreshing hover state - which is also needed)... well, i dont know how to explain clearer for now

Here, after the combined effect played, individual timelines dont play any more. The combined timeline is always temporary because combined effect may be composed with different items (some of them may not be visible or be disabled, so they are included by condition)..

Hello, Is there a way to remove timeline nesting? I have timelines which may play separately, but when they are nested to some combined effect, they dont .play anymore. One way I found to do this is to create another nesting, but this is too much imo.

Hello, Do you think if it would be useful to add onPause/onStop event callback? So the state of timeline could be obtained more convenient way? Or maybe I miss something? States: - never played - playing - paused/stopped/killed but not completed - paused/stopped/killed and completed

What if I dont have a main timeline and have only specific timeline (which was nested to the main), Is there a way to de-parent it (to play it alone)? Im creating multiple "static" effect timelines, but the main is "dynamic" .... oh, i found solution for myself. to reuse a prepared, paused timeline which was nested, the only thing to do is to re-nest it in a newly created timeline..

ops. i had an error in my code. improper init. it (bound function) works, thank you.

It's not odd. It (the .add() method) just dont allows to pass function scope. In my work I have a pre-defined objects with data like: show: [ { duration: 0, tween: { visibility: 'visible', scale: 0 } }, { duration: 0.8, tween: { scale: 1, ease: Back.easeOut } }, function(){ debugger; this.cfg.data.menu.addClass('attached'); } ], then, in another place, I create timeline using that data: c = new TimelineLite({ paused: true }); this.cfg.show && this.cfg.show.forEach(function(a){ var b; if (a.tween) { b = w3ui.CLONE(a.tween);// have to clone, because GSAP modifies original :| c.to(node, a.duration, b); } else { c.add(a);// bound functions dont work here } });

I cant run my function with selected scope if I use TimelineLite .add() method. It (the .add() method at GSAP) could be modified to check if that function had .scope property and pass it further.. that's what I meant. It's a one-line change. In GSAP source code, it does: ... } else if (typeof(value) === "function") { value = TweenLite.delayedCall(0, value); } else { ... and could be: ... } else if (typeof(value) === "function") { value = TweenLite.delayedCall(0, value, value.params, value.scope); } else { ...

It's a pity, that TimelineLite doesn't respect function scope in .add() method. For example, if I create bound function and pass it to the Timeline, the scope changes to the timeline's: f = someFunction.bind(someScope); timeline.add(f); .add() could check if a scope is already set as a function property and pass it further? like: someFunction.scope = someScope; timeline.add(someFunction); It could work, why not 8)

finally made that menu interface with the power of GSAP animation 8) https://rawgit.com/determin1st/cis/master/view/index.html I think there are some problems with flexbox + className animation - it doesnt respect flex-direction and changes both width and height, but maybe I dont do it right.. another thing is that timeline doesnt pause automatically when reaches the end. but those are avoidable.

Yes, thanks. I will try another approach.

I would like slide.two to turn blue only at the very end of main timeline (before slide.one=red, slide.zero=green). Call order could be: blue -> red -> green There might be logic in parent onComplete, but when i call parent's .play(), it still fires child onComplete regardless to second parameter (supressEvents=true).

I've forked your pen to explain more what i mean..