Color Shifting Light in the Aframe - aframe

I want to color shift light in the Aframe scene.
If I want to animate the intensity of the light I will add
animation__intensity=property: light.intensity; from: 0.5; to: 1; dur: 100; dir: alternate; loop: true;
So my idea was if I want to color shift the light I will do
animation__color=property: light.color; from: red; to: blue; dur: 100; dir: alternate; loop: true;
However, this method does not work. Does anyone have any idea how to solve this problem? Thank you.

The color property should be addressed as an rgb vector, like this:
animation="property: light.color; from:rgb(200, 70, 30); to:rgb(0, 30, 180); dur: 1500; loop:true; easings: easeInOutSine; dir: alternate; autoplay: true"
glitch here

Related

How can I animate from an alternating keyframe animation to a fixed value

Is it possible for an element that is being animated using keyframes to animate to a fixed value for that property? My use case is a draggable element whose scale is pulsing until clicked, but when clicked it should have a fixed size. I would like the element to animate to that new size.
This example uses styled-components.
const pulse = keyframes`
from {
transform: scale(1);
}
to {
transform: scale(1.05);
}
`
const AnimatedThing = styled(div)`
${({ isDragging }) =>
isDragging ?
'transform: scale(1.2);' :
`animation: ${pulse} 0.5s alternate infinite;`
}
`
As you can see in the code, when isDragging is true, scale is set to 1.2. Right now it just jumps to that value, but I want it to animate to that value.
I tried using css variables and animating those, and couldn't get that to work either. That code is a bit more complex but you can see it here
const pulse = keyframes`
from {
transform: scale(var(--pulse-start-scale));
}
to {
transform: scale(var(--pulse-end-scale))
}
`
const AnimatedGroup = styled(div)`
#property --pulse-start-scale {
syntax: '<number>';
inherits: false;
initial-value: 1;
}
#property --pulse-end-scale {
syntax: '<number>';
inherits: false;
initial-value: 1.05;
}
transition: --pulse-start-scale --pulse-end-scale 1s;
animation: ${pulse} 0.5s alternate infinite;
${({ $active }) =>
$active &&
`
--pulse-end-scale: 1.2;
--pulse-start-scale: 1.2;
`}
`

CSS End a keyframe looping animation and have it animate back to start

I have a looping animation that rotates a square. When I remove the class that enables the animation, the square instantly goes back to the starting position.
I need to be able to animate the square back to the starting position on a JS event.
Here is a codepen.
I have tried adding a transform to the element, and switching to another keyframe animation but neither worked.
html:
<div class="container">
<div class="animate rotating"></div>
</div>
css:
.container{
position: absolute;
width: 100%;
height: 100%;
background-color: #333;
}
.animate{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
transform: all 2s ease;
}
#keyframes rotating {
0%{transform: rotate(30deg);}
50%{transform: rotate(-30deg);}
100%{transform: rotate(30deg);}
}
.rotating {
animation: rotating 6s ease-in-out infinite forwards;
animation-delay: -2s;
}
jquery:
$('.animate').click(function(){
$(this).removeClass('rotating');
});
There is a little problem with your code:
transform: all 2s ease;
You mistyped transition, however I'm pretty sure this approach isn't going to work. If you're willing to accomplish this using jQuery you can get current rotation and apply to your element:
function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if(matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }
return (angle < 0) ? angle + 360 : angle;
}
$('.animate').click(function(){
var el = $(this);
var elRotate = getRotationDegrees(el);
el.css('transform',`rotate(${elRotate}deg)`);
el.removeClass('rotating');
// set new transform here
});
This will freeze your element rotation, you can set your desired rotation at the end and transition will be applied.

CSSTransitionGroup doesn't fade in

I am quite new to react and I am trying to build a react app. I want a login box to fade in on the page when the login in the navbar is clicked. In my App.js I set up the CSSTransitionGroup like this:
<CSSTransitionGroup
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
transitionAppear={true}
transitionAppearTimeout={500}
transitionName="fade">
{loginPopup}
</CSSTransitionGroup>
The login popup is shown based on state:
let loginPopup;
if (display_login) {
loginPopup = (<LoginPopup key={1} />)
}
Now the css I use for the transition looks like this:
//fade
.fade-appear {
opacity: 0.01;
}
.fade-appear-active {
opacity: 1;
transition: opacity 300ms ease-in;
}
.fade-leave {
opacity: 1;
}
.fade-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
My problem is...that the fadeout works as intended, but the fadein does not work. It just pops up (no transition).
I also tried using .fade-enter - But I figured that enter was wrong as the LoginPopup component is spawned based on state.
Any ideas why the fade in don't work?
Edit:
This is the gist of the code: https://gist.github.com/xenoxsis/6345eb6897aedf228662ffaf64f65053

How to prevent SVG arrow from being override

I made this simple SVG animation HERE , The code for drawing the dashed lines is below:
$(document).ready(function() {
var offset = parseInt($('#move-opacity').attr("offset"));
setInterval(function() {
$('#move-opacity').attr("offset", offset + "%");
if (offset < 100) {
$('#last-opacity').attr("offset", (offset + 1) + "%");
}
offset++;
}, 25);
/* code for secound line animation */
var offset1 = parseInt($('#move-opacity-1').attr('offset'));
setInterval(function() {
$('#move-opacity-1').attr("offset", offset + "%");
if (offset < 100) {
$('#last-opacity-1').attr("offset", (offset + 1) + "%");
}
offset++;
}, 25);
$("#lock").attr( "class" , "animated bounceInUp");
$("#quote-icon").attr( "class" , "animated bounceInUp delay-05s");
$("#lock").addClass("animated bounceInUp");
});
Now if you notice clearly even the arrow is overridden with a dashed arrow , once the line is drawn , how to prevent this from happening ?
The actual problem is because the polygon that produces the arrow head already has class='st0' which produces a yellow colored fill and the below code is also adding a yellow colored gradient as a stroke to the arrow head and thus you are ending up seeing both.
#dotted-lines-1 {
stroke: url(#yellow-gradient);
fill: none;
stroke-width:3;
stroke-miterlimit: 10;
stroke-dasharray:4.8732,2.9239;
}
#dotted-lines-2 {
stroke: url(#yellow-gradient);
fill: none !important;
stroke-width:3;
stroke-miterlimit: 10;
stroke-dasharray:4.8732,2.9239;
}
To overcome the issue, apply the yellow gradient only to the line and path elements within the g like in the below code block.
#dotted-lines-1 line, #dotted-lines-1 path {
stroke: url(#yellow-gradient);
fill: none;
stroke-width:3;
stroke-miterlimit: 10;
stroke-dasharray:4.8732,2.9239;
}
#dotted-lines-2 line, #dotted-lines-2 path {
stroke: url(#yellow-gradient);
fill: none !important;
stroke-width:3;
stroke-miterlimit: 10;
stroke-dasharray:4.8732,2.9239;
}
Fiddle Demo

SVG handwriting animation without using stroke properties

I'm trying to work on a SVG handwriting animation. I've already researched some tutorials but all them are using SVG stroke properties and it's not quite working for me, because in my situation the animation should be on the fill, not the stroke.
I've found things like that:
svg path {
fill: none;
stroke: #000;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1700;
stroke-dashoffset: 1700;
-webkit-animation: dash 5s linear forwards;
animation: dash 5s linear forwards;
}
#-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
Here's the SVG I'm working on: http://codepen.io/boyporreta/pen/BNewgG
Is there a way to create this animation using fill instead of stroke?
Thanks in advance.
I thought I'd have a go at Erik's suggested method. Combining the stroke animating technique from here with his suggestion to clip I came up with this
.pentip {
stroke-linecap:round;
stroke-linejoin:round;
fill:none;
stroke:#e21b1b;
stroke-width:15;
stroke-dasharray: 1454;
stroke-dashoffset: 1454;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 341.61432 138.25008">
<defs>
<clipPath id="svgTextPath">
<text x="10" y="94"
font-family='Pacifico'
font-size="95">Monkey</text>
</clipPath>
</defs>
<g clip-path="url(#svgTextPath)">
<path class="pentip" d="M7.6 39.8l17.5-22 5.6 5.7-3.4 52-3 17.2L46.5 30s9.2-13.3 15-11c10.2 4.2-1.3 74-1.3 74S82 16 93.6 19.6c20.2 6-6 64 6.3 67.4 12.2 3.4 21-15 21-15l6.4-16.2 15.2-1s-19.4 5.7-19.4 6.7l-1 21.5 10.7 6.3L144 73l-8-20.4L164.5 69l2-17.7L163 90l22-36.3-.2 33.5 20.2-8.4 3-42.7 14.3-28.5 8.5 4.5s-13 46.4-14.2 47.2c-1 .7-12 28-12 28l15.2-19.6s13.6-18 17.8-12.6c4.2 5.2-11.8 28.3-11.8 28.3s-1 5.8 8 5.5c8.8-.3 19.3-14.4 25.3-16.3 6-1.8 17.6-11.2 11.5-16.7-6-5.6-21.2-1-21 8 .3 9.3 0 24.7 11.3 24.7s21.3-3 23.6-10.7c2.4-8 9.5-28.3 7-25.7-2.3 2.7-11.7 15-8.8 24.7 3 9.7 9 16.6 16 10.3 7-6.3 17.3-35.4 14.7-33.6-2.6 1.8-12 61.6-12 61.6l-12.8 15.8-12-2.7s2-4 7.2-12.2c5.3-8 32-24 36-27.3 4-3 14.6-17.3 14.6-17.3"/>
</g>
</svg>
You'd obviously be a bit more careful with your stroke creation!
The svg engine doesn't know that the path fill in your example is handwriting, and there's no defined direction for the handwriting motion.
Calligraphy makes it a little harder to accomplish since there's no built-in support for variable stroke widths in svg. However, it might be passable to do a clip-path animation, using the animation code you quoted, but on a "crude copy" of the original path which has been converted to just a thick stroke, without fill. That clip-path can then be applied to the original path in your example to give an impression of the calligraphic stroke being drawn.
Another option is to not use a path, but to draw the whole thing with lots of small rectangles along the path. This implies using javascript instead of css animation.

Resources