webkitAnimationEnd fires at the start

Question

I'm trying to animate a scrolling ticker that moves text horizontally across the screen.

The webkitAnimationEnd event appears to fire as soon as the page is loaded, rather than when the animation has finished. Why is this happening?

When I look at other examples using the same approach, the event seems to fire correctly when viewed using this same browser - so it must be a problem with my code. I'd like to detect the "end" event so I can update the text in the div element before rescrolling the ticker.)

Here's my code (also in a jsFiddle, here):

var tt;

function startTicker() {
  tt = document.getElementById("tickerText");
  tt.addEventListener('webkitAnimationEnd', updateTicker());
}

function updateTicker() {
  alert('end');
}

body {
  color: #829CB5;
  background-color: #1A354A;
  font-size: 60%;
  font-family: sans-serif;
  overflow: hidden
}

div#ticker {
  font-size: 140%;
  position: absolute;
  top: 0;
  left: -2px;
  border-width: 2px;
  height: 1em;
  width: 101%;
  background-color: black;
  color: #CEEAFA;
}

div#tickerText {
  position: absolute;
  top: 2px;
  left: 0px;
  height: 1em;
  width: 101%;
  background-color: black;
  color: #CEEAFA;
  -webkit-transform: translateX(100%);
  -webkit-animation-duration: 30s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-name: scrollTicker;
}

@-webkit-keyframes scrollTicker {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}

<html>

<head>

</head>

<body onload="startTicker()">

  <div id="ticker">
    <div id="tickerText">Test</div>
  </div>

</body>

</html>

I'd like to use just CSS and Javascript (rather than libraries like Jquery).

score 2 · Accepted Answer · answered Feb 07 '18 at 17:06

2

When you are registering the event listener

tt.addEventListener('webkitAnimationEnd', updateTicker());

you are actually calling the function. It should not have the () after updateTicker

it should look like

tt.addEventListener('webkitAnimationEnd', updateTicker);

so that the function is passed to the addEventListner function

answered Feb 07 '18 at 17:06

Justinw

631
10
18

Thank you! That definitely stops the function from being called when the page is loaded. For the event listener to work correctly I've realized I need to define the function as a variable and pass the variable to the addEventListener method, too. Now it works perfectly. Usually I work with Java rather than Javascript so I never would've thought of any of this - your tip helped a great deal. – velw Feb 08 '18 at 01:58

webkitAnimationEnd fires at the start

1 Answers1