I am trying to add an animation, where I want the added text to have a 3d effect and rotate 360 degrees at the same time using material ui
<Typography variant="overline" color="secondary" style={{fontFamily:'Roboto'}}>
All about your needs
</Typography>
I want that effect to the above mentioned text , how should I approach this problem?
It's jsut a css behaviour, look at the following:
#keyframes rotatee {
from{transform:rotateY(0deg)}
to {transform:rotateY(360deg)}
}
.toto > span {
animation: rotatee 3s linear infinite;
display:inline-block;
}
<span class="toto">
<span>TEXT</span>
</span>
Related
In my React project I have a collapsed sidebar menu with a logo at the top. I would like to add functionality that on hovering over the collapsed sidebar, transforms the logo to a basic hamburger menu, and then reverts back to the logo when the mouse leaves the sidebar.
I have access to a designer that could create an animated asset (e.g. GIF), but I am not sure how I would implement something like this with a GIF.
In my limited experience with animating in web projects, I feel that it would be ideal to somehow be able to use CSS animation to make the transformation but don't have the skills to make that myself and I don't think that is something that the designer can do.
I would love to make this logo: https://i.stack.imgur.com/Bsqx9.png
Transform to a basic hamburger icon: https://i.stack.imgur.com/ivRYk.png
Would this be possible to implement in React with a GIF? Other animation formats?
If CSS would be best how could I go about creating the logo in CSS?
Edit: To clarify, I'm hoping to find a way to create a smooth transition between the two. This is why I'm particularly interested in things like CSS animations
Try this code with an Icon instead of a div. I'll add the codesandbox so you can try it out.
Updated Answer
Code with hover to allow tranisitions. With some tweaking you can fade in the Icon using css.
export default function App() {
const [isHovered, setIsHovered] = useState(false);
return (
<div className="App">
<div
className={`${isHovered ? "show" : "hide"}`}
onMouseOver={() => setIsHovered(false)}
>
Hover over me.
</div>
<div
className={`${isHovered ? "hide" : "show"}`}
onMouseOut={() => setIsHovered(true)}
>
I am shown when someone hovers over the div above.
</div>
</div>
);
}
css:
.hide {
display: none;
}
.show {
display: block;
background-color: red;
opacity: 0.6;
transition: 0.3s;
}
.show:hover {
transition: 0.3s;
opacity: 1;
-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
Updated sandbox
https://codesandbox.io/s/blazing-night-yii1zx?file=/src/styles.css:58-410
Old Answer
export default function App() {
const [isHovered, setIsHovered] = useState(false);
return (
<div>
{isHovered ? (
<h1 onMouseOut={() => setIsHovered(false)}>Hover true</h1>
) : (
<h1 onMouseOver={() => setIsHovered(true)}>Hover false</h1>
)}
</div>
);
}
Old sandbox
The codesandbox: https://codesandbox.io/s/dank-water-mbtwfw?file=/src/App.js:176-579
anyone please can help me figure it out how to make the 2 animations used in this website https://worldofwomen.art/ using react and tailwind css
First: the animated bar of this picture
second: the animated text : • NEW SITE LAUNCHING SOON
I am looking forward for the help from someone, i really passed the whole night searching of animation in react and tailwind css but i didn't find any tutorial about this.
Thank you so much for the help and the stop you put on my question
You can achieve the animation with just css (ie Tailwindcss) by using 'animation' css property
I- Create a nextjs project with the command: $npx create-next-app my-app
II- Setup tailwindcss with nextjs project: https://tailwindcss.com/docs/guides/nextjs
III- Create new React component animation.js, inside pages/ folder
import React from 'react'
export default function Animation2() {
return (
<>
{/* Image Animation */}
<div className="animate">
<img src="/frise-2.2f579f.png" alt="" />
<img src="/frise-2.2f579f.png" alt="" />
</div>
{/* Image Animation - Reversed direction */}
<div className="animate-reversed">
<img src="/frise-2.2f579f.png" alt="" />
<img src="/frise-2.2f579f.png" alt="" />
</div>
{/* Text Animation */}
<div className="bg-[#332970] w-screen box-border p-4 flex items-center overflow-hidden fixed bottom-0">
<div className="animate">
{
[0,1,2,3,4,5,6,7,8,9,10,11].map((i) => (
<div className="text-[#139bac] whitespace-nowrap inline-flex items-center justify-center">• NEW SITE LAUNCHING SOON </div>
))
}
</div>
</div>
</>
);
}
The first div responsible for the animation of the image with the default direction from right to left. I used 2 img tags because it has to have 2 separate sets of the same img tag. because with the infinite loop, when one image disappears the second one appears and it will restart the loop without any gap (You can comment the second img tag to check the gap am talking about)
the second div is similar to the first one but it has the reversed direction property.
For the text animation, we do the same thing we have to create the text multiple times to avoid the gap when we animate the text for an infinite loop. And to avoid multiple lines of the same tag: • NEW SITE LAUNCHING SOON I wrapped in an array and loop through it
all the styles are integrated in the same component using tailwindcss except the animation that will be added in globals.css file like this:
Go to globals.css file and add the animation css code:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.animate{
display: flex;
animation: scroll 20s linear infinite;
}
.animate:hover{
animation-play-state: paused;
}
.animate-reversed{
display: flex;
animation: scroll 20s linear infinite;
animation-direction: reverse;
}
.animate-reversed:hover{
animation-play-state: paused;
}
#keyframes scroll {
0%{
transform: translateX(0);
}
100%{
transform: translate(-50%);
}
}
}
There are a few ways to do this, but taking into account the site you referenced, I noticed that it works with an infinite increment, so it's most likely done with JS.
PS.: I could do everything with javascript.
const sleed1 = document.getElementById("sleed1");
let position1 = 0;
setInterval(() => {
position1 = position1 + 10;
sleed1.style.backgroundPosition = position1 + 'px';
sleed1.style.transitionDuration = '100ms';
}, 40)
#sleed1 {
width: 100%;
height: 200px;
background-color: #ccc;
background-image: url("https://i.stack.imgur.com/zJXIx.png");
}
<div id="sleed1" />
To control the speed you can change 3 values:
Number of pixels increased, I put 10.
The duration of the transition, I put '100ms'.
The setInterval interval, I put 40.
Both will influence speed but in different ways, so adjust until you find the best solution for you.
To change the sleed side, change "position + n" to "position-n".
Same code in React. Using "useEffect" with ",[ ]". Important not to forget this for the code to run only once and avoid undesirable effects.
https://codesandbox.io/s/slide-image-animation-with-react-and-css-rfhvd?file=/src/App.js
I have a troublesome task. Image should be hidden and button showed by default. I want to show image and hide button, but when one animation ends, secound should start. transition should peroid 1 second. How to make it?
All code:
https://jsfiddle.net/169vuuk8/
HTML code:
<div class="showSingle" itemprop="1">
<img src="https://img.thegearpage.net/board/data/avatars/m/47/47608.jpg?1487188345" alt="logo">
<button class="button">button </button>
</div>
Looks like you just need transition-delay css property for second animation: https://developer.mozilla.org/en/docs/Web/CSS/transition-delay
You can either use transitionend event in js, but it is not really needed here: https://developer.mozilla.org/en/docs/Web/Events/transitionend
Not sure what you need exactly but below the image fades in the first second and the button out after 2 seconds delay.
.showSingle img {
opacity: 0;
animation: fadeInImage 1s ease-out forwards;
}
.showSingle button {
opacity: 1;
animation: fadeOutButton 1s ease-out 2s forwards;}
#keyframes fadeInImage {
to {
opacity: 1
}
}
#keyframes fadeOutButton {
to {
opacity: 0
}
}
<div class="showSingle" itemprop="1">
<img src="https://img.thegearpage.net/board/data/avatars/m/47/47608.jpg?1487188345" alt="logo">
<button class="button">button </button>
</div>
I am using ngAnimate to animate entries in an ng-repeat. When loading the data all elements are animated as I have defined in my css:
.chat-message.notice.ng-enter {
-webkit-animation: rubberBand 1s;
-moz-animation: rubberBand 1s;
-ms-animation: rubberBand 1s;
animation: rubberBand 1s;
}
This works when a notice is appended with the following html:
<ul>
<li class="media chat-message pointer fade-animate"
ng-repeat-start="message in guestbook.messages track by $index"
ng-if="!message.bot">
<!-- more html -->
</li>
<li class="chat-message notice" ng-repeat-end ng-if="message.bot">
<div>
<p class="text-center">
{{ message.message }}
<small>({{ message.date | amTimeAgo }})</small>
<span class="close pull-right" ng-click="guestbook.remove(message)">×</span>
</p>
</div>
</li>
</ul>
However, when a new message is appended (at the top), every element is again animated. Is there a way that elements animate only once? That when a new message is appended to the array, only that element will animate?
JSFIDDLE
EDIT
After a few clicks on a 'new message', I can see not all notices are animated. Maybe it has something to do with the ng-repeat-start and ng-repeat-end?
If understood correctly just change this:
$scope.messages.unshift(message);
to this:
$scope.messages.push(message);
Even above answer fixed the problem, my solution might be helpful in other scenarios. The fix is pretty straightforward.
Use Angular varible $first and just add CSS class for the first element using ng-class directive in your HTML. In this example, class "first" will be added only to first element in ng-repeat:
ng-class="{'first': $first===true}"
and then apply animation rules to element with "first" CSS class
.chat-message.notice.first.ng-enter {
color:red !important;
font-weight:bold;
animation: rubberBand 1s;
}
Updated JSFIDDLE: http://jsfiddle.net/t6x3a1zj/7/
I have an input search that I am trying to get ease with a transition css3 effect.
Every time that the user focus on that input, on the right hand will appear a Cancel button which is actually an icon to clean the input. Once that icon appears the width of the input changes, I want to ease the movement of that input because as you know the movement or the transition by default is so rough, I have this JSbin for you to see what I am doing and what I have so far.
the situation begins here
<ion-header-bar>
<label>
<input type="text" class="btnCancel"
placeholder="Sports and leagues finder..."
ng-model="query"
ng-focus="isSearchFocused=true"
ng-blur="isSearchFocused=false">
<div ng-show="query" ng-click="query=''">
<i class="ion-close positive"></i>
</div> -->
</label>
<button ng-show="isSearchFocused"
ng-click="query = ''">
<i class="ion-close-circled"></i>
</button>
</ion-header-bar>
css
.btnCancel {
-webkit-transition : all 2s ease;
transition : all 2s ease;
}
this is with CodePen just in case