How can you disagree with that when you're already experiencing difficulty? That kind of proves my point.
Angular1 has nothing in common with the current version besides the name. But what I was trying to get at is that there's a bunch different ways to create and customize CSS for theming, usually with some type of build process. This isn't directly related to CSS styling, and is more for SVG, but look at how easily an animation can be added to an app. There are similar tools for styling components just like that, but I can't remember the names of them right now.
A component is more of an architecture or pattern. Web Components and Polymer are where you'll find most of the widget stuff.
I'm not a UA developer, so I don't know a lot about the specs, but animating width and height has nothing to do with them. It invalidates the layout, and has to recalculate the size and position of everything and make any necessary adjustments, which can kill your framerate. It's no different than doing a screen resize. This is unlike transforms, which cannot affect other elements or the layout.
Nope. I know how that app works, and it doesn't use a library. Go back to that site, disconnect from the internet, and then refresh the page. It should be working offline. The lag you saw was because it was your first time visiting the page, so a service worker was fired up to install some stuff for offline use.
Well I didn't coin that term. That was done by Paul Lewis over at Google. I learned a different version, called a Relative Animation, which might be a better description, but nobody knows what that is, so I don't use it anymore.
Every animation in GSAP has a start and end value, so there's nothing unusual there. In the Last step is where you would apply or remove any CSS classes/styling. You put the element in it's end state.
The Play step really doesn't apply to GSAP as it will automatically play. That's more for people who have to manually start the animation.
And this is where you get everything wrong. There's a time difference between screen refreshes, typically around 16.67ms, so you won't see it change visually. The invert step is the most important part, and is what pulls everything together, but you're not seeing the big picture yet because you think it can be done with className tweens.
Can you get these two animations working correctly using className tweens?
The video should not jump around when you toggle it. It's using the same CSS and layout from the original demo.
This should animate between a column and row when you hover over it. And yes, there is a way to animate it.
I'll explain more about this in another post.