Comments (20)
hey Gunnar,
can you share your code? looks like it's probably an svg view port issue?
cheers
bill
from react-simple-animate.
from react-simple-animate.
Please read the documentation https://react-simple-animate.now.sh/animate-keyframes
You can do code like below
<AnimateKeyframes
play
iterationCount="infinite"
direction="alternate"
durationSeconds={10}
playState="running"
keyframes={[
'transform: rotateX(0) rotateY(0) rotateZ(0)',
'transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)',
]}
from react-simple-animate.
from react-simple-animate.
any chance you can supply me with your svg? or is it just a react logo?
from react-simple-animate.
it's a css problem, there is no width for your img. hence it fly off the screen. make sure you inspect the element and check the attribute on your element. if you could leave the repo with a star would be really nice to support the package. thanks ❤️
https://codesandbox.io/s/6wyp4knkj3
from react-simple-animate.
from react-simple-animate.
from react-simple-animate.
you happy to close this issue?
from react-simple-animate.
from react-simple-animate.
thank you very much Gunnar, leave a star if you find it useful 🙏
from react-simple-animate.
from react-simple-animate.
from react-simple-animate.
Why u couldn’t nest? Can u share the code?
from react-simple-animate.
from react-simple-animate.
do you have an error by nest them? in theory it should worked
from react-simple-animate.
from react-simple-animate.
I see the problem please refer to my code below
https://codesandbox.io/s/6wyp4knkj3
you can only have one animation attribute on one element, this is standard css animation.
img {
animation: "2s linear 0s infinite alternate none running RSI-m25o8kbye";
animation: "2s linear 0s infinite alternate none running RSI-m25o8kby2";
}
see above if you have two the second one will overwrite. so solution is in my code example as well, take a look and play around with it.
thanks
bill
from react-simple-animate.
from react-simple-animate.
not sure about drag and drop, but yea redux is good
from react-simple-animate.
Related Issues (20)
- webkit no animation HOT 2
- Animation bug when adding new item HOT 1
- Feature Request: Pass className to animation HOT 4
- Animating only when user starts scrolling for SEO HOT 9
- play value from useAnimate cannot be use in useEffect HOT 10
- Animate inside AnimateGroup ignores complete HOT 11
- Support for style objects in AnimateKeyframes HOT 11
- Re-render on parent triggers animation HOT 3
- TypeError: useRef$1 is not a function HOT 5
- useAnimate question, not a bug HOT 7
- Unable to get useAnimateGroup hook or AnimateGroup to apply the initial start styles. HOT 5
- Animation does not play back HOT 2
- `AnimateGroup` question, not a bug HOT 2
- Children of Animation frame are lost when their width and height defined using flex and precentage. HOT 2
- Documentation Error HOT 2
- useAnimateKeyFrames animation runs when component is updated via other useState variables. HOT 1
- Prevent reverse animation, continue with the same animation. HOT 2
- Animation component is full width? HOT 4
- Support for rgb() / rgba() HOT 1
- useAnimateGroup doesn't work as expected after the second time the play function gets called HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-simple-animate.