Jump to content

How to Control Animation/Transform Timing?


Recommended Posts


I want to create an effect, where, upon being clicked, a text slowly fades in and then does some transformations.

I had this setup within CSS using the following code, the text read "See You Space Cowboy", faded in, then one at a time moved up and to the right while fading away. 

I am using Pixi.Text and already understand how to get a mouseclick event and change the text object itself, but everything happens instantaneously. So, how do you setup the equivalent of the keyframes animation percentages and ease-in, ease-out etc. within WEB GL?


My CSS Code which used a keyframes animation.

.spaceCowboyText {
  color: rgba(25, 25, 25, 1);
  display: inline-block;
  position: absolute;
  text-align: center;
  top: 10%;
  right: 1%;
  width: 100vw;
  font-size: 30px;

.spaceCowboyTextList li {
  list-style: none;
  display: inline-block;
//Adds whitespace after each li -- prettier is removing {" "}
.spaceCowboyTextList li::after {
  content: " ";
  white-space: pre;

.spaceCowboyTextListAfterClick li {
  color: #666;
  animation: spaceCowboyAnimation 4s linear forwards;
  opacity: 0;

@keyframes spaceCowboyAnimation {
  0% {
    transform: rotate(0deg) translateY(0px);
    filter: blur(1px);
    opacity: 0.1;
  45% {
    transform: rotate(0deg) translateY(0px);
    filter: blur(0.3px);
    opacity: 1;
  100% {
    transform: rotate(45deg) translateY(-200px);
    filter: blur(20px);
.spaceCowboyTextList li:nth-child(1) {
  animation-delay: 0s;
.spaceCowboyTextList li:nth-child(2) {
  animation-delay: 0.4s;
.spaceCowboyTextList li:nth-child(3) {
  animation-delay: 0.8s;
.spaceCowboyTextList li:nth-child(4) {
  animation-delay: 1.2s;
.spaceCowboyTextList li:nth-child(5) {
  animation-delay: 1.6s;


Edited by KamiFightingSpirit
Link to comment
Share on other sites

That is possible also. Basically just have something in renderloop like this:
sprite.alpha += some small number;
if(sprite.alpha > 1) sprite.alpha = 1;

You could also take the start time and calculate end time from that. Then just calculate how much time has passed and calculate:

var timepassed = currentTime-startTime;
sprite.alpha = startAlpha + (endAlpha-startAlpha)* Math.min(1,timepassed/totalTime);

Which is basically what tweens do, they just give a much nicer api for handling that.

Link to comment
Share on other sites

Correct. Animations and such should always be based on time rather than frames to ensure things occur at a consistent speed regardless of fps.

You'll often see 'delta' used in rendering engines. Some have delta as 'the amount of time passed since the last time an update occurred' and some have it as a number which has '1' running at normal speed, and '2' meaning the engine is running at half the fps. Then you can multiply the delta by your movement amount and voila.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...