I'm quite new to React,
I have imported an SVG and would like to animate few clones of it, eventually they will end up in the same row, should i be using use flexbox?
I have done it statically using flexbox, but i would like to animate each svg component so they will appear on the screen gradually (one after the other). Any suggestions how to accomplish it?
Thank you all
you can use GSAP (GreenSock) library to achieve that, just trigger the animation after componentDidLoad() in your React component.
You can learn about GSAP staggering here:
https://greensock.com/stagger
Hope it helps!
you can use CSSTransitionGroup for react
here are doct from react to do it
https://reactjs.org/docs/animation.html#high-level-api-reactcsstransitiongroup
https://reactcommunity.org/react-transition-group/
this animations works on enter and leave from dom of element
<CSSTransitionGroup
transitionName="example"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
/>
<CSSTransitionGroup>
Related
I need to customize thumb in Angular material slider, but so far I haven't succeed. Since the position of material element is already 'absolute', it's a bit tough to find a workaround with :after/:before. I have also tried to use clip-path, but it didn't work. Plus my variant should have shadows and there's problems with that when using clip-path.
Perhaps someone has faced a similar problem or can help recreate this form of an element without using 'position'.
Thanks
https://codesandbox.io/s/keyframe-plus-whilehover-zodx7?file=/src/App.js
If keyframe animation is applied to a component, any event like whileHover or onTap won't work on that motion.div.
The reason why using styled component for animating a div is sometimes framer motion for example couldn't change z-index during keyframe animation. I am trying to combine both styled-component with framer-motion together.
you simply don't mix keyframes with framer-motion. The whole point of developing framer-motion was to make animations simpler and more React friendly than using CSS. Read the documentation and get some practice to get a better grasp of its capabilities.
I reformated your code, you can check it here https://codesandbox.io/s/keyframe-plus-whilehover-forked-y7iqr?file=/src/App.js
I'm trying to write a sliding menu similar to that with images here: https://chustynka.pl/
I've got already components that are changing in time (with arrows) the only thing left is animation. I added the classes and ids that will be useful but I don't know how to use css to animate them. Could you help?
https://codesandbox.io/s/00rnj29p60
Unfortunately it's not just CSS code you need. As you're going to animate the slides you have to do some more javascript code as well. For example you have to keep track of the direction of the slides. That is if you're pressing the left or right arrow. That, in turn, will decide which direction the slides will slide in/out.
There's a lot of approaches to doing this but it involves more coding in JS. =)
This is not a React slider I've made here but you can download/clone it from Github and take a look at the script for it. Maybe it will give you some idea of what you have to do.
https://github.com/weibenfalk/Slider-Carousel---Lightweight-in-Vanilla-JS-ES6-
I would like to have Google Material shadows on my SVG elements.
I am using Snap SVG and I have found a way to use shadow filters on my elements:
element.attr({
filter : s.filter(Snap.filter.shadow(0, 19, 38, 'black', 1))
});
What I can't find is the settings I have to input for each of the Material shadows.
What I tried:
I found several codepens such as this which have material shadows using CSS, and I tried to take the box-shadow settings from them and use the same settings, but mine just got much bigger.
From what I researched, box-shadow take the settings in pixels, and according to the Snap SVG docs, so does Snap SVG.
I can't seem to understand why both take the setting in pixels, but Snap SVG is just much more.
-- I also tried some trial and error, but I can't imagine how long it will take to find out all the different settings for all the different Material Shadows.
So to clarify things a little, what I really would like to know is the Snap SVG shadow filter setting, for each of the Google Material Shadow.
The reason is that I want a button that cycles between the shadows.
Thank you for your help.
EDIT
Actually, it looks like I was doing the opacity wrong.
My filter now resembles the Material shadow much better.
However, I notice that the codepens that use CSS for Material shadows use multiple box-shadows. How can I do that with Snap SVG? (Have multiple shadows)
SOLUTION
So what I did was to define a couple of defs in the SVG.
I found an SVG with Material Shadows which helped me define my defs for each level of shadow.
I then did as #Ian suggested and used the defs with Snap SVG.
I'm not quite sure from your description why you still can't use the css style you have found that you like. No reason you can't switch styles by toggling a button unless I'm misunderstanding something.
Its a bit fiddly doing complex filters in Snap, but if you find one just from regular svg markup, you can use it, by either 'parsing' the svg markup, or using some thats already existing in a defs statement for example.
E.g you could go to a page like this... filter codepen Grab the created markup, and then put it in a defs statement or parse('markup') it.
Then you can use it like...
element.attr({ filter: Snap('#myFilterId') });
eg jsfiddle created using the above codepen and just pasted into a 'defs' statement and used with above line.
Looking at http://www.css3maker.com/ I see the menu items like "Border Radius" getting animated on mouseover. How was this achieved using CSS?
I did not look how it was done in that website. But jQuery can do wonders with animation. It's a javascript API that is becoming widely used.
CSS animations can be done using the transition property.
Check http://www.css3creations.com/ for demos.