We Keep Coding

Using ScrollReveal to animate in parts of SVG

I'm using the ScrollReveal library to animate in sections of my site.
I have a pretty complex vector which contains five groups. I'm trying to animate these five groups in separately using this library.
Here is my approach currently:
My SVG is a bit lengthy and Stack has a body count character limit, so I created a demo using JSFiddle here.
Each group has a class and as you can see from the demo, it initially loads, then disappears. None of the reveal effects are working? I have other divs with the same parameters which work, but it doesn't work with this SVG for some reason?
If we inspect the white space, I can see that the parts are not appearing because the opacity is 0. But, on scroll, this opacity isn't changing and I don't want to force opacity to 1 via CSS as this I want the part to fade in nicely, whereas setting it to 1 will just make it a static image.

I encountered this same issue. I could not figure out how to get the opacity to work using ScrollReveal directly, so I ended up using ScrollReveal to detect the scroll position and then trigger a callback function to toggle the class. It doesn't require much CSS, but it does require a little bit.
Here's a generic version of my code as an example:
#ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
svg {
.class-one {
opacity: 0;
transition: opacity 8000ms #ease-out-expo;
&.visible {
opacity: 1;
}
}
.class-two {
opacity: 0;
transition: opacity 8000ms #ease-out-expo;
&.visible {
opacity: 1;
}
}
.class-three {
opacity: 0;
transition: opacity 8000ms #ease-out-expo;
&.visible {
opacity: 1;
}
}
}
(function($) {
// Reveal the block
ScrollReveal().reveal(".container", {beforeReveal: showGraphic, viewFactor: 0.3});
// Define the showGraphic function
function showGraphic() {
$(".container svg .class-one").addClass( "visible" );
setTimeout(function() {
$(".container svg .class-two").addClass( "visible" );
}, 1800);
setTimeout(function() {
$(".container svg .class-three").addClass( "visible" );
}, 3600);
}
}(jQuery))

Reset transform: rotate() without invoking -webkit-transition: style

I am drawing a wheel on a canvas, rotating it and then wanting to reset the rotation to 0. however due to the css property: -webkit-transition: -webkit-transform 15s ease; when resetting the rotation, it is rotation from r -> 0 and taking 15 seconds. Is there a way to reset the rotation without invoking the transform 15s ease?
I am redrawing data on the canvas after the rotation transform has finished thus needing an instant reset.
Many thanks
var r=-(3600 + random);
$("#wheel").css("transform","rotate("+r+"deg)");
$("#wheel").css("-moz-transform","rotate("+r+"deg)");
$("#wheel").css("-webkit-transform","rotate("+r+"deg)");
$("#wheel").css("-o-transform","rotate("+r+"deg)");
$("#wheel").one('webkitTransitionEnd', function() {
$("#wheel").css("transform","none");
$("#wheel").css("-moz-transform","none");
$("#wheel").css("-webkit-transform","none");
$("#wheel").css("-o-transform","none");
});

I think I have a solution for this. By changing the css class to a 'default rotation' class briefly before changing the class to your animated rotation class you can control the animation timing on each separate class in order to have the wheel snap back to the starting position before rotating to your new position.
css:
.spin0 {
transform: rotate(0deg);
}
.spin750 {
transform: rotate(750deg) !important;
transition-duration: 2.5s !important;
}
js (on click):
element.className = "spin0";
setTimeout(function(){
element.className = "spin750";
}, 10);

Issues with dynamic animations

I am creating an object which has 2 properties:
animationName - an array with the names of pre-made #keyfame animations
&
animate - a function which accepts a target, animation name, duration and timing function
I have the animate function checking that atleast one of the selected
targets exist and I am also making sure that the animation name
matches one of the indexes in animationName.
If I manually enter the style attribute and animation information, it works as I would expect, however, I cannot seem to get the code to work in the JS!
I have tried different things such as .prop() but I am pretty sure .attr() is right.
Here is the JS:
var animateElement = {
//put in our animations that we know exist
animationName: ["bounce", "shake"],
//set up an animate renderer
animate: function(target, animationName, duration, timingFunction) {
//cache the known animations in an easy to use variable
var selectedAnim = this.animationName;
//query the target to make sure it exists
var el = document.querySelectorAll(target);
//make sure atleast one of the targets exist
if (el.length != -1) {
//check if the parameter animation is equal to one of our available animations
if ($.inArray(animationName, selectedAnim) != -1) {
//if the animation exists, change the style attribute of the target element to run the animation
el.attr("style", "animation:" + animationName + " " + duration + " " + timingFunction);
} else {
//otherwise alert that the selected animation is invalid (doesn't match our array of known animations)
alert("invalid animation selected");
}
}
},
}
animateElement.animate("button", "shake", "0.25s", "infinite");
SASS:
#-webkit-keyframes shake
0%
transform: translateX(0)
25%
transform: translateX(-25px)
50%
transform: translateX(0)
75%
transform: translateX(25px)
100%
transform: translateX(0)
#keyframes shake
0%
transform: translateX(0)
25%
transform: translateX(-25px)
50%
transform: translateX(0)
75%
transform: translateX(25px)
100%
transform: translateX(0)
#-webkit-keyframes bounce
0%
transform: translateY(0)
25%
transform: translateY(-25px)
50%
transform: translateY(0)
75%
transform: translateY(25px)
100%
transform: translateY(0)
#keyframes bounce
0%
transform: translateY(0)
25%
transform: translateY(-25px)
50%
transform: translateY(0)
75%
transform: translateY(25px)
100%
transform: translateY(0)

There are two issues with your code which is preventing it from working properly and they are as follows:
document.querySelectorAll returns a nodelist and so you can't directly set attributes. You either have to loop through the returned nodes (or) assign the attributes to one single item in the node list using [x].
.attr() is a jQuery method but the el is not a jQuery object. You need to use the vanilla JS equivalent which is .setAttribute.
If you want to test by applying the animation property (through style attribute) for one node then use the below code and it will apply the property to only the first node returned.
el[0].setAttribute("style", "-webkit-animation:" + animationName + " " + duration + " " + timingFunction);
For your actual scenario, traverse through all nodes returned by using a for loop like below and then assign the animation property:
for (var i = 0; i < el.length; i++) {
el[i].setAttribute("style", "animation:" + animationName + " " + duration + " " + timingFunction);
}
Below is a sample snippet with a random animation effect added. I had included the prefix library in the snippet only for supporting the older browsers (I am using one :D).
var animateElement = {
//put in our animations that we know exist
animationName: ["bounce", "shake"],
//set up an animate renderer
animate: function(target, animationName, duration, timingFunction) {
//cache the known animations in an easy to use variable
var selectedAnim = this.animationName;
//query the target to make sure it exists
var el = document.querySelectorAll(target);
//make sure atleast one of the targets exist
if (el.length != -1) {
//check if the parameter animation is equal to one of our available animations
if ($.inArray(animationName, selectedAnim) != -1) {
//if the animation exists, change the style attribute of the target element to run the animation
el[0].setAttribute("style", "animation:" + animationName + " " + duration + " " + timingFunction);
} else {
//otherwise alert that the selected animation is invalid (doesn't match our array of known animations)
alert("invalid animation selected");
}
}
},
}
animateElement.animate("div", "shake", "0.25s", "infinite");
#keyframes shake {
from {
transform: translateX(200px);
}
to {
transform: translateX(0px);
}
}
div {
height: 200px;
width: 200px;
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Some content</div>

CSS fade out multiple times

I'm making a website which will let you update an SQL table, and I want to add some sort of feedback when a button is clicked. I have made an invisible button (opacity=0) which lies to the right of each row as a status. I made this JS fade() function to set the opacity to 1, then slowly bring it back to 0, so a message pops up then fades away.
function fade () {
var invis = document.getElementById("invis".concat(num.toString()));
if(invis.style.opacity > .990) {
invis.style.opacity = (invis.style.opacity) - .001;
setTimeout(fade, 50);
} else if(invis.style.opacity > 0) {
invis.style.opacity = (invis.style.opacity) - .05;
setTimeout(fade, 50);
}
}
The trouble is, since webpages are single-threaded, any other action will interrupt the animation and leave behind a half-faded status. So that's no good. So now I am trying to set up the invisible buttons to change class when a new row is updated. The new class looks like this:
.invisible_anim {
...
opacity: 0;
animation:trans 3000ms;
}
#keyframes trans {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
This works fine, except it only works once. From here I cannot get the animation to play a second time. I have tried changing the class back to "invisible" then "invisible_anim" with no luck. I also can't use JQuery or Webkit. I'm wondering if there's some flag you can set for a button without actually clicking on it so I can reset the class when I need to? Or even some way to thread my JS function so I can stick with that.

If you would like to play the animation multiple times (see docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/animation), if you would like to play it twice only.
so this:
.invisible_anim {
...
opacity: 0;
animation:trans 3000ms;
}
#keyframes trans {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
would turn to
.invisible_anim {
...
opacity: 0;
animation:trans 3s 2 ;
}
#keyframes trans {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
EDIT:
Apparently the requirements are different than what I thought. Instead the solution seems to be to key off the animation event located at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations and then when that animation done do what you need to do: so in JS-only
var e = document.getElementById("watchme");
e.addEventListener("animationend", listener, false);
function listener(){
//do what you need to do here
}
Just be careful, the reason for this is that most browsers have different "animationend" events that fire at different times. So definitely will need to be tested in different browsers to make sure that the animation event is firing at the right time. There's a post at (https://css-tricks.com/controlling-css-animations-transitions-javascript/) that details some of the issues you might encounter.

Have you considered using the CSS property "transition"? JavaScript has an event listener called "transitionend" that can trigger when your transition has ended, which you can use to reset the button.
First set the area for your alert button with the id invis.
CSS:
#invis {
opacity: 1;
transition: opacity 3s;
}
Then in JavaScript, generate your button and its content, which will appear at opacity 1, then transition to opacity 0. Your addEventListener will trigger when the animation is done, remove the button and reset the opacity for the next trigger.
JavaScript:
var invis = getElementByID("invis");
function fade() {
var button = document.createElement("button");
invis.appendChild(button);
invis.style.opacity = ("0");
invis.addEventListener("transitionend", function(){
invis.removeChild(button);
invis.style.opacity = ("1");
});
}
You can add the fade() function to your EventListener for the user "click."
This is my first time answering on StackOverflow, I hope this helps!

You need to start transparent then show then hide:
#keyframes trans {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Then simply add your class (remove after the 3000ms time period)

programmatically changing webkit-transformation values in animation rules

I have this stylesheet:
#-webkit-keyframes run {
0% {
-webkit-transform: translate3d(0px, 0px, 0px);
}
100% {
-webkit-transform: translate3d(0px, 1620px, 0px);
}
}
Now, I would like to modify the value of 1620px depending on some parameters. Like this:
#-webkit-keyframes run {
0% {
-webkit-transform: translate3d(0px, 0px, 0px);
}
100% {
-webkit-transform: translate3d(0px, height*i, 0px);
}
}
I would prefer to be able to use JavaScript and jQuery, though a pure CSS solution would be ok.
This is for an iPhone game that runs in it's mobile Apple Safari browser.

Use the CSSOM
var style = document.documentElement.appendChild(document.createElement("style")),
rule = " run {\
0% {\
-webkit-transform: translate3d(0, 0, 0); }\
transform: translate3d(0, 0, 0); }\
}\
100% {\
-webkit-transform: translate3d(0, " + your_value_here + "px, 0);\
transform: translate3d(0, " + your_value_here + "px, 0);\
}\
}";
if (CSSRule.KEYFRAMES_RULE) { // W3C
style.sheet.insertRule("#keyframes" + rule, 0);
} else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit
style.sheet.insertRule("#-webkit-keyframes" + rule, 0);
}
If you want to modify a keyframe rule in a stylesheet that's already included, do the following:
var
stylesheet = document.styleSheets[0] // replace 0 with the number of the stylesheet that you want to modify
, rules = stylesheet.rules
, i = rules.length
, keyframes
, keyframe
;
while (i--) {
keyframes = rules.item(i);
if (
(
keyframes.type === keyframes.KEYFRAMES_RULE
|| keyframes.type === keyframes.WEBKIT_KEYFRAMES_RULE
)
&& keyframes.name === "run"
) {
rules = keyframes.cssRules;
i = rules.length;
while (i--) {
keyframe = rules.item(i);
if (
(
keyframe.type === keyframe.KEYFRAME_RULE
|| keyframe.type === keyframe.WEBKIT_KEYFRAME_RULE
)
&& keyframe.keyText === "100%"
) {
keyframe.style.webkitTransform =
keyframe.style.transform =
"translate3d(0, " + your_value_here + "px, 0)";
break;
}
}
break;
}
}
If you don't know the order but do know the URL of the CSS file, replace document.styleSheets[0] with document.querySelector("link[href='your-css-url.css']").sheet.

Have you tried declaring the keyframe portion of your css in a <style> element in the head of your html document. You can then give this element an id or whatever and change it's content whenever you like with javaScript. Something like this:
<style id="keyframes">
#-webkit-keyframes run {
0% { -webkit-transform: translate3d(0px,0px,0px); }
100% { -webkit-transform: translate3d(0px, 1620px, 0px); }
}
</style>
Then your jquery can change this as normal:
$('#keyframes').text('whatever new values you want in here');

Well from your example it seems to me that CSS animations may be overkill. Use transitions instead:
-webkit-transition: -webkit-transform .4s linear; /* you could also use 'all' instead of '-webkit-transform' */
and then apply a new transform to the element via js:
$("<yournode>")[0].style.webkitTransform = "translate3d(0px,"+ (height*i) +"px,0px)";
It should animate that.

I didn't get when you wanted to modify these values (i.e. use variables) but nevertheless here are 3 to 4 solutions and 1 impossible solution (for now).
server-side calculation: in order to serve a different CSS from time to time, you can tell PHP or any server-side language to parse .css files as well as .php or .html and then use PHP variables in-between PHP tags. Beware of file caching: to avoid it, you can load a stylesheet like style.css?1234567890random-or-time it will produce an apparent different file and thus won't be cached
SASS is also a server-side solution that needs Ruby and will provide you an existing syntax, probably cleaner than a hand-made solution as others have already about problems and solutions
LESS is a client-side solution that will load your .less file and a less.js file that will parse the former and provide you variables in CSS whatever your server is. It can also work server-side with node.js
CSS being dynamically modified while your page is displayed?
For 2D there are jquery-animate-enhanced from Ben Barnett, 2d-transform or CSS3 rotate are pitched the other way around (they use CSS3 where possible and where there are no such functions, they fallback to existing jQuery .animate() and IE matrix filter) but that's it.
You could create a plugin for jQuery that would manage with a few parameters what you want to achieve with 3D Transformation and avoid the hassle of modifying long and complex CSS rules in the DOM
CSS only: you could use -moz-calc [1][2] that works only in Firefox 4.0 with -webkit-transform that works only in ... OK nevermind :-)

Try something like this:
var height = {whatever height setting you want to detect};
element.style.webkitTransform = "translate3d(0px," + height*i + ",0px)";

A 'Chunky' solution?
Create transforms for heights within your chosen granularity, say 0-99, 100-199, 200-299, etc. Each with a unique animation name identifier like:
#-webkit-keyframes run100 {
0% { -webkit-transform: translate3d(0px,0px,0px); }
100% { -webkit-transform: translate3d(0px,100px,0px); }
}
#-webkit-keyframes run200 {
0% { -webkit-transform: translate3d(0px,0px,0px); }
100% { -webkit-transform: translate3d(0px,200px,0px); }
}
then create matching css classes:
.height-100 div {
-webkit-animation-name: run100;
}
.height-200 div {
-webkit-animation-name: run200;
}
then with javascript decide which chunk you're in and assign the appropriate class to the surrounding element.
$('#frame').attr('class', '').addClass('height-100');
Might be ok if the granularity doesn't get too fine!

I used warmanp's solution and it worked, but with a bit of very important tweaking.
$('#ticket-marquee-css').text(
"#-webkit-keyframes marqueeR{ 0%{text-indent: -" + distanceToMove + "px;} 100%{text-indent: 0;} }" +
"#-webkit-keyframes marqueeL{ 0%{text-indent: 0;} 100%{text-indent: -" + distanceToMove + "px;} }"
);
In order to get the CSS transition to update, instead of using the previously-defined values, I had to make the animation stop, then restart. To do this, I placed a class of "active" on the elements, and made the CSS only apply the transition to the elements that had that class
#marquee1.active {-webkit-animation-name: marqueeL;}
#marquee2.active {-webkit-animation-name: marqueeR;}
Then I just had to toggle the "active" class off, wait for it to apply in the DOM (hence the setTimeout), then reapply it.
$('.ticket-marquee').removeClass('active');
setTimeout(function() { $('.ticket-marquee').addClass('active'); },1);
And that works great! Now I can dynamically change the distance the text moves!