Idea: new animation on show(), hide(), updateDom()

[bugsounet]

Hi,

I was thinking of coding new animations as an option
when we use hide(), show() or updateDom()

there is this nice library that I use regularly

what did you think of this ?

Sample of integration:

• we can use do this, for example in hide function:

as a reminder: hide: function (speed, callback, options)

options.animate can be created for this

we can assign a number 1 to XX in order to call the animation
naturally, if we don't use this option or number is 0 will result in displaying the default animation (opacity)

• for updateDom

as a reminder: updateDom: function (speed)

we can add new parameter to the function
updateDom: function (speed, animateOut, animateIn)

animateOut, animateIn can be optional

What do you think of this feature?

[khassel]

I'm fine with the animation feature as it is optional so everyone can decide to use it or not.

May @MichMich can comment if its o.k. for him.

[bugsounet]

sure, that why, I purpose before coding this :)

[rejas]

I'm fine with this too if the others are too.
How do you plan on coding this? Start with a very simple animation so we can discuss the actual implementation?

[bugsounet]

Start with a very simple animation.

coding for one animation or all, it's the same thing :)

I will search to code a clean part for animateCSS integration

1. I have to install animate.css in vendor
2. i have to be load the css in all case... maybe just before customCSS is the better place
3. I will try to export the number of the different animations (animateIN/OUT) and the master function for animated in async in a file. I wouldn't want to overload main.js too much
4. Modify main.js in accord for hide(), show() with options.animate and others

export all animations number and master animate function is really important for cleaning code i thing
There is 55 animateIN and 42 animateOUT
I have make a const object for it
sample:

  const animateIn = {
    // Attention seekers
    1: "bounce",
    2: "flash",
    3: "pulse",
    4: "rubberBand",
    5: "shakeX",
    6: "shakeY",
    7: "headShake",
    8: "swing",
    ...
  }

this is what goes through my head... to code the thing

[MichMich]

I like the idea especially since it's optional. I'm not a big fan of magic numbers though. So I would suggest using something like an enum.

[BKeyport]

As long as all animations stay optional via some method, I'm fine. I'm a big fan of non-distracting things on my mirror. "Snap" changes, etc, so only way I get distracted by it is if my camera picks up something.