requestAnimationFrame freezes

JavaScript
1

hi all, I am writing slideshow in JavaScript. In the slideshow i have built i have used setTimeout and setInterval functions. But using multiple setInterval were causing performance issues. And programmers at the forums had advised me to use requestAnimationframe instead setInterval. Now i have written small piece of code that moves multiple div elements using time intervals. But it freezes browser and computer. Any help greatly appreciated. Thanks in advance
link of slide

2

I have to say that I hesitate to click that link. :-O Anyway, I’d say for simple “static” animations as in a slide show your best bet would be to use CSS transform animations, which have usually a much better performance than any JS animation. You might simply apply certain animation classes using setTimeout(), or use a small animation library such as snabbt.js (which utilises CSS animations under the hood as well).

1 Like
3

i want solution in pure javascript, and i bellieve that there are quite javascript sliders that have complex transition effects in which used requestanimationframe. and this sliders work very light without any crash or memory slowdown. Anyway thanks for attention, but what i want is not to use CSS.

4

A slider with no CSS? Good luck then! :-D Seriously though, this approach is pretty much contrary to what you’d normally want to do – avoid JS whenever you can use CSS instead. Anyway, a basic slider using requestAnimationFrame() might look like

CSS (can’t slide w/o it)

.slider {
  display: block;
  position: relative;
  overflow: hidden;
  list-style: none;
  width: 400px;
  height: 200px;
  padding: 0;
}

.slider li {
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 100%;
}

HTML

<ul class="slider">
  <li><img src="http://lorempixel.com/400/200/"></li>
  <li><img src="http://lorempixel.com/400/200/"></li>
  <li><img src="http://lorempixel.com/400/200/"></li>
  <li><img src="http://lorempixel.com/400/200/"></li>
</ul>

JS

var start    = null;
var duration = 1000;
var delay    = 500;
var current  = 0;
var slides   = document.querySelectorAll('.slider li');

function step(timestamp) {
  var progress;

  // If start is not set, set it to the current timestamp and
  // pick the next slide; also set its z-index to 1 higher
  // than the other slides
  if (!start) {
    start = timestamp;
    slides[current].style.zIndex = 0;
    current = ++current % slides.length;
    slides[current].style.zIndex = 1;
  }

  // This is the crucial part to guarantee smooth animations;
  // the slide is not moved by a fixed number, but by an amount
  // proportional to the time that elapsed since the last
  // animation frame
  progress = timestamp - start;
  slides[current].style.left = 100 - (progress / 10) + "%";
  
  // When the animation finished, reset the start value and
  // request the next animation cycle after a certain delay
  // (if desired).
  if (progress > duration) {
    start = null;

    window.setTimeout(
      window.requestAnimationFrame.bind(window, step),
      delay
    );
  } else {
    window.requestAnimationFrame(step);
  }
}

// Initialise the slider loop
window.requestAnimationFrame(step);

Here’s a fiddle. As always, please refer to the MDN for details!

PS: If you post your code here, we might also help you to find the particular bug in question… I just don’t want my browser to crash. Too many tabs depend on it! ^^

2 Likes
5

can’t be done - it is the CSS that creates the effect and all JavaScript can do is change the CSS.

1 Like
6

Sorry you understood me wrong. When i say what i want is not to use CSS , I keep in my mind another thing, so according to me dynamically transition effects must be done in Javascript. Of course styling deserves CSS )). if i explained correctly. Thanks for attention and advises.

7

hey guys, I have made slight changes. now it works without memory slowdown and browser freeze
below is link. But i assume there is a little shortage in this code.
new slide

8

so a lot of people will not see the effect because they have JavaScript turned off (as a growing number of people do) where they could see the effect if you did it with CSS.

According to all the experts anything that can be done in CSS without JavaScript should be done without JavaScript.

So you need to decide whether according to you trumps according to the experts and whether you want the minimum or maximum number of visitors to see the effect.

I don’t see the effect on your page at all because your site is not on my whitelist of sites where I allow JavaScript to run.

9

Just for fun :slight_smile:

2 Likes
10

I know simple things that can be done in CSS, should be done in CSS and i agree with you. But my this example is very simple and my aim is not be satisfied with this animation. this animation is a little piece of large slider with complex effects. in this manner i will be forced to use Javascript.

11

So first get everything else working without the JavaScript so as to make sure the page will still be usable for the growing number of people with JavaScript turned off.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.