We Keep Coding

Set transition for specific property in javascript doesn't work

I am using transition(0.3s) in CSS when hover some texts for changing the color, but I also used transition in Javascript for "translate" the text. My problem now is that, when I hover them, they don't use anymore the transition in CSS (0.3s) but what I set in javascript. I tried using element.style.transition = "translate 5.4s ease" or in css I set delay for specific property but in vain.How can i set the transition in Js only for translate? Thank you in advance
CSS
social-media-texts p {
position:relative;
color:white;
font-size:20px;
transition: opacity 0.3s;
transform: translate(-300%);
opacity: 0;
}
JavaScript
socialTexts.forEach((element) => {
element.style.opacity = "1";
element.style.transform = "translate(0)";
element.style.transition = 1.1 * countP + "s";
countP += 0.3;
});

It is because you are overwriting the previous transition property. You would need to expand it by adding a comma followed by your new transition (eg. transform 1.1s)
That would result in the following property: transition: opacity 0.3s, transform: 1.1s;
See section Change Several Property Values: https://www.w3schools.com/css/css3_transitions.asp

How to set animation state to finish

I've created a slider animation as demonstrated below:
#mixin progress {
#-webkit-keyframes interval {
from {
width: 0;
}
to {
width: 100%;
}
}
animation: var(--duration) linear 0s interval;
animation-play-state: var(--playState);
}
.slider-item {
#include progress;
}
When a click event fires my task is to make the current slider animation be completed.
I have tried to select the target element for example:
this.$refs[`slider-item-${id}`]
Nevertheless, the animation property is still empty, is there something that i'm missing here? or is there a better alternative for that? (i have tried the API https://developer.mozilla.org/en-US/docs/Web/API/Element/animate without success)

Try to replace
animation: var(--duration) linear 0s interval;
with
animation: var(--duration) linear 10ms forwards;
to see the animation end as the last state remaining on your page.

CSS animation overwriting Greensock tweens

I have a GSAP TweenMax timeline where im selecting the SVG polygon with id #plane and animating it using timeline. If however I put in the css '#plane{animation: fly-plane 2s 0s 20 alternate ease-in-out forwards;}' then the css overrides and turns off the GSAP animation completely. Is this normal? I haven't found other posts about this so I'm guessing not?
var plane = document.querySelector("#plane"),
tl = new TimelineMax({ repeat: -1 });
tl.to(plane, 1, { xPercent: 50, width: 200, autoAlpha: 0.5 });
#keyframes fly-plane {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(100px);
}
}
#plane {
animation: fly-plane 2s 0s 20 alternate ease-in-out forwards;
}
It has the same behaviour with classes btw

Yep, that sounds pretty normal - you're telling CSS to animate to completely different values than GSAP on the same property (transform) of the same element. So they're fighting for control. I'm confused about what you expected to happen.
The width and opacity should still be controlled by GSAP, though, since you're only causing a fight with "transform" :)
If you need any more help, the best place is probably the dedicated forums at https://greensock.com/forums/
Happy tweening!

Dynamically set css transform before transition

I am trying to simulate a mouse animation. I would like to dynamically set the position, then move it with a css transition. So far I am able to get a program that moves the mouse. However, I am having trouble setting the initial position dynamically with javascript. My code looks like this:
Here is the CSS
.cursorDiv {
width: 30px;
height: 30px;
transform: translate(0px,0px);
transition: 2s ease;
}
.cursorDivMoved {
transform: translate(100px,200px);
}
Here is the javascript:
var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.src="https://cdn2.iconfinder.com/data/icons/windows-8-metro- style/512/cursor.png";
document.body.appendChild(cursorDiv);
setTimeout(function() {
$(".cursorDiv").toggleClass("cursorDivMoved");
}, 1000);
//cursorDiv.style.transform="translate(100px,50px)";
When I run this it works fine. However, when I try to change the initial position with javascript (uncomment last line), then the transition doesn't occur anymore.
Here is a Demo:
https://jsfiddle.net/fmt1rbsy/5/

If you programmatically set the style.transform property directly on your element (which you need if you want to move it to an arbitrary position through JS), it will override any transform specified in classes. Hence adding "cursorDivMoved" class later on does not transform (translate / move) it.
You have to continue moving it by specifying its style.transform property, or simply remove it: cursorDiv.style.transform = null
Demo: https://jsfiddle.net/fmt1rbsy/9/
You may also want to have the very first translate being transitioned. In that case, you have to wait for the browser to make an initial layout with your element at its start position, otherwise it will see no transition (it will see it directly after the transform is applied, i.e. at its final position). You can either:
Use a small (but non zero) setTimeout to give some time for the browser to do its initial layout.
Force a browser layout by trying to access some property that require the browser to compute the page layout (e.g. document.body.offsetWidth).
Use 2 nested requestAnimationFrame's before applying your transform.
Demo: https://jsfiddle.net/fmt1rbsy/8/

Is this what you are looking for? Tell me if it can be improved. Open your console and change the class name to cursorDivMoved.
var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.id = 'cursorDiv';
cursorDiv.src = "https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/cursor.png";
document.body.appendChild(cursorDiv);
#cursorDiv {
width:30px;
height:30px;
-o-transition: 2s ease;
-moz-transition: 2s ease;
-webkit-transition: 2s ease;
-ms-transition: 2s ease;
transition: 2s ease;
}
.cursorDivMoved {
-o-transform:translate(100px, 200px);
-moz-transform:translate(100px, 200px);
-webkit-transform:translate(100px, 200px);
-ms-transform:translate(100px, 200px);
transform:translate(100px, 200px);
}

You can define initial postion (x,y), and then when user click the position will increase and set to the 'cursorDiv', such as:
var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/cursor.png";
document.body.appendChild(cursorDiv);
var x = 100, y = 50;
setTimeout(function() {
cursorDiv.style.transform="translate(100px,50px)";
}, 1000);
$(document).click(function () {
x+= 20;
y += 50;
var str = "translate(" + x + "px," + y + "px)";
cursorDiv.style.transform=str;
});
Here is Demo

CSS3 Smooth transition when dynamically changing animations

I have two keyframe animations "Bounce-In" and "Bounce-Out" the Bounce-In animation takes 1.2 seconds to complete, but if a user triggers the Bounce-Out function before it's finished it will jump to 100% scale and doesn't gracefully scale out from it's current animation position.
Is this possible with keyframe animations? I've seen it done with transition property but not using scale().
#-webkit-keyframes Bounce-In
{
0% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
60% { -webkit-transform: scale(0.7) }
80% { -webkit-transform: scale(1.0) }
90% { -webkit-transform: scale(0.9) }
100% { -webkit-transform: scale(1.0) }
}
#-webkit-keyframes Bounce-Out
{
0% { -webkit-transform: scale(1.0) }
40% { -webkit-transform: scale(0.1) }
60% { -webkit-transform: scale(0.4) }
80% { -webkit-transform: scale(0.1) }
90% { -webkit-transform: scale(0.2) }
100% { -webkit-transform: scale(0) }
}
I have a demo on JSFiddle: http://jsfiddle.net/Vn3bM/98/
*if you click the "Games" circle before the animation is finished you will notice the other two jump to 100% and then animate out (that's what I'm trying to make smooth).
I even tried removing the 0% keyframe from Bounce-Out and that didn't help...

In your case, the "jump" you notice in your animation comes from the change of animations you have installed on onmouseup. The "Bounce-Out" Animation has an initial scale of 1 (first Keyframe), and this is what the two circles immediately get set to when the animation is installed.
There are two solutions to this, which I can explain in some detail:
The Easy Way
You could just wait for the initial animation to end via the 'webkitAnimationEnd' Event and install the onmouseup event with a recursive function waiting for the animation to finish:
var initAnimationEnded = false;
document.getElementById('sports').addEventListener('webkitAnimationEnd', function() {
initAnimationEnded = true;
}, false);​
And here's the onmouseup handler:
document.getElementById('games').onmouseup = function() {
function bounceOut() {
if (initAnimationEnded) {
events.style.webkitAnimationName = "Bounce-Out";
sports.style.webkitAnimationDelay = "0.2s";
sports.style.webkitAnimationName = "Bounce-Out";
} else {
setTimeout(bounceOut, 20);
}
}
bounceOut();
}
I installed a jsfiddle here so you can see it working. The Bounce Out animation is only triggered after the animation finished, nothing unusual about that.
The Hard Way
You can pause the animation and parse the current values of the transformation, then install a temporary keyframe animation to bounce out. This gets much more verbose though:
First, you have to stop the animations:
events.style.webkitAnimationPlayState = "paused";
sports.style.webkitAnimationPlayState = "paused";
Then, you set up a helper to insert new css rules:
var addCssRule = function(rule) {
var style = document.createElement('style');
style.innerHTML = rule;
document.head.appendChild(style);
}
Then create the css keyframe rules on the fly and insert them:
// get the current transform scale of sports and events
function getCurrentScaleValue(elem) {
return document.defaultView.
getComputedStyle(elem, null).
getPropertyValue('-webkit-transform').
match(/matrix\(([\d.]+)/)[1];
}
var currentSportsScale = getCurrentScaleValue(sports);
var currentEventsScale = getCurrentScaleValue(events);
// set up the first string for the keyframes rule
var sportsTempAnimation = ['#-webkit-keyframes Sports-Temp-Bounce-Out {'];
var eventsTempAnimation = ['#-webkit-keyframes Events-Temp-Bounce-Out {'];
// basic bounce out animation
var bounceOutAnimationBase = {
'0%': 1,
'40%': 0.1,
'60%': 0.4,
'80%': 0.1,
'90%': 0.2,
'100%': 0
};
// scale the animation to the current values
for (prop in bounceOutAnimationBase) {
sportsTempAnimation.push([
prop, '
{ -webkit-transform: scale(',
currentSportsScale * bounceOutAnimationBase[prop],
') } '].join(''));
eventsTempAnimation.push([
prop,
' { -webkit-transform: scale(',
currentEventsScale * bounceOutAnimationBase[prop],
') } '
].join(''));
}
// add closing brackets
sportsTempAnimation.push('}');
eventsTempAnimation.push('}');
// add the animations to the rules
addCssRule([sportsTempAnimation.join(''),
eventsTempAnimation.join('')].join(' '));
Then, you restart the animations with these rules:
events.style.webkitAnimationName = "Events-Temp-Bounce-Out";
events.style.webkitAnimationDelay = "0s";
sports.style.webkitAnimationDelay = "0s";
sports.style.webkitAnimationName = "Sports-Temp-Bounce-Out";
events.style.webkitAnimationPlayState = "running";
sports.style.webkitAnimationPlayState = "running";
Et voilà. I made a jsfiddle here so you can play around with it.
More Sugar
In your example, the circles bounce out alternating in bounce. You can easily get this back to work with the second solution by using setTimeout for all sports circle animations. I did not want to include it here because it would unnecessarily complicate the example code.
I know the provided examples are not really DRY, you could for example make all the stuff for events and sports work with half the lines of code (with meta properties), but in terms of readability, I think this example serves well.
To have this example working in all browsers with support for css3 animations, you need to normalize the transition properties. To do this in javascript, have a look here The Example works for animations and other properties as well, just replace 'transition' with the property you want
For a further read on modifying css3 animations on the fly, I found this post very useful, have a look at it as well.