Develop Reference

Text Animation Flickering Problem in CSS and React

I managed to achieve this animation through CSS animations and React. but go stuck in flickering problem. I don't know why this is happening maybe 'cause I used setInterval or there is some problem with my css animations keyframes. help me to solve this problem. the flicker only occurs after some time. and after refreshing the page the animation works perfectly fine without flicker problem.
this is how the animation looks after refreshing the page and this is what I want too. (ignore the screen recorder watermark).
animation I want
but after sometime the animation starts flickering like this.
Flickering problem
here are the code snippets I wrote
jsx snippet
<div className="relative w-[280px] md:w-[350px] lg:w-[500px]">
<span>{"[ "}</span>
<p className="text_animate ml-2">
{dev ? "for" : "by"} Developers
</p>
<span className="absolute right-0 ">{" ]"}</span>
</div>
css snippet
.text_animate {
color: orange;
margin: 0 auto;
display: inline-block;
position: relative;
letter-spacing: .15em;
text-align: start;
animation: text-up 6s linear infinite;
cursor: none;
}
#keyframes text-up {
0% {
top:45px;
opacity: 0;
}
20% {
top:0;
opacity: 1;
}
35% {
top: 0;
opacity: 1;
}
50% {
top: -45px;
opacity: 0;
}
52% {
top: 45px;
opacity: 0;
}
70% {
top: 0;
opacity: 1;
}
85% {
top: 0;
opacity: 1;
}
100% {
top: -45px;
opacity: 0;
}
}
useState changing text
const [dev, setDev] = useState(true);
setInterval(() => {
setDev(!dev);
}, 3000);
If there is any better way to achieve this I would really love to learn so let me know that too.

Maybe you should put setInterval to useEffect, and remember to clear timer. Like this:
useEffect(() => {
const timer = setInterval(() => {
setDev(!dev);
}, 3000);
return () => {
clearInterval(timer);
}
}, []);
And there is a solution only using css to implement this, I will write a demo later.
EDIT:
Explain the above code:
useEffect with [] as second param will make sure run setInterval once when mount the component.
The clearInterval in return function will make sure engine GC the variables in setInterval callback functions when unmount the component, or the setInterval will still work even though you needn't it.
CSS only solution:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
margin: 0;
padding: 0;
}
.scroll-container {
overflow: hidden;
height: calc(var(--line-h) * 1px);
line-height: calc(var(--line-h) * 1px);
font-size: 18px;
}
.scroll-container ul {
animation-name: move;
animation-duration: calc(var(--speed) * var(--lines));
animation-timing-function: steps(var(--lines));
animation-iteration-count: infinite;
}
.scroll-container ul li {
animation-name: li-move;
animation-duration: var(--speed);
animation-iteration-count: infinite;
}
#keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, calc(var(--lines) * var(--line-h) * -1px));
}
}
#keyframes li-move {
0% {
transform: translate(0, 0);
}
50%,
100% {
transform: translate(0, calc(var(--line-h) * -1px));
}
}
<div
class="scroll-container"
style="--lines: 2; --line-h: 26; --speed: 3s"
>
<ul>
<li>For Developers</li>
<li>By Developers</li>
<!-- repeat first in tail for infinity -->
<li>For Developers</li>
</ul>
</div>
I leaned this from Chokcoco on CodePen but forget which post.

Image won't stay visible for hover effect

Hello and thank you in advance for reading my question.
GOAL: Set image so that once it's scrolled into view it transitions smoothly into a set position - but still reacts to :hover. Using #keyframes and a little JavaScript, I set the image to opacity: 0 and it's final opacity to opacity: .85. Then I added a hover effect in CSS to make it's opacity: 1
The issue is once it's finished with it's transition - it disappears - reverting to it's original opacity which is zero. I managed to make it freeze at .85 with animation-fill-mode: forwards, rather than animation-fill-mode: none, but then it won't respond to :hover
And here's a test snippet of the problem in action:
let observer_img = new IntersectionObserver(updates => {
updates.forEach(update => {
if (update.isIntersecting) {
update.target.classList.add('shift_frame_center_img');
} else {
update.target.classList.remove('shift_frame_center_img');
}
});
}, { threshold: 0 });
[...document.querySelectorAll('.features-img-wrapper img')].forEach(element => observer_img.observe(element));
body {
width: 100%;
height: 100vh;
background-color: lightgrey;
}
/* CHILD */
.features-img-wrapper img {
width: 10rem;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
opacity: 0;
transition: all .5s;
}
/* APPEND-CHILD */
.shift_frame_center_img {
animation: center_img 1s 0.5s none;
}
/* CHILD ON HOVER */
.features-img-wrapper img:hover {
opacity: 1;
transform: scale(1.035);
}
/* KEYFRAMES */
#keyframes center_img {
0% {
transform: translateY(20rem);
}
100% {
transform: translateY(0);
opacity: .85;
}
}
<body>
<div class="features-img-wrapper">
<img src="https://synapse.it/wp-content/uploads/2020/12/test.png">
</div>
</body>
If I could get a hand with this that would be wonderful, I'm a bit of a beginner and have already spent a few hours on this, all feedback welcome. Thank you very much.

Solution 1
To understand why the hover effect was not working with the animation-fill-mode: forwards, read this answer.
You can fix that by adding !important property to the hover styles:
.features-img-wrapper img:hover {
opacity: 1 !important;
transform: scale(1.035) !important;
}
The problem, in this case, is that the transition will not work for hover.
Solution 2
You could remove the animation entirely and add the final state styles to the shift_frame_center_img class.
But you would still need to use the !important property because of the CSS Specificity.
let observer_img = new IntersectionObserver(updates => {
updates.forEach(update => {
if (update.isIntersecting) {
update.target.classList.add('shift_frame_center_img');
} else {
update.target.classList.remove('shift_frame_center_img');
}
});
}, { threshold: 0 });
[...document.querySelectorAll('.features-img-wrapper img')].forEach(element => observer_img.observe(element));
body {
width: 100%;
height: 100vh;
background-color: lightgrey;
}
/* CHILD */
.features-img-wrapper img {
width: 10rem;
transform: translateY(20rem);
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
opacity: 0;
transition: all .5s;
}
/* APPEND-CHILD */
.shift_frame_center_img {
transform: none !important;
opacity: .85 !important;
}
/* CHILD ON HOVER */
.features-img-wrapper img:hover {
opacity: 1 !important;
transform: scale(1.035) !important;
}
<body>
<div class="features-img-wrapper">
<img src="https://synapse.it/wp-content/uploads/2020/12/test.png">
</div>
</body>

This snippet removes the need for fill-mode forwards by setting the img to have opacity 1 as its initial state so it will revert to that at the end of the animation.
The animation itself is altered to take 1.5s rather than 1s with the first third simply setting the img opacity to 0 so it can't be seen. This gives the delay effect.
let observer_img = new IntersectionObserver(updates => {
updates.forEach(update => {
if (update.isIntersecting) {
update.target.classList.add('shift_frame_center_img');
} else {
update.target.classList.remove('shift_frame_center_img');
}
});
}, { threshold: 0 });
[...document.querySelectorAll('.features-img-wrapper img')].forEach(element => observer_img.observe(element));
body {
width: 100%;
height: 100vh;
background-color: lightgrey;
}
/* CHILD */
.features-img-wrapper img {
width: 10rem;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
opacity: 0;
transition: all .5s;
opacity: 1;
}
/* APPEND-CHILD */
.features-img-wrapper img {
animation: center_img 1.5s 0s none;
}
/* CHILD ON HOVER */
.shift_frame_center_img:hover {
opacity: 1;
transform: translateY(0) scale(1.035);
}
/* KEYFRAMES */
#keyframes center_img {
0% {
transform: translateY(20rem) scale(1);
opacity: 0;
}
33.33% {
transform: translateY(20rem) scale(1);
opacity: 0;
}
100% {
transform: translateY(0) scale(1);
opacity: .85;
}
}
<body>
<div class="features-img-wrapper">
<img src="https://synapse.it/wp-content/uploads/2020/12/test.png">
</div>
</body>
Note: as each transform setting will reset anything that isn't included both tranlateY and scale are included in each setting.
Outside the SO snippet system it was possible to leave the animation settings untouched by chaining another animation to the front which ran for 0.5s and just set the img to opacity: 0. This did not work in the snippet system (it got into a loop of flashing on and off) hence the introduction of one but extended animation.

Javascript / jQuery "Dangle" animation

I would like to create an animation in jQuery or preferable pure javascript that makes a div "dangle". I have attached an animated gif that shows the animation. I don't know how recreate this, if it is something I can use an existing jquery easing / animation for or javascript + css animation or how. I also thought about canvas, but that would limit my ability to manipulate content etc.
RESULT:
Thanks to #peirix for helping me out with the CSS animation. Here is the result I was hoping to achieve. http://jsfiddle.net/zeg61pb7/7/
CSS
#box {
width:30px;
height:30px;
position:absolute;
top:100px;
left:100px;
text-indent: 90px;
background-color:#aaaaaa;
transform-origin: top center;
-webkit-transform-origin: top center;
-webkit-animation: dangle 2s infinite;
-webkit-border-top-left-radius: 50%;
-webkit-border-top-right-radius: 50%;
-moz-border-radius-topleft: 50%;
-moz-border-radius-topright: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
#box:after {
position: absolute;
height: 5px;
width: 5px;
background: #aaaaaa;
top: -4px;
left: 12px;
content: '';
border-radius: 50%;
}
.dims {
position: absolute;
height: 10px;
width: 10px;
background: #aaaaaa;
top: 125px;
left: 110px;
border-radius: 50%;
-webkit-animation: movee 2s infinite;
}
#-webkit-keyframes dangle {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(30deg); }
10% { -webkit-transform: rotate(-28deg); }
15% { -webkit-transform: rotate(26deg); }
20% { -webkit-transform: rotate(-24deg); }
25% { -webkit-transform: rotate(22deg); }
30% { -webkit-transform: rotate(-20deg); }
35% { -webkit-transform: rotate(18deg); }
40% { -webkit-transform: rotate(-16deg); }
45% { -webkit-transform: rotate(12deg); }
50% { -webkit-transform: rotate(-10deg); }
55% { -webkit-transform: rotate(8deg); }
60% { -webkit-transform: rotate(-6deg); }
65% { -webkit-transform: rotate(0deg); }
}
#-webkit-keyframes movee {
9% { left: 110px; }
10% { left: 120px; }
15% { left: 100px; }
20% { left: 114px; }
25% { left: 106px; }
30% { left: 113px; }
35% { left: 107px; }
40% { left: 111px; }
45% { left: 109px; }
50% { left: 110px; }
}

Well. You don't really need javascript for that. All you need is some CSS love. I made a quick fiddle to show the basics. Just play around with the numbers a bit to get what you want.
http://jsfiddle.net/zeg61pb7/3/
One note, though. Keyframes is still in need of -prefix for webkit browsers (chrome, safari, safari on ios, android etc), so you need to write it once with, and once without the prefix to hit all browsers. (Even IE10 and IE11 supports this)

You can have a try with css3.
Here is an interesting demo in Github.
Hope it helps you.

Indeed CSS3 can work some magic here, but you would still need Javascript to start and stop the animations, on hover or click events, for example.
I've made a small JSFiddle. Try and hover the red box. I've used webkit-prefixes, but you should be able to switch that easily with moz or ms.
The key differences to other suggestions here are
use animation-iteration-count: 1 to make it dangle once and then stop.
use $.on('<prefix>animationStop') to remove the animation class. this hack is needed to restart the animation later on.

I created a Fiddle with an example of how it can be done.
It depends on the transit-Plugin for jQuery.
var count = 0;
var deg = 45;
var minus = 5;
var interval = setInterval(function(){
$ $('#box').transition({
rotate: deg + 'deg',
transformOrigin: 'center top'
}).transition({
rotate: '-'+deg+'deg',
transformOrigin: 'center top'
});
if(count === 5){
clearInterval(interval);
$('#box').transition({ rotate: '0deg' })
}
if(deg > 10){
deg = deg-(minus+5);
}
count++;
}, 300);
A big plus is, that you can chain different transitions and transforms to your element.
But it`s an additional Plugin which must be loaded.

Highlight element using jQuery with scaled transparent element

I'm trying to create the following effect for any element using only jQuery/plugins:
In particular it should use a transform for the scale rather than width and height animation and be usable on any DOM element.
Is there a plugin available for jQuery which will achieve this effect? It should be quite simple: duplicate the dom object with clone(), reposition the clone over the original absolutely then animate a scale transform and opacity on the new element. However, I suspect it's not as simple as this.
Any ideas?

You don't need jQuery to accomplish that animation. You can use CSS3 animations and transform properties. Check out the following example I created:
http://jsbin.com/purik/1/
HTML:
<div class="logos">
<div class="logo"></div>
<div class="logo animated"></div>
</div>
CSS:
.logos {
position: relative;
}
.logo {
width: 100px;
height: 70px;
background: #CC0000 url(http://www.w3schools.com/images/w3logo.png) 50% 50% no-repeat;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.logo.animated {
position: absolute;
left: 0;
top: 0;
animation: scale-fadeout 2s infinite;
-webkit-animation: scale-fadeout 2s infinite;
}
#keyframes scale-fadeout {
0% {
transform: scale(1);
opacity: 1;
}
5% {
opacity: 1;
transform: scale(1.05);
}
100% {
opacity: 0;
transform: scale(1.35);
}
}
#-webkit-keyframes scale-fadeout {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
5% {
opacity: 1;
-webkit-transform: scale(1.05);
}
100% {
opacity: 0;
-webkit-transform: scale(1.35);
}
}

This works if the parent element is position: relative, and the element itself is position: absolute.
Clones the element and then animates it to change the size, change the values of left and top, and the set opacity: 0.
Fiddle: http://jsfiddle.net/Ej38P/1/

CSS3 page loading effect trigger by jquery

Hi friends I am trying to make CSS3 animation which will be trigger by jquery. Ie when the user submit some form I need to display animation (css3) for some duration and redirect it to the next page.
CSS3 animation:
.circle {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid rgba(0,0,0,0);
border-right: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
}
#-moz-keyframes spinPulse {
0% {
-moz-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-moz-transform: rotate(145deg);
opacity: 1;
}
100% {
-moz-transform: rotate(-320deg);
opacity: 0;
};
}
#-moz-keyframes spinoffPulse {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
};
}
#-webkit-keyframes spinPulse {
0% {
-webkit-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-webkit-transform: rotate(145deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(-320deg);
opacity: 0;
};
}
#-webkit-keyframes spinoffPulse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
};
}
This is html
<div class="circle"></div>
<div class="circle1"></div>
<button class="next" name="submit" id = "submit"></button>
Now when I user click on I need to display this effect for a fraction of time (some thing like alert box I mean while this animation is playing user shouldnt be able to do anything in the rest of the page)

Usually you make the page inaccessible by covering it with an element - an "overlay".
HTML:
<div class="loadingOverlay">
<div class="circle"></div> <!-- it makes sense to put these inside -->
<div class="circle1"></div>
</div>
CSS:
.loadingOverlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
To activate it when the user clicks the submit button, just make it "hidden" by default. And when the user clicks the button, make it "visible". In it's most basic form:
$('#submit').on('click', function () {
$loadingOverlay.css('display', 'block');
});
and the extra needed CSS:
.loadingOverlay {
/* ... */
display: none;
}
On the example I provide below you won't see the animation. The next page, by being blank, just loads too quickly. But you will see it on a "real" website situation.
Here's the live example: http://jsfiddle.net/9H7wf/2/
EDIT:
Max Boll suggested having the "loading effect" happening on the "new" page. It makes sense. But while a new page is being fetched, the "old" one still remains visible until a few key "http" things happen. See http://www.stevesouders.com/blog/2012/12/03/the-perception-of-speed/
So, it does make sense to have it on the "old" page.

I'd suggest you to use jQuery for this.
By default you could display your animation as an overlay (as JOPLOmacedo said).
Then you add the following to your javascript:
$(document).ready(function() {
$('.loadingOverlay').fadeOut();
});
This will show the loading overlay as long as the site needs to load (which you actually wanna show by that loading animation). Once the page is loaded, this javascript will fade it out.
My solution is based on JOPLOmacedo's answer.
EDIT
I just saw your new comment. To show it on button click, you can do it like this:
$(document).ready(function() {
$('.button').click(function() {
$('.loadingOverlay').fadeIn();
});
});
Inside of the click event function you could start an interval to fade it out again after X seconds.

Hi Friends I found a solution to this one Thanx #JOPLOmacedo for helping me to fix this one
$function(){
$('#submit').click(function(){
$('.loadingOverlay').css('display', 'block');
function complete() {
$('.loadingOverlay').css('display', 'none');
}
$('.circle').hide().fadeIn(1000,complete);
$('.cirlce1').hide().fadeIn(1000,complete);
});
}