Jump to content
GreenSock

determin1st

Element sizing with className & height:auto

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I have some unexpected (for me) behavior while sizing elements, here is the pen:

See the Pen PQeVoY?editors=0110 by determin1st (@determin1st) on CodePen

 

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?

 

 

 

Link to comment
Share on other sites

This happens because you are changing the padding, so GSAP animates the element to its new padding based on the size of the inner box before it started animating. If you remove the padding rules from the CSS, you'll see that the container box animates adequately. If you'd still like to keep the padding, I guess you could specify the height either with CSS or JS, maybe by calculating it on the fly?

  • Like 4
Link to comment
Share on other sites

Ya @Acccent is right about padding being animated and causing the problem. But I was wondering why that should happen? It is happening because you are using box-sizing as border-box so changing padding changes height and width of your box element. You can stop using border-box.

 

Or you can set the parent element's height to auto !important.

 

See the Pen qodqOW?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 5
Link to comment
Share on other sites

1 hour ago, Sahil said:

Ya @Acccent is right about padding being animated and causing the problem. But I was wondering why that should happen? It is happening because you are using box-sizing as border-box so changing padding changes height and width of your box element. You can stop using border-box.

 

Or you can set the parent element's height to auto !important.

 

 

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

 

 

  • Like 1
Link to comment
Share on other sites

2 hours ago, determin1st said:

I disagree with the @Acccent statements;-)

 

UnfinishedNiftyGull-size_restricted.gif

  • Haha 5
Link to comment
Share on other sites

Hello @determin1st and Welcome to the GreenSock forum!

 

I would have to agree with @Acccent regarding height, padding and box-sizing. The box-sizing property takes into account the CSS Box Model. You can see in the CSS Spec for height that when you use box-sizing: border-box that the height calculation of the browser will include the height of the borders.

 

CSS height spec:  https://drafts.csswg.org/css-box-3/#the-width-and-height-properties

 

You also have to take into consideration CSS inheritance,  and the fact that anytime you change padding it will affect the height of the parent containing element even without using box-sizing.

 

But you can get around this by:

  1. using box-sizing: content-box for div instead of border-box. No need to remove or stop using box-sizing.
  2. remove or don't use the !important declaration on the height: auto property for .box selector. !important should only be used as a last resort.

See the Pen geaVwq by jonathan (@jonathan) on CodePen

 

Just keep in mind that anytime you animate margin, padding, width, height, and border the animation wont be as smooth as animating transforms and opacity. Since anything animated that is not transforms or opacity will cause layout to re-triggered causing jank (lost frames) due to how CSS is rendered.


See Jack's @GreenSock article on this:

 

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

See CSS Triggers:

 

https://csstriggers.com/

 

Also you should set the duration to a lower number. 10 seconds will be a really slow animation, and look like its either broke or nothing is happening. Setting i the duration to something like 1 second or 0.5 second like @Sahil did in his codepen will make it animate better.

 

For full control sometimes its better to just use a fromTo() tween instead of animating classes using className.

 

GSAP fromTo(): https://greensock.com/docs/TimelineMax/fromTo()

 

Happy Tweening! :)

  • Like 7
Link to comment
Share on other sites

On 13.03.2018 at 5:48 PM, Jonathan said:

I would have to agree with @Acccent regarding height, padding and box-sizing. The box-sizing property takes into account the CSS Box Model. You can see in the CSS Spec for height that when you use box-sizing: border-box that the height calculation of the browser will include the height of the borders.

 

CSS height spec:  https://drafts.csswg.org/css-box-3/#the-width-and-height-properties

 

You also have to take into consideration CSS inheritance,  and the fact that anytime you change padding it will affect the height of the parent containing element even without using box-sizing.

 

 

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 )

 

 

On 13.03.2018 at 5:48 PM, Jonathan said:

..you can get around this by:

  1. using box-sizing: content-box for div instead of border-box. No need to remove or stop using box-sizing.
  2. remove or don't use the !important declaration on the height: auto property for .box selector. !important should only be used as a last resort.

 

 

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:

See the Pen NYNpKe?editors=0110 by determin1st (@determin1st) on CodePen

 

 

 

 

On 13.03.2018 at 5:48 PM, Jonathan said:

Just keep in mind that anytime you animate margin, padding, width, height, and border the animation wont be as smooth as animating transforms and opacity. Since anything animated that is not transforms or opacity will cause layout to re-triggered causing jank (lost frames) due to how CSS is rendered.


See Jack's @GreenSock article on this:

 

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

See CSS Triggers:

 

https://csstriggers.com/

 

Also you should set the duration to a lower number. 10 seconds will be a really slow animation, and look like its either broke or nothing is happening. Setting i the duration to something like 1 second or 0.5 second like @Sahil did in his codepen will make it animate better.

 

For full control sometimes its better to just use a fromTo() tween instead of animating classes using className.

 

GSAP fromTo(): https://greensock.com/docs/TimelineMax/fromTo()

 

Happy Tweening! :)

 

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)

 

 

 

Link to comment
Share on other sites

Quote

Hello, but I still don't agree with GSAP realization of this particular algorithm.

 

It's not really a GSAP problem, when you animate elements using className, GSAP animates whatever the difference those class create. In your case, you have box-sizing as border-box, which when you change padding causes the height to change. So in order to animate class GSAP MUST animate height, which gives your parent element inline height. So when your child element animates, parent element has it's own height instead of auto height, so it won't animate along with the child element. When animation completes, GSAP like usual will remove inline styles set while animating class which causes the jump.

 

If you put together many such different classes that affect each other or parent and child in MANY different ways then you will see such weird behavior and GSAP can't put logic in the place to address such out of control situations.

 

What you can do is,

 

1. force height auto by using !important

2. First change padding of parent element and only then animate height of child element.

3. Manually animate height of parent and when animation completes, set height back to auto.

4. Use content box as @Jonathan suggested and as you are using flexbox you don't need to set width 100%, element will set itself to 100% inside the parent.

 

See the Pen vRGvvz?editors=0110 by Sahil89 (@Sahil89) on CodePen

 

  • Like 7
Link to comment
Share on other sites

Hi again @determin1st ..
 

3 hours ago, determin1st said:

If you help me and this lib will become popular, GSAP will rule forever 8)

 

#1 We are helping you...

#2 GSAP is already popular and does rule forever :)

 

3 hours ago, determin1st said:

but I still don't agree with GSAP realization of this particular algorithm.

 

This isn't a GSAP algorithm thing :blink:. GSAP can only use what CSS property values are reported and computed by the browser, based on how you have your HTML and CSS setup. Like i said above this has to do with the CSS Spec on how height is calculated with box-sizing. As well as how the CSS box-model works. That is the nature of CSS, animating padding will affect height of its parent regardless if box-sizing is used or not ;)

 

Animating anything but transforms and opacity will cause jank (lost frames). Transforms and opacity do not cause a repaint and layout to be recalculated on every render tick frame.

 

3 hours ago, determin1st said:

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?

 

Transforms are also better for interface object, since they can animate on a sub-pixel level for silky smooth motion. Whereas padding and other non transform and opacity properties can only animate on a pixel level. And non transform or opacity CSS properties cant take advantage of hardware acceleration (the GPU) for smoother animation. You could take advantage of using transform scale instead of padding. We can only offer advise and solutions, but in the end its up to you.

 

Happy Tweening! :)

  • Like 7
Link to comment
Share on other sites

4 hours ago, Sahil said:

 

It's not really a GSAP problem, when you animate elements using className, GSAP animates whatever the difference those class create. In your case, you have box-sizing as border-box, which when you change padding causes the height to change. So in order to animate class GSAP MUST animate height, which gives your parent element inline height. So when your child element animates, parent element has it's own height instead of auto height, so it won't animate along with the child element. When animation completes, GSAP like usual will remove inline styles set while animating class which causes the jump.

 

If you put together many such different classes that affect each other or parent and child in MANY different ways then you will see such weird behavior and GSAP can't put logic in the place to address such out of control situations.

 

What you can do is,

 

1. force height auto by using !important

2. First change padding of parent element and only then animate height of child element.

3. Manually animate height of parent and when animation completes, set height back to auto.

4. Use content box as @Jonathan suggested and as you are using flexbox you don't need to set width 100%, element will set itself to 100% inside the parent.

 

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:

See the Pen mxPYwZ by determin1st (@determin1st) on CodePen

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:

See the Pen JLKXjM by determin1st (@determin1st) on CodePen

 

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.

 

 

4 hours ago, Jonathan said:

Hi again @determin1st ..
 

 

#1 We are helping you...

#2 GSAP is already popular and does rule forever :)

 

 

 

Hello, Yes, Thanks a lot.

Sure, it rules.. but you see, every king have vassals:-)... i didn't see any around..:-(

 

5 hours ago, Jonathan said:

 

This isn't a GSAP algorithm thing :blink:. GSAP can only use what CSS property values are reported and computed by the browser, based on how you have your HTML and CSS setup. Like i said above this has to do with the CSS Spec on how height is calculated with box-sizing. As well as how the CSS box-model works. That is the nature of CSS, animating padding will affect height of its parent regardless if box-sizing is used or not ;)

 

 

Hey, how then, this happens:

See the Pen RMRPOw?editors=0110 by determin1st (@determin1st) on CodePen

 

Apply your logic to manual tween setting... it doesn't work. There is not much work to fix that, i believe:

 

111111111111.thumb.jpg.697cb7f12e90df11472b103b1e55e328.jpg

 

5 hours ago, Jonathan said:

 

Animating anything but transforms and opacity will cause jank (lost frames). Transforms and opacity do not cause a repaint and layout to be recalculated on every render tick frame.

 

 

Transforms are also better for interface object, since they can animate on a sub-pixel level for silky smooth motion. Whereas padding and other non transform and opacity properties can only animate on a pixel level. And non transform or opacity CSS properties cant take advantage of hardware acceleration (the GPU) for smoother animation. You could take advantage of using transform scale instead of padding. We can only offer advise and solutions, but in the end its up to you.

 

Happy Tweening! :)

 

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...

 

 

 

 

Link to comment
Share on other sites

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 :P

 

 

Link to comment
Share on other sites

I've made some modification to className, take a look:

 

See the Pen YaZxXb?editors=0110 by determin1st (@determin1st) on CodePen

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.

 

 

 

 

Link to comment
Share on other sites

Trying to build a complicated UI library using only className tweens will be difficult. My advice would be to avoid them. They're really not that useful, and can cause all sorts of problems if you're not careful. If you really want to animate classes, then you should use CSS.

 

 

On 3/15/2018 at 4:13 AM, determin1st said:

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.

 

You might want to look into how modern frameworks like React, Vue, and Angular use css, or the lack thereof. CSS in JavaScript is pretty common nowadays, making CSS files completely optional.

 

 

On 3/15/2018 at 4:13 AM, determin1st said:

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.

 

 

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?

 

 

Animating properties like height and padding aren't any better. Look at what animating height triggers.

https://csstriggers.com/height

 

The browser spends a lot of time rendering a nice looking web page for you, and then on every animation frame you come along and destroy it. That makes the browser sad.  ?

 

giphy.gif

 

 

To make the browser happy you'll need to leverage transforms. Instead of changing the width or height on every animation frame, you can reduce it down to 3 layouts/reflows using a technique called FLIP.

  • First - Record the initial state of your element, like its position and dimensions.
  • Last - Move your element into its final state, and record those values.
  • Invert - Now move your element back to where it came from. You now know all the values that will be needed for a transform based animation.
  • Play - Play the animation. The browser will go back to being happy again.

 

 

I came across a couple FLIP animations that I though were pretty neat, and wanted to make them with GSAP. What I ended up with was the start of what could be a nice library for doing FLIP animations with GSAP.

 

It's pretty easy. Just pass in the elements you want to animate, a modifier function, and some animation options. The modifier function is just a function that will change the element in someway, like toggling a class, or moving it somewhere else in the DOM.

 

var video = document.querySelector("#video");

Flipper.flip(video, videoModifier, {
  duration: 0.5,
  ease: Sine.easeInOut
});

function videoModifier() {
  video.classList.toggle("minimized");
}

 

 

 

There are no width or height animations in this demo. It's all done with scaling. I'm making use of the new ExpoScaleEase for counter-scaling.

 

See the Pen ebbeaf989d7648cbbfc9932e446df5b6 by osublake (@osublake) on CodePen

 

 

Good idea? This is something I might be interested in making into a library if there's demand for it. 

 

 

  • Like 7
Link to comment
Share on other sites

3 hours ago, OSUblake said:

Trying to build a complicated UI library using only className tweens will be difficult. My advice would be to avoid them. They're really not that useful, and can cause all sorts of problems if you're not careful. If you really want to animate classes, then you should use CSS.

 

 

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.

 

3 hours ago, OSUblake said:

You might want to look into how modern frameworks like React, Vue, and Angular use css, or the lack thereof. CSS in JavaScript is pretty common nowadays, making CSS files completely optional.

 

 

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.

 

 

3 hours ago, OSUblake said:

Animating properties like height and padding aren't any better. Look at what animating height triggers.

https://csstriggers.com/height

 

The browser spends a lot of time rendering a nice looking web page for you, and then on every animation frame you come along and destroy it. That makes the browser sad.  ?

 

To make the browser happy you'll need to leverage transforms. Instead of changing the width or height on every animation frame, you can reduce it down to 3 layouts/reflows using a technique called FLIP.

  • First - Record the initial state of your element, like its position and dimensions.
  • Last - Move your element into its final state, and record those values.
  • Invert - Now move your element back to where it came from. You now know all the values that will be needed for a transform based animation.
  • Play - Play the animation. The browser will go back to being happy again.

 

 

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.

 

 

3 hours ago, OSUblake said:

I came across a couple FLIP animations that I though were pretty neat, and wanted to make them with GSAP. What I ended up with was the start of what could be a nice library for doing FLIP animations with GSAP.

 

It's pretty easy. Just pass in the elements you want to animate, a modifier function, and some animation options. The modifier function is just a function that will change the element in someway, like toggling a class, or moving it somewhere else in the DOM.

 


var video = document.querySelector("#video");

Flipper.flip(video, videoModifier, {
  duration: 0.5,
  ease: Sine.easeInOut
});

function videoModifier() {
  video.classList.toggle("minimized");
}

 

 

 

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?

 

 

 

3 hours ago, OSUblake said:

There are no width or height animations in this demo. It's all done with scaling. I'm making use of the new ExpoScaleEase for counter-scaling.

 

See the Pen ebbeaf989d7648cbbfc9932e446df5b6 by osublake (@osublake) on CodePen

 

 

Good idea?

 

 

 

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.

 

 

Link to comment
Share on other sites

 

10 hours ago, determin1st said:

I cant take your advice, because I disagree with the first sentence. 

 

How can you disagree with that when you're already experiencing difficulty? That kind of proves my point.

 

10 hours ago, determin1st said:

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..

 

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.

 

 

 

10 hours ago, determin1st said:

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.

 

A component is more of an architecture or pattern. Web Components and Polymer are where you'll find most of the widget stuff.

 

10 hours ago, determin1st said:

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).

 

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. 

 

 

10 hours ago, determin1st said:

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.

 

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.

 

 

10 hours ago, determin1st said:

Let me interpret your word "FLIP":

 

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.

 

 

10 hours ago, determin1st said:

First/Last. You just described code logic in the className handler, lookup it yourself, it does these two things.

 

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.

 

 

10 hours ago, determin1st said:

Play. Adding or Removing of css class may mean inverting to previous visual 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.

 

 

10 hours ago, determin1st said:

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.

 

 

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.

 

See the Pen GxmBPP by osublake (@osublake) on CodePen

 

 

This should animate between a column and row when you hover over it. And yes, there is a way to animate it.

 

See the Pen wmdPVv by osublake (@osublake) on CodePen

 

 

 

I'll explain more about this in another post.

 

  • Like 7
Link to comment
Share on other sites

11 hours ago, OSUblake said:

How can you disagree with that when you're already experiencing difficulty? That kind of proves my point.

 

 

No noo, I fixed it already. Now It proves only the difficulty on your side.

 

 

11 hours ago, OSUblake said:

Angular1 has nothing in common with the current version besides the name.

 

 

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,..

 

 

11 hours ago, OSUblake said:

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 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).

 

11 hours ago, OSUblake said:

..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. 

 

 

Let it go...

 

11 hours ago, OSUblake said:

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.

 

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.8-).

 

 

 

11 hours ago, OSUblake said:

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? 

 

 

Catch!

 

See the Pen MVoYWb?editors=0110 by determin1st (@determin1st) on CodePen

 

 

Link to comment
Share on other sites

17 hours ago, determin1st said:

No noo, I fixed it already. Now It proves only the difficulty on your side.

 

Correction. You think you fixed it. As @Jonathan likes to say, "If you make it, they will break it!", so I broke it. It doesn't work with concurrent animations. Your syntax will throw a bunch of errors.

 

And specificity matters when using className tweens. The desired result is a 300 x 300 box with a red background.

 

See the Pen RMgOYm by osublake (@osublake) on CodePen

 

 

 

17 hours ago, determin1st said:

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 was making the distinction because I wasn't referring to Angular1 in my original comment. There's a lot of controversy over the naming and versioning, like why is there no Angular3, but they did that because "Angular" is a brand with a lot of name recognition, and they didn't want to kill it off. What they decided is that Angular1 will be AngularJS, and Angular 2+ versions be Angular. They are two completely different products, and even have different wikipedia pages.

 

 

17 hours ago, determin1st said:

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?

 

You're thinking of a stateless component, and they don't do anything special. You don't even need React for that.

 

See the Pen c0d238276b4b1b9c4ab48e56100f75cf by osublake (@osublake) on CodePen

 

 

17 hours ago, determin1st said:

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).

 

 

Don't be so quick to jump to incorrect conclusions. This is real easy. 

 

<!-- Import it -->
<script src="webcomponents-polyfill.js"></script>
<link rel="import" href="some-component.html">

<!-- Ta-da! -->
<some-component></some-component>

 

I don't know what you were looking at, but that site is a public repository of web components, and if you didn't see any documentation, then the developer probably didn't make any. That wouldn't be the first time a developer released something without a README.

 

This is how most of them will look.

https://www.webcomponents.org/element/PolymerElements/paper-button

 

See the Export link on the example, that will open it in jsfiddle. Now look at the "Elements" section on the left, and click on the <paper-button> link. That looks like pretty good documentation to me.

https://www.webcomponents.org/element/PolymerElements/paper-button/elements/paper-button

 

And MDN has a lot of good documentation on how to work with web components.

https://developer.mozilla.org/en-US/docs/Web/Web_Components

 

 

17 hours ago, determin1st said:

Let it go...

 

Now why would I do that? My responses may be directed at you, but this a public forum, and this topic will end being viewed by thousands of other people. If you don't, I'm sure somebody else will find value in what I've posted.

 

 

17 hours ago, determin1st said:

Catch!

 

Oops! I broke it. Click on the video while it's animating.  

 

See the Pen LdjPYq by osublake (@osublake) on CodePen

 

 

 

  • Like 3
Link to comment
Share on other sites

7 hours ago, OSUblake said:

 

Correction. You think you fixed it. As @Jonathan likes to say, "If you make it, they will break it!", so I broke it. It doesn't work with concurrent animations. Your syntax will throw a bunch of errors.

 

And specificity matters when using className tweens. The desired result is a 300 x 300 box with a red background.

 

 

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:

 

See the Pen JLyRgm by determin1st (@determin1st) on CodePen

 

 

7 hours ago, OSUblake said:

I was making the distinction because I wasn't referring to Angular1 in my original comment. There's a lot of controversy over the naming and versioning, like why is there no Angular3, but they did that because "Angular" is a brand with a lot of name recognition, and they didn't want to kill it off. What they decided is that Angular1 will be AngularJS, and Angular 2+ versions be Angular. They are two completely different products, and even have different wikipedia pages.

 

 

 

 

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:-P Why you look at fancy pictures.. it's a propaganda.

 

 

 

7 hours ago, OSUblake said:

Don't be so quick to jump to incorrect conclusions. This is real easy. 

 


<!-- Import it -->
<script src="webcomponents-polyfill.js"></script>
<link rel="import" href="some-component.html">

<!-- Ta-da! -->
<some-component></some-component>

 

I don't know what you were looking at, but that site is a public repository of web components, and if you didn't see any documentation, then the developer probably didn't make any. That wouldn't be the first time a developer released something without a README.

 

This is how most of them will look.

https://www.webcomponents.org/element/PolymerElements/paper-button

 

See the Export link on the example, that will open it in jsfiddle. Now look at the "Elements" section on the left, and click on the <paper-button> link. That looks like pretty good documentation to me.

https://www.webcomponents.org/element/PolymerElements/paper-button/elements/paper-button

 

And MDN has a lot of good documentation on how to work with web components.

https://developer.mozilla.org/en-US/docs/Web/Web_Components

 

That's what I was talking about. They won't make any complex widget with this.

 

 

8 hours ago, OSUblake said:

Now why would I do that? My responses may be directed at you, but this a public forum, and this topic will end being viewed by thousands of other people. If you don't, I'm sure somebody else will find value in what I've posted.

 

(can) you can decide yourself what is what.(?)

 

8 hours ago, OSUblake said:

Oops! I broke it. Click on the video while it's animating.

 

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.

 

 

Link to comment
Share on other sites

18 hours ago, determin1st said:

 

Sorry, but you broke your hand;-). You missed the specifi.. cascade rules. It was not really a className* task, but, anyway I added it.

 

Why are there two declarations for .green-state and .red-state in your CSS? Why does a box with both .red-state and .green-state become red, not green? I mean, I understand the CSS, but isn't is it way less intuitive to do it that way? If I want a box to go from green, to red, to blue, to yellow, to purple... would I have to write 5 nested classes? Just wondering if I missed something :)

 

(Also, I feel like there's a lot of unneeded aggressiveness in this thread – could use some humility... but I'm no mod)

  • Like 3
Link to comment
Share on other sites

2 hours ago, Acccent said:

 

Why are there two declarations for .green-state and .red-state in your CSS? Why does a box with both .red-state and .green-state become red, not green? I mean, I understand the CSS, but isn't is it way less intuitive to do it that way? If I want a box to go from green, to red, to blue, to yellow, to purple... would I have to write 5 nested classes? Just wondering if I missed something :)

 

(Also, I feel like there's a lot of unneeded aggressiveness in this thread – could use some humility... but I'm no mod)

 

That are just base rules of cascade. Two classes replace one, as .class1 < .class1.class2. so, when you have .green, it's green, when you have .green.red, it's red, because two classes are bigger. It can be Less intuitive only when you create classes for multi-step animation which are not bound to the *real* state. The real state always matters something. In that example it means only "pulsing box on page load" or "awesome effect", so it's not intuitive.

 

The combined class number of 5 (.a.b.c.d.e) - can't imagine... it means that widget may have 5 states applied simultaneously.

take checkbox, it may be: hovered, checked, disabled, hidden, focused(keyboard)... but not all of them.. it may be hovered+checked, but not hovered+disabled or hovered+hidden. So, you have to, if you find out something great.

 

The nesting (.a .b .c NOT .a.b.c), may be very deep, because of DOM structure of your widget and state combinations.

You don't have to nest if you know that these class names will be unique on page.

 

 

Link to comment
Share on other sites

On 24/03/2018 at 3:48 PM, determin1st said:

The combined class number of 5 (.a.b.c.d.e) - can't imagine... it means that widget may have 5 states applied simultaneously.

take checkbox, it may be: hovered, checked, disabled, hidden, focused(keyboard)... but not all of them.. it may be hovered+checked, but not hovered+disabled or hovered+hidden.

 

I mean, you can have :hovered, :focus, :hovered:focus, :hovered:checked, :focus:checked, :hover:focus:checked. That seems like a lot, and I'm sure I'm forgetting some. And what about when you want different components of an animation to animate at different speeds? For instance, say I have a simple semi-transparent button. I want it to linearly transition to 100% opaque AND scale with a bouncy ease over 0.3s when hovered. But when I stop hovering, I want it to slowly go back to its previous opacity and scale, this time with a linear transition for both and over 0.5s instead of 0.3. And I want it to do a tiny "shake" animation when I click it if it's disabled. How would I achieve that with only className?

 

Again, apologies if I misunderstood or missed something, I'm just trying to wrap my head around what you have in mind.

  • Like 2
Link to comment
Share on other sites

13 hours ago, Acccent said:

 

I mean, you can have :hovered, :focus, :hovered:focus, :hovered:checked, :focus:checked, :hover:focus:checked. That seems like a lot, and I'm sure I'm forgetting some.

 

You can have :hovered instead of .hovered if you are going to animate with CSS transition, but you are not, right? (You want to animate with GSAP) Also, these standard pseudo-classes are very limited in name/number. They are separated from browser events, so you won't be able to implement complex logic.

 

 

13 hours ago, Acccent said:

 

And what about when you want different components of an animation to animate at different speeds?

 

 

You and I use queue for that. The difference, i suppose, that we use it differently. You:

// define, init, assemble, run
timeline.to(node1, {anim1});
timeline.to(node1, {anim2});

 

I write more data-oriented way:

// define
hover = [{anim1}, {anim2}];
...

// init
hover[0].node = node1;
hover[1].node = node1;
...

// assemble
timeline = redSock.queue(hover);
...

// run
timeline.play();

 

Here, I had to write "queue" function, which interprets a sequence of tweens, given as a parameter and creates a timeline.

Sure, to have several animation/transition steps on the same target there must be several CSS classes. But they are single state to the widget and don't increase nesting inside CSS file structure if you want to animate different CSS properties.

 

In fact, developing an interface.. creating of reusable/complex widget will require animation of several targets.

Making several steps (for the same target) is not obligatory 99%.

 

Look at the experimental widget I posted above, the hover animation defined as:

      hover: [
        {
          // TITLE node
          duration: 0.4,
          to: {
            className: '+=hovered',
            ease: Bounce.easeOut
          }
        }, {
          // CONTENT node
          position: 0,
          duration: 0.4,
          to: {
            className: '+=hovered',
            ease: Power2.easeOut
          }
        }, {
          // PANEL node (container of TITLE & CONTENT)
          position: 0,
          duration: 0.6,
          to: {
            className: '+=hovered',
            ease: Power2.easeOut
          }
        }
      ],

 

 

13 hours ago, Acccent said:

And what about when you want different components of an animation to animate at different speeds? For instance, say I have a simple semi-transparent button. I want it to linearly transition to 100% opaque AND scale with a bouncy ease over 0.3s when hovered. But when I stop hovering, I want it to slowly go back to its previous opacity and scale, this time with a linear transition for both and over 0.5s instead of 0.3.

 

I don't know what means "when I stop hovering" - you can't really, stop hovering, because events are discrete. The only way it can be interpreted, that pointerenter occured, you started animation and in the process of animation (it's not finished), pointerleave occurs. It does not differ from unhover effect, which could be:

 

      unhover: [
        {
          duration: 0.4,
          to: {
            className: '-=hovered',
            ease: Power2.easeIn
          }
        }, {
          position: 0,
          duration: 0.4,
          to: {
            className: '-=hovered',
            ease: Power2.easeIn
          }
        }, {
          position: 0,
          duration: 0.4,
          to: {
            className: '-=hovered',
            ease: Power2.easeIn
          }
        }
      ],

 

But it's not, probably, what you thought about, as you were speaking about multi-step animation for the same target.

To do that, hover can be morphed into this:

 

    ...
      hover: [// timeline abstaction
        {
          // TITLE node
          group: [ // nested timeline created here
            {
              duration: 0.3,
              to: {
              	className: '+=hoverStep1',
              	ease: Bounce.easeOut
              }
            },
            {
              duration: 0.5,
              to: {
              	className: '+=hovered',
              	ease: Power0
              }
            }
          ]
        }, {
          // CONTENT node
          position: 0,
          duration: 0.4,
          to: {
            className: '+=hovered',
            ease: Power2.easeOut
          }
        }, {
          // PANEL node (container of TITLE & CONTENT)
          position: 0,
          duration: 0.6,
          to: {
            className: '+=hovered',
            ease: Power2.easeOut
          }
        }
      ],
      ...
      
      

 

This adds complexity, which is not obligatory to interface object, imo. In the CSS you will need two classes:

/* nesting for intersecting props */
.hoverStep1 {...}
.hoverStep1.hovered {...}

/* or */

/* non-intersecting props */
.hoverStep1 {...}
.hovered {...}

..and corresponding unhover queue, which reverses both classes.

 

 

13 hours ago, Acccent said:

And I want it to do a tiny "shake" animation when I click it if it's disabled. How would I achieve that with only className?

 

Okay, use manual awesome effect (in click event handler), it doesn't change any visual state..

Still, it can be defined and played the way I described above but without className.

 

 

13 hours ago, Acccent said:

Again, apologies if I misunderstood or missed something, I'm just trying to wrap my head around what you have in mind.

 

No need. Im trying to create a reusable app framework and widget library. It's not required to know how framework works if you only want to use widget. It works jquery-like. You call a function, pass data and options.. that's all. No need to install/configure lots of stuff.

 

 

 

 

 

Link to comment
Share on other sites

I'm afraid I don't really understand a single thing of what you're suggesting, nor do I really get how a solution that takes so many lines and setup could be easier or more intuitive than just 3 tweens triggered with pointer events... Sorry! Good luck though :)

Link to comment
Share on other sites

18 hours ago, Acccent said:

I'm afraid I don't really understand a single thing of what you're suggesting, nor do I really get how a solution that takes so many lines and setup could be easier or more intuitive than just 3 tweens triggered with pointer events... Sorry! Good luck though :)

 

I don't suggest. Just answering. It's not easier, it's more flexible. We do different things.

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×