Re: [css-animations][web-animations] steps() timing function sometimes unintuitive

[Rachel Nabors]

I was thinking of "steps(5, equal)" when discussing this syntax, as an
expansion of the steps() formula. I think it looks sensible, if that's
possible?
On Mon, Mar 7, 2016 at 9:00 PM Brian Birtles  wrote:

> On 2012/12/21 3:46, Tab Atkins Jr. wrote:
> > On Wed, Dec 19, 2012 at 6:40 PM, L. David Baron 
> wrote:
> >> On Wednesday 2012-12-19 10:29 -0800, Tab Atkins Jr. wrote:
> >>> I propose another steps value: step-mid. It splits the animation curve
> >>> into n segments, makes the first n-1 do step-end behavior, and leaves
> >>> the last to just run normally.  The above example could instead be
> >>> written as "steps(4, step-mid)" and have this behavior:
> >>
> >> I like the idea, but I find the name confusing; it sounded like
> >> something that would give the first and last steps half the duration
> >> of the other steps.  (I also find the description quoted above
> >> confusing, but the rest of the email made it clear.)
> >
> > I have absolutely no attachment to the name.  It was the first thing
> > that came to mind.
> >
> > I assume that Rachel's suggestion comes from her association of
> > steps(n, end) with meaning "eat the end of the animation" (and
> > likewise for "start"), so "none" is reasonable in that sense.  I'm not
> > sure it makes sense if your understanding comes from the spec's
> > explanation, though, where "end" means "transitions all at once at the
> > end of the step".
> >
> > Another possibility is just a new function.  I'm not sure what I'd
> > want to name it, though.
>
> I spoke with Rachel and a few others about this recently and we were
> wondering about the name step-equal? Unfortunately, that doesn't
> translate into a function very well ('step-equal(2)'? Alternatively,
> what about 'step-stagger' and 'stagger(5)', or just the function?).
>
> I'd like to settle on this soon because Chrome is shipping
> Element.animate() with support for 'step-middle' as defined by Web
> Animations.[1] We went to implement this in Firefox[2] but I'm concerned
> that there aren't use cases for step-middle as currently specced and
> instead what we want is what Tab originally proposed in this thread.
>
> Assuming usage is low in Chrome, I'd like to drop step-middle from Web
> Animations and replace it with this revised timing function.
>
> Best regards,
>
> Brian
>
> [1] http://w3c.github.io/web-animations/#typedef-step-timing-function
> I didn't realize Chrome had implemented this, or else I would have
> brought this up sooner.
> [2] https://bugzilla.mozilla.org/show_bug.cgi?id=1248340
>

Re: [web-animations] Fixing getAnimations()

[Rachel Nabors]

I concur these are issues. I like the way your thinking is going.


[image: photo]
*Rachel Nabors*
Web Animation Engineer
w:rachelnabors.com
<http://twitter.com/rachelnabors>  <http://dribbble.com/rachelthegreat>
<http://plus.google.com/u/0/+RachelNabors>
<http://linkedin.com/in/rachelnabors>
--

Curator of Web Animation Weekly <http://www.webanimationweekly.com>



On Wed, Nov 25, 2015 at 6:40 PM Brian Birtles <bbirt...@mozilla.com> wrote:

> Hi,
>
> Web Animations defines Animatable.getAnimations() (where Animatable is
> implemented by Element and a forthcoming PseudoElement interface) and I
> think we've agreed to add Document.getAnimations() as well.[1]
>
> I've found two problems with the first method which I'm going to call
> Element.getAnimations() for now since PseudoElement doesn't exist yet.
>
>
> PROBLEM 1. Element.getAnimations() doesn't work on a subtree
>
> Recently I was working on a presentation where I wanted to use script to
> restart all the animations in a particular slide, represented by a
>  element.
>
> What I really wanted to do was something like:
>
>section.getAnimations().forEach(anim => anim.currentTime = 0);
>
> However, Element.getAnimations() doesn't return animations from its
> descendants (unlike querySelectorAll, getElementById, etc.).
>
> To further complicate things, Document.getAnimations() *does* return
> animations from its desendants (or will, once it is specced).
>
>
> PROBLEM 2. getAnimations() relies too much on the order in which
> animations are returned
>
> Whenever you see code using getAnimations(), it almost always looks like
> this:
>
>var anim = elem.getAnimations()[0];
>
> That's really brittle. If some style is added that causes a transition
> to fire on elem, you may end up getting the wrong result.
>
> Of course, you can go through all the animations returned from
> getAnimations() and test their animationName/transitionProperty
> attributes and make sure you get the right object, but most people won't
> bother.
>
>
> PROPOSAL: Add some options to getAnimations()
>
> At a minimum, I think we need:
>
> * transitionProperty - used to filter by 'transitionProperty' which is
>only set on CSS transitions
>
> * animationName - used to filter by 'animationName' which is only set on
>CSS animations
>
> * id - used to filter by 'id' which may be set on script-generated
>animations
>
> * subtree - true means to fetch animations from descendents too (based
>on the Mutation Observer API)
>
> It's not obvious to me what the default value of subtree should be. I'd
> say 'false' except that would prevent using the same options object on
> Document.getAnimations(). Perhaps true? Given that most people will use
> this on leaf nodes anyway, maybe that would be ok?
>
> It's also not clear if we should only inspect the transitionProperty on
> CSSTransition objects, or if script-generated objects that define their
> own transitionProperty should be considered too. I guess they should.
> Likewise for animationName and CSS Animations.
>
> Some usage patterns are bogus, e.g. passing subtree:false to
> Document.getAnimations() or specifying both transitionProperty and
> animationName (except in rare cases where script added these
> properties), but maybe that's ok.
>
> Example usage:
>
>// Get the animation I just added
>elem.style.animation = 'move 3s';
>var anim = elem.getAnimations({ animationName: 'move' })[0];
>
>// Get all transform transitions in this section
>section.classList.add('move-in');
>var transitions =
>  section.getAnimations({ transitionProperty: 'transform' });
>
> As you can see in the first example, we still have the '[0]' thing
> there. It's more safe now since we're only dealing with CSS Animations
> named 'move', but you could still get the wrong result and it's also a
> bit of an eyesore and pain to type.
>
> I wonder if it's worth following the querySelector/querySelectorAll
> pattern and having a pair of functions: getAnimation/getAnimations?
>
> In the singular, if there were multiple matches on the same element
> you'd return the one with the highest composite order[2] since that's
> most likely to be the one that you want. If you had multiple matches
> within a subtree, I'm not sure: tree order or composite order.
>
> Possible future extensions:
>
> * Parameters to get only CSS transition or only CSS animations?
> * Parameters to get all animations that affect certain properties? e.g.
>all animations that affect either the 'opacity' property or
>'visibility' property.
>
> These can be easily implemented using Array.filter() so there's no
> urgency for these.
>
> What do you think?
>
> Brian
>
>
> [1] https://lists.w3.org/Archives/Public/public-fx/2015JulSep/0073.html
> [2] http://w3c.github.io/web-animations/#the-effect-stack
>
>

Re: Need for extended cubic-beziers

[Rachel Nabors]

I asked the community to speak up about their frustrations with the
limitations of cubic-beziers:
https://storify.com/rachelnabors/the-need-for-better-cubic-beziers.
Also, some examples of bouncy transitions:
https://smartypins.withgoogle.com/
http://valhead.com/2013/11/25/what-are-your-transitions-saying/
http://www.uigradients.com/

It's hard to find web examples for something so hard to implement today
with CSS when Flash and jQuery animations are being purged.
-- 

   - Aug 26 –27UX Week, San Francisco
   - Oct 28 –30Future of Web Design, San Francisco, Motion Design with CSS
   workshop

[image: photo]
*Rachel Nabors*
Storycoder, speaker, founder, Tin Magpie
w:rachelnabors.com
<http://twitter.com/rachelnabors>  <http://dribbble.com/rachelthegreat>
<http://plus.google.com/u/0/+RachelNabors>
<http://linkedin.com/in/rachelnabors>
--
*Speaking & Workshops in 2015*

   - Aug 26–27 UX Week, San Francisco
   
<http://uxweek.com/speakers/web-animations-expert-tin-magpie-and-web-animation-weekly>
Animation
   and Motion Design: in Process, in Practice workshop
   
<http://uxweek.com/workshops/animation-and-motion-design-in-process-in-practice>
   - Oct 28–30 FOWD, San Francisco
   <https://futureofwebdesign.com/san-francisco-2015> & Motion Design with
   CSS workshop
   <https://futureofwebdesign.com/san-francisco-2015/schedule/workshops/2068>

Get a signature like this:
<https://ws-stats.appspot.com/r?rdata=eyJydXJsIjogImh0dHA6Ly93d3cud2lzZXN0YW1wLmNvbS8/dXRtX3NvdXJjZT1leHRlbnNpb24mdXRtX21lZGl1bT1lbWFpbCZ1dG1fY2FtcGFpZ249cHJvbW9fNDUiLCAiZSI6ICJwcm9tb180NV9jbGljayJ9>
Click
here!
<https://ws-stats.appspot.com/r?rdata=eyJydXJsIjogImh0dHA6Ly93d3cud2lzZXN0YW1wLmNvbS8/dXRtX3NvdXJjZT1leHRlbnNpb24mdXRtX21lZGl1bT1lbWFpbCZ1dG1fY2FtcGFpZ249cHJvbW9fNDUiLCAiZSI6ICJwcm9tb180NV9jbGljayJ9>

[web animations] Global playback rate

[Rachel Nabors]

Been seeing a need for a global playback rate for animations. Talking with
accessibility experts about older users often needing slower animations
makes me think this is something individual sites if not browsers
themselves would like to offer user control over.

Currently you'd have to iterate over every animation object and adjust
their playback rates individually. Seems like a lot of fuss.

I'm told the Web Audio API has a global playback rate you can adjust. Why
not Web Animations, too? Seems very practical!
-- 

   - Aug 26 –27UX Week, San Francisco
   - Oct 28 –30Future of Web Design, San Francisco, Motion Design with CSS
   workshop

[image: photo]
*Rachel Nabors*
Storycoder, speaker, founder, Tin Magpie
w:rachelnabors.com
<http://twitter.com/rachelnabors>  <http://dribbble.com/rachelthegreat>
<http://plus.google.com/u/0/+RachelNabors>
<http://linkedin.com/in/rachelnabors>
--
*Speaking & Workshops in 2015*

   - Aug 26–27 UX Week, San Francisco
   
<http://uxweek.com/speakers/web-animations-expert-tin-magpie-and-web-animation-weekly>
Animation
   and Motion Design: in Process, in Practice workshop
   
<http://uxweek.com/workshops/animation-and-motion-design-in-process-in-practice>
   - Oct 28–30 FOWD, San Francisco
   <https://futureofwebdesign.com/san-francisco-2015> & Motion Design with
   CSS workshop
   <https://futureofwebdesign.com/san-francisco-2015/schedule/workshops/2068>

Get a signature like this:
<https://ws-stats.appspot.com/r?rdata=eyJydXJsIjogImh0dHA6Ly93d3cud2lzZXN0YW1wLmNvbS8/dXRtX3NvdXJjZT1leHRlbnNpb24mdXRtX21lZGl1bT1lbWFpbCZ1dG1fY2FtcGFpZ249cHJvbW9fNDUiLCAiZSI6ICJwcm9tb180NV9jbGljayJ9>
Click
here!
<https://ws-stats.appspot.com/r?rdata=eyJydXJsIjogImh0dHA6Ly93d3cud2lzZXN0YW1wLmNvbS8/dXRtX3NvdXJjZT1leHRlbnNpb24mdXRtX21lZGl1bT1lbWFpbCZ1dG1fY2FtcGFpZ249cHJvbW9fNDUiLCAiZSI6ICJwcm9tb180NV9jbGljayJ9>

Re: Need for extended cubic-beziers

[Rachel Nabors]

I can vouch for the need, as I've heard it requested and complained about
by just such people repeatedly. However, I myself haven't devised an
implementation for such beziers inside a library. That is beyond my ken.

I wonder if anyone here has that power?



On Tue, Aug 11, 2015 at 1:28 PM, L. David Baron dba...@dbaron.org wrote:

 On Tuesday 2015-08-11 13:14 -0700, Rachel Nabors wrote:
  So in my travels around the web animation community, I've noticed more
 than
  one lamentation that the cubic-bezier timing function doesn't take more
  than two coordinates, leaving bounces and other such animations woefully
  beyond the reach of most CSS animators.
 
  Such bounces are a much-touted feature of JS animation libraries like
  GreenSock and were easily available in Flash back in the day.
 
  I'm new here, so I don't know if this has been discussed before. Is
 there a
  reason *not* to support advanced curves?

 I'm not aware of a reason beyond not having a concrete proposal for
 what to add (though there might be details to discuss with a
 concrete proposal).

 Ideally such a proposal would come from somebody familiar with which
 parts of these JS animation libraries or Flash features are popular
 or important.  Backing a proposal with existing demand for its usage
 makes it a stronger proposal.

 -David


 --
 턞   L. David Baron http://dbaron.org/   턂
 턢   Mozilla  https://www.mozilla.org/   턂
  Before I built a wall I'd ask to know
  What I was walling in or walling out,
  And to whom I was like to give offense.
- Robert Frost, Mending Wall (1914)