Make into React Components

Isn't there another library that does all this? Why do we need to do this? Problems with common libraries:

They’re based on showing one item at a time, so items might all come in at once
If an image hasn’t fully loaded before it animates in, it could drop frames or reveal an empty image

Main issue w/ React The main blocking issue is ani-friend stores state as attributes into the DOM, when there’s a re-render, the attributes reset. This causes bugs, including sometimes animations will replay. The library simply wasn’t designed to work with virtual dom and react.

It most likely needs to be rebuilt into react components — I doubt we can use the original source code.

Would be nice to be able to do something like…

  <AniTextLineAppear order="2" group="{groupId}">
    <h2>Use All Five</h2>
  </AniTextLineAppear>
  <AniFadeUp order="1" group="{groupId}">
    <img />
  </AniFadeUp>


// set settings for an animation group
AniGroup.get(groupId).settings = {
    loaderComponent: (<MySpinner></MySpinner>),
    inViewTriggerPercent: 0.2,
    speed: 1,
    ease: 'Power2.easeOut',
}

// be able to globally subscribe to when the group ID finishes animating
AniGroup.get(groupId).on('finish', ()=> {
 console.log('complete');
})

Goals/Benfits of React components:

Store properties as state, so if elements get re-rendered, it doesn't re-trigger the animations
Cleaner markup, better integration into our sites

A few details of functionality:

Details:

Be able to provide loading feedback on a group when it’s still loading
Preload the images when the user is 100vh above the image
If elements in the group are not yet in view, wait till the user scrolls down to them
- Adjust the timing of the sequence so it fires without delay
Animations could be custom css or gsap tweens, the AniFriend could simply take care of when to trigger it.

Questions

~How do we make this more a façade, so we're not maintaining two codebases~
~Where do you set global settings~
~How do we activate it?~
~Do parent elements get access to children?~

UseAllFive / ani-friend