Javascript website animation slow on some machines and browsers?

JavaScript
1

Hi,

Great forum here guys I’m glad i found it I’m here because i need some coding help. A team of my developers has been preparing a project for me where as they have inserted a JavaScript animation into a web page. The JavaScript is initiated when a button is clicked by the user and a animation is shown.

We are doing some testing over the last few days and we have ran into a little bit of issue where the animation seems to run rather slowly on different computers. So for example on my desktop machine the animation runs flawlessly in every browser but when i switch to my Laptop the animation seems jerky and runs slow on all the browsers.

My understanding it this is a hardware issue but what i really need to get down to is how to fix this because the website is going to be used by many users on many different machines with different browsers. Any help would really be appreciated guys as i haven’t been able to find any solutions yet online? Its annoying because the animation is perfect just a little bug stopping us from moving forward.

Thanks :slight_smile:

2

Hi there orangeseal,

may we see the problem. :smirk:

It could possibly help us to resolve it. :yum:

coothead

3

LOL good idea here is the link - http://itfhrm.com/projects/shreepatidarinfotech/stack.html

Click the collapse button and JavaScript does its thing!

4

One thing I notice is that you animate the ‘top’ position and you should be using translate for more performant animation. Paul Irish explains it here. It may help a little. :slight_smile:

5

Hi there orangeseal,

here is a CSS example…

[code]

untitled document #cb { position: absolute; left: -999em; } #container { max-width: 31.25em; height: 15.188em; padding-top: 0; margin: auto; box-sizing: border-box; overflow: hidden; } #container div { height: 1.313em; margin-bottom: 1em; background-image: url(http://itfhrm.com/projects/shreepatidarinfotech/images/3D-Line.png); background-size: 100% 1.313em; } #container div:nth-child(7){ margin-bottom: 0 } #lab { display: block; width: 4em; padding: 0.75em; margin: 0.5em auto; border: 0.06em solid #0cc; border-radius: 0.5em; box-shadow: inset 0 0 0.75em rgba(0,255,255,0.4), 0.25em 0.25em 0.25em rgba(0,0,0,0.4) ; color: #336; } #lab::before { content: 'Collapse'; } #cb:checked~#lab::before { content: 'Expand'; } #cb:checked~#container { animation: push 5s forwards; } #cb:checked~#container div{ margin-bottom: 0 } #cb:checked~#container div:nth-child(1) { transition: 0.5s; } #cb:checked~#container div:nth-child(2) { transition: 0.5s 0.5s; } #cb:checked~#container div:nth-child(3) { transition: 0.5s 1s; } #cb:checked~#container div:nth-child(4) { transition: 0.5s 1.5s; } #cb:checked~#container div:nth-child(5) { transition: 0.5s 2s; } #cb:checked~#container div:nth-child(6) { transition: 0.5s 2.5s; } @keyframes push{ 0% {padding-top: 0;} 10% {padding-top: 1em;} 20% {padding-top: 2em;} 30% {padding-top: 3em;} 40% {padding-top: 4em;} 50% {padding-top: 5em;} 60% {padding-top: 6em;} 65% {padding-top: 6em;} 100% {padding-top: 15.188em} }
[/code] ...that may be smoooooother. :sunglasses:

coothead

6

The code you have supplied coothead my coder has put on a page but its missing the speed up effect of the animation on the lines falling as this is part of the animation more weight on lines means increase and faster fall as it reaches the bottom.

http://itfhrm.com/projects/shreepatidarinfotech/test.html

So your CSS example is fine but its missing the element of a faster lines fall speed as it falls downwards. If you can help me add that then its a wrap lol

7

Hi there orangeseal.

if acceleration is your desire, then acceleration you shall have. :sunglasses:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
#cb {
    position: absolute;
    left: -999em;
 }

#container {
    max-width: 31.25em;
    height: 15.188em;
    padding-top: 0;
    margin: auto;
    box-sizing: border-box;
    overflow: hidden;
 }

#container div {
    height: 1.313em;
    margin-bottom: 1em;
    background-image: url(http://itfhrm.com/projects/shreepatidarinfotech/images/3D-Line.png);
    background-size: 100% 1.313em;
 }

#container div:nth-child(7){
    margin-bottom: 0
 }

#lab {
    display: block;
    width: 4em;
    padding: 0.75em;
    margin: 0.5em auto;
    border: 0.06em solid #0cc;
    border-radius: 0.5em;
    box-shadow: inset 0 0 0.75em rgba(0,255,255,0.4),
                0.25em 0.25em 0.25em rgba(0,0,0,0.4) ;
    color: #336;
 }

#lab::before {
    content: 'Collapse';
 }

#cb:checked~#lab::before {
    content: 'Expand';
 }

#cb:checked~#container {
    animation: push 5s forwards;
 }

#cb:checked~#container div{
    margin-bottom: 0
 }

#cb:checked~#container div:nth-child(1) {
    transition: 0.75s; 
 } 
 
#cb:checked~#container div:nth-child(2) {
    transition: 0.65s  0.75s; 
 } 
 
#cb:checked~#container div:nth-child(3) {
    transition: 0.55s  1.4s;  
 } 
 
#cb:checked~#container div:nth-child(4) {
    transition: 0.45s  1.95s;  
 }

#cb:checked~#container div:nth-child(5) {
    transition: 0.35s  2.4s;  
 }

#cb:checked~#container div:nth-child(6) {
    transition: 0.25s 2.75s;  
 } 

@keyframes push{
 0%   {padding-top: 0;}
 15%  {padding-top: 1em;}
 28%  {padding-top: 2em;}
 39%  {padding-top: 3em;}
 48%  {padding-top: 4em;}
 55%  {padding-top: 5em;}
 60%  {padding-top: 6em;}
 65%  {padding-top: 6em;}
 70%  {padding-top: 9em;}
 75%  {padding-top: 15.188em;}
 100% {padding-top: 15.188em;}
 }
</style>

</head>
<body> 

<input id="cb" type="checkbox">

<div id="container">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>

<label id="lab" for="cb"></label>

</body>
</html>

coothead

8

That, of course, is not strictly true, it is gravity,
not weight, that accelerates falling objects. :mask:

coothead

9

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