beekai-oss / react-simple-animate Goto Github PK

Could it be possible to provide an example on how one could implement route transitions with this library?

It looks very interesting!

Describe the bug
When an Animation with a complete prop is placed inside of an AnimationGroup the complete styles are not applied.

To Reproduce
https://codesandbox.io/s/animate-components-in-sequences-e18mv

Expected behavior
The completion styles are applied after the animation is completed.

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome 75 & Safari 12.1.1

Is your feature request related to a problem? Please describe.
Nope.

Describe the solution you'd like
I'm using the library to animate elements on the screen as the user scrolls to them. However, if the user loads the page, I'd like for the animations to not hide the element until the user starts scrolling. This way, google can still crawl the content on the page.

Describe alternatives you've considered
Wrapping the animations in a flag and only using the hooks when scrolling has started.

Additional context
Happy to provide more if needed.

On the documentation, specifically for the <AnimateKeyframes /> component, the following code is presented:

<AnimateKeyframes 
    play 
    delay={1}
    duration={10}
    iterationCount={3}
    direction="alternative"
    keyframes={[
      'transform: translateY(0)',
      'transform: translateY(10px)',
    ]} 
  >
    <YourComponent />
  </AnimateKeyframes>

However, direction="alternative" is not a valid prop. I believe this should be alternate.

https://react-simple-animate.now.sh/animate-keyframes

Description of the bug
I get that error whenever I put a component in my code. I do not get the error then that component is not there.

Screenshots

Hello!

I'm using AnimateKeyframes to move an arrow left to right. The arrow is placed in a narrow space, which is why it's vital that it doesn't move outside it's designated space. The problem is that the Arrow's parent, which is the AnimateKeyframes component, seems to be full width by default.

See this gif:
https://i.imgur.com/34uZSbG.gif
The blue area is the AnimateKeyframes component. As you see in the bottom, it creates a horizontal scrollbar due to the component going too far right. The SVG itself is not full width.

This is my component:

      <Box sx={{ margin: 2, marginTop: 6, textAlign: "center" }}>
        <AnimateKeyframes
        play
        duration={2.5}
        keyframes={[
            { 0: 'transform: translateX(0px)' }, // 0%
            { 50: 'transform: translateX(20px)' }, // 50%
            { 100: 'transform: translateX(0px)' } // 100%
          ]}
        iterationCount="infinite"
        easeType="ease"
        >
            <ArrowForwardIcon />
        </AnimateKeyframes>
        <Typography variant="h5">Click on the map to place zones</Typography>
      </Box>

Any ideas on this issue? Is the Animation component intentionally fullwidth? Many thanks, and great library :)

Hello! Amazing library, but I have a problem.

When I try to animate a div that has width: 20% and flex: 1 (the parent has flex-direction: "column"), the div wrapped by animation frame gets lost. While inspection through dev tools i can see div animating but it says (div 0x0)

setting width and hight of the child as px values shows the animation.

<AnimateKeyframes play={true} iterationCount="infinite" duration={2} keyframes={[ "transform: translateX(0px)", "transform: translateX(200px)", ]} // keyframes is an array of styles, and each style // will be distributed over 100% of the duration > <div style={{ display: "flex", flex: 1, height: "100%" }}> <div style={{ position: "absolute", flex: 1, backgroundColor: "#86c232", width: "20%", display: "block", }} ></div> </div> </AnimateKeyframes>

Describe the bug
Value of play is changing during the animation and it cannot be used inside useEffect

To Reproduce
I want to play animation depends on isOpened prop from parent and I need value of isPlaying to conditionally show children (I think that is not doable using Animation component)

const { play, style, isPlaying } = useAnimate({
  start: { opacity: 0 },
  end: { opacity: 1 },
  play: isOpened,
});

useEffect(() => {
  play(isOpened)
}, [isOpened, play]);

return (isOpened || isPlaying) ? children : null;

Above code produces infinite loop inside useEffect.

Describe the bug
useAnimateGroup's play function only works for the first two times it's called. After that the value of isPlaying doesn't get updated correctly and remains true no matter what is passed to play

To Reproduce
You can test this behavior in the demo provided in the docs for this hook : https://react-simple-animate.vercel.app/hooks

Expected behavior
Calling the play function should update the isPlaying state correctly

Screenshots

Additional context
the cause of this issue is how the play function is internally defined.

playRef.current = playRef.current
    ? playRef.current
    : (isPlay: boolean) => {
        ...
        setStyles(isPlay ? styles : [...styles].reverse());
        setPlaying(!isPlaying);
      };

As you can see, the function assigned to playRef.current is defined only on the first render and creates a closure on the value of isPlaying, which is initially false. Then, when we call play(!isPlaying), isPlaying gets set to true. But after the first render, because playRef.current keeps its old reference which has closed on the initial value of isPlaying, being false, calling play would always call setPlaying(true).

The solution would be to use the parameter isPlay and replace setPlaying(!isPlaying) with setPlaying(isPlay)

Also there is no test for this use case.

If you agree with the diagnosis, I'd be happy to create a PR

Describe the bug
While developing a cross-fade animation component I encountered an issue that occurred on every first render.
At first, I considered the possibility of SSR not working properly, but when taking a look into the upper component tree I noticed having a couple of unwanted re-renders.
Basically, at the very least while using useAnimateKeyframes hooks, when the parent component re-rendered the animated child comp would also re-render and trigger the animation.

To Reproduce
I'm providing a very barebones example, clicking the trigger re-render button will trigger the behaviour:
https://codesandbox.io/embed/stupefied-chatterjee-8ecgg

Expected behavior
I'm not quite sure but maybe this is the intended behaviour and I should handle the extra renders. Even so, I expected the animation to not play.

Desktop (please complete the following information):

• OS: [osx]
• Browser [chrome, firefox]

Hi,
Simple question regarding the AnimateGroup. Is it possible to play PNG seq in a loop?

Thx

Be specifying react and react-dom as dependencies they are installed also which shouldn't be the case. Please change them to peerDependencies.

I'm building a photo slideshow component, and I'd like to animate each photo in using variations of scale, translateX, translateY, and opacity. So your component looks perfect!

The page is created without a build pipeline, so I'm including your script using unpkg. I've worked through several errors already, but I'm stuck with these three errors. The page works without your animate library (sans animations of course) and now I'm not sure what the problem might be. Seems like it should all work.

Here's how I'm importing your library, pulling in react-transition-group as a dependency for your library.

<script src="https://unpkg.com/[email protected]/dist/react-transition-group.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/animate.js"></script>

And here's how I'm using your library.

        const Photo = ({src,questCode}) => {
            return (
                <div className="photo-container">
                    <Animate
                        startAnimation={true}
                        startStyle={{"transform":"scale(0.5)"}}
                        endStyle={{"transform":"scale(1)"}}
                        durationSeconds="0.3"
                        easeType="linear">
                        <img key={questCode} className="photo" src={src} />
                    </Animate>
                </div>
            )
        }

Here's the source of the entire file, just unzip the html page into a folder then run python -m SimpleHTTPServer in that folder to view it using a webserver...
slideshow.html.zip

As seen in the Use Hooks to control Animate section of https://react-simple-animate.vercel.app/advanced, a boolean state will always reverse the animation when the state changes. Instead of reversing, I would like that the next button click will reuse the initial animation. Such that, Instead of going back to 0px, the square will go to the 400px. Can we do that with this package?

It would be nice if this library supported animating between rgb / rgba color functions.

Hi! First of all, thanks for the awesome library. It works great!

My current issue is, I have the following component:

      <AnimateKeyframes
        play={true}
        duration={0.6}
        easeType="cubic-bezier(0.25, 0.46, 0.45, 0.94)"
        keyframes={[
          `transform: translateZ(700px) translateY(300px)`,
          `transform: translateZ(0) translateY(${this._translateY}px)`
        ]}
      >
        <figure className="Card " style={this._style}>
          <img src={this.props.src} alt={this.props.alt} />
        </figure>
      </AnimateKeyframes>

I would like the Card element to start with visibility:hidden;, and only when the AnimateKeyframes run turn it to visibility:visible;

How could I achieve this?

Thank you very much.

Hello Bill.
I would like to use the <AnimateKeyFrames ...> component with a svg image. However, the maximum size is 50px X 50px and it seems to be impossible to compress AnimateKeyFrame to fit inside that size.
Thanks in advance, Gunnar Siréus

On your example site (https://react-simple-animate.herokuapp.com/), you're missing a closing bracket. I'd have submitted a PR, but I wasn't sure where to make that change.

Describe the bug
There is no animation played when trying this with webkit engine. With Chrome desktop it works fine.

Smartphone:

• Device: [iPhoneXS]
• OS: [iOS16.0]
• Browser [chrome, safari]

When adding a new card, it causes a bug so i dont see the content

 <AnimateGroup play>
            {sortedCards?.map(card => (
              <Animate
                key={card.id}
                sequenceId={card.id}
                start={{ opacity: 0 }}
                end={{ opacity: 1 }}>
                <BoardCard card={card} />
              </Animate>
            ))}
          </AnimateGroup>

I don't know if this is outside of the scope of this more lightweight module, but it would be nice if possible to allow one to set a className prop that applies a css class instead of using a style object.

Describe the bug
useAnimateKeyFrames animation runs when component is updated via other useState variables.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://codesandbox.io/s/useanimatekeyframes-forked-91bjc?file=/src/index.js'
2. Click on 'Trigger' button
3. Animation Starts (it should not)

Expected behavior
The animation should not start. For instance I did this with useAnimate hook without issue. https://codesandbox.io/s/useanimate-iuui5?from-embed=&file=/src/index.js

Hi,

Simple question regarding the useAnimate hook. I was making a slider that is controlled by a prop and before I simply used that prop to revert the animation I was trying something like this:

const { play, style } = useAnimate({
        start: { transform: `translateY(${showContent ? '100%' : '0%'})`},
        end: { transform:`translateY(${showContent ? '0': '100%'})` },
    });
useEffect(() => {
        play(true);
    }, [show]);

My question is more of a curiosity, but why doesn't the first implementation work like expected? Is it a misunderstanding of how the useEffect hook works?

Firstly let me say this is a great little css animation component. Thank you. I have been looking for awhile for something small that is simple to use, and this is exactly what I was looking for. Unfortunately I couldn't get it to work properly.

Describe the bug
In the example provided for useAnimateGroup in https://react-simple-animate.now.sh/hooks, it starts with { opacity: 1, transform: "translateY(0)" }. If you check the DOM, these styles have not actually been applied, they are just the default. If you change these values, ie { opacity: 0.5, transform: "translateY(0)" }, these values are not applied still.

This means in order to display an array of elements fading in, I need to first manually apply the style from the sequences array like this like this... which cant be right:
style={{ ...sequences[index].start, ...styles[index]}}

Expected behavior
The start element styles to be applied before play is set to true.

Is your feature request related to a problem? Please describe.
The API to define styles is different in AnimateKeyframes compared to Animate. While Animate supports an object with key/value as styles, AnimateKeyframes only seems to support a string, making it harder to compute and manipulate.

Describe the solution you'd like
It would be nice if AnimateKeyframes would support the style object, too.

Perhaps keyframes could look like this:

[
  {at: 0,   style: { opacity: 0 }},
  {at: 100, style: { opacity: 1 }},
]

Additional context
Putting the animation index (%) into a property instead of being the object key itself would help interoperability from other languages that compile to JS, but aren't as dynamic.

Animation does not play back after second click

I have this component

import React from "react"
import { useAnimate } from "react-simple-animate"

export default () => {
  const { play, style, isPlaying } = useAnimate({
    start: { transform: "translateX(0px)" },
    end: { transform: "translateX(200px)" }
  });

  function handleClick() {
    play(!isPlaying)
    console.log('isPlaying: ', isPlaying)
  }

  return (
    <>
      <div style={style}>
        Hello
      </div>
      <button onClick={handleClick}>
        Play
      </button>
    </>
  );
}

I expect that animation will play back after second click but it doesn't and only after double click it plays back

• OS: macOs Catalina 10.15.4
• Browser chrome / safari
• Version Chrome: 84.0.4147.125 / Safari: 13.1

Package version

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"react-simple-animate": "^3.3.9"

First off, awesome project -- it's been super useful for me.

The issue:
I'm trying to use useAnimateKeyframes to show an element when it comes into view. However, unlike useAnimate where startStyle is applied as an initial style, the 0% state of the keyframes isn't applied until play is actually called.

Essentially, the behavior ends up being that the element has opacity: 1 to start, but when it gets scrolled into view (and play() is called), the element flickers for a second as the element initializes to opacity: 0 and then proceeds to animate properly to opacity: 1.

Am I just missing something or using it incorrectly? Please advise.