In Chrome, when the website audio is playing, the label's css animation on the web form fails, even though the JS to fire the addClass function works. However, as soon as I turn off the audio by clicking the sound bars in the bottom right corner, the animations work as expected.
Why would the audio effect the css animation?
https://www.taliscreative.com/contact/
The transition of your sound bars has a duration that might be longer than the "duration" of a frame. This means that every frame you ask for an animation that might take longer than a frame. Things start malfunctioning.
You're already animating them on a "frame-by-frame" basis, so you could just set the sound-bar transition duration to 0s and it'll still look smooth!
Related
there < i need your help.
I have made a hero page with video as background. And I have some text animation too.
Due to the video file size and network performance, the text animations are always starting early than the video loaded and play, i.e, the text animations started in a black background.
So is there any event listener i can use to know that video is starting playing , and i can set animation's play state to run.
I tried many listeners, load, play, playing, canplay, ....seeems they don't fire.
And I also find poster attribute doesn't work either, is it because i used autoplay , loop, and preload="none" ?
Thanks
Call me crazy, but I'm working on a game using vanilla DOM and TypeScript. It's not action-heavy, but there are some animations going on, which are driven from JavaScript (too complex to do in CSS).
I'm already applying the common trick of translateZ(0) (called null transform hack or less accurately silver bullet) to pull animated elements into their own rendering layer, and I'm animating nothing besides compositor-only properties (transform and opacity). This works beautifully: during the game, everything feels buttery smooth, even on older mobile devices.
The problem is during the start of the game. At that moment, about 70 individually transformed and animated elements enter the page one by one over the space of a few seconds, by animating their opacity from 0 to nonzero. This is causing visible stutter during the animation.
My guess was that Chrome is being too clever here, and will only rasterize each element at the moment it first becomes visible. A quick check with the dev tools confirms this, as there's a lot of rasterization going on even during the animation:
I would prefer to rasterize all these elements once, before the animation starts, and only then trigger the animation. But how can I force rasterization of elements that aren't yet visible, without showing a flash of them to the user?
I'd be happy with a Chrome-only approach, but cross-browser would be even better.
I have site with infinite animating (sliding) background and dynamically updating charts (flot.js). Charts are updating every 200ms, background is sliding via CSS animation (infinite translate3d). Trouble is performance on Android: when chart is redrawing, css animation is stopping for several milliseconds, so it looks like game with 8-10 fps :) Is there any tricks, which can solve this problem?
Instead of using setInterval to animate the charts every 200ms try using
window.requestAnimationFrame() in browsers which can support it. The function allows the browser to decide the best time to continue the animation.
https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame?redirectlocale=en-US&redirectslug=DOM%2Fwindow.requestAnimationFrame
I'm using Skrollr.js to animate an image sequence. I took inspiration from how the http://moto.oakley.com site handles image sequences, and built some scripts to help me automate writing a series of images into the DOM. Then, I use Skrollr to change the display:none; to display:block at key scroll positions. My script preloads all the images before dispatching a complete event, and then I initialize Skrollr and allow interaction.
So, basically I have a <div> containing that has a bunch of these:
<img src="seq-000.png" data-0-top="display:block;" data-50-top="display:none;">
<img src="seq-001.png" data-0-top="display:none;" data-50-top="display:block;" data-100-top="display:none;">
<img src="seq-002.png" data-50-top="display:none;" data-100-top="display:block;" data-150-top="display:none;">
...
Now, this is working just fine in Chrome and FireFox (naturally), but Internet Explorer 11 seems to have problems rendering the images during the first scroll through the page. In other words, when I first load the page and scroll the images blink into place like they have not be preloaded, but subsequent scrolls the animation is perfectly fine. It's like IE11 hasn't rendered the images into memory, so the draw speed to the screen has a delay the first time any image is displayed.
I don't think Skrollr is the problem. Perhaps there's some magic CSS setting I should using.
Does anybody have any tips for making image sequences so they look ultra smooth everytime even in Internet Explorer?!?
Thanks!
I have a container div that holds about 20 more divs that float left. When I resize the parent div with a javascript animation using Tween.js the floats don't reflow to the new size unless I mouse over one of the divs.
It seems like something is preventing the page from refreshing.
I'm thinking maybe there is a way through javascript to force the display to update?
UPDATE:
I've put it on JS Fiddle:
http://jsfiddle.net/mattlundstrom/fNUhn/
Click any thumbnail to toggle the animation.
This version uses TweenLite to animate the "Left" CSS of the #project-container. Notice how you must move your mouse after the animation to get the container's contents to reflow.
I get this result in Safari 5+ OSX and Chrome 20+ OSX. Works as expected in Firefox 13.0 OSX.
UPDATE 2
Video of what I'm seeing:
http://f.cl.ly/items/1R1n2s0U3I3c1M3s2K0T/lundstrom_float_issue.mov
I was able to recreate your issue just as you said. It seems that it is an issue with webkit redrawing or measuring the elements after an animation or transition.
This isn't the best solution by any means, but for the time being at least it will work and hopefully what I found will help other people to be able to find out more.
If you add an onComplete to the animation, and trigger the .project mouseleave, it looks to work fine:
function completeAnimate(){
$('.project').trigger('mouseleave');
}
function contract(){
// PROJECTS CONTRACT RIGHT
TweenLite.to($('#projects-container'), .5, {css:{left:"300px", opacity:".5"}, ease:Expo.easeInOut, onComplete: completeAnimate});
}
So here is my jsfiddle which has a few tests and other animation tests so that you can see some of what I tried.
jQuery animate() and css keyframe animations have the same result as the Tween code you are using, HOWEVER, a straight style update works fine.
$('#projects-container').css('left','300px');
No issues with that at all, but of course, no animation either.
Some other things I noticed was that if you take out the .project event bindings, it still doesn't redraw correctly, however if you move you mouse it still doesn't. It simply stays that way.
I also tried forcing an element redraw using a few tricks you can usually use to force a redraw. I tried this oncomplete and at intervals after the animation begins, but had no luck with any of it.
You can also combine the two tweens into one with the properties on both, just an FYI.
Hopefully this will help someone find the true issue that's going on with the webkit transitions.