• Content count

  • Joined

  • Last visited

Community Reputation

3 Newbie

About Devotee007

  • Rank

Recent Profile Visitors

1,009 profile views
  1. Hi, I try to do a sprite animation with an image that is 4000x3800. And it works rather good but every time it changes row it "blinks". I want to move it 20 steps at a time vertical and after that move the image up 200 px and move image from left 0px to 4000px again. This is the code I use. <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Sprite Sheet Animation</title> <style> #character { width: 4000px; height: 3800px; background: url(circle-sprite-2.png); } </style> </head> <body> <div style="width: 200px; height: 200px; background-color: #ccc; overflow: hidden;"> <div id="character"></div> </div> <script src=''></script> var tlCircle = new TimelineMax({delay:0, repeat:-1, repeatDelay:0});, 1, {x:-4000, ease:SteppedEase.config(20)}, 0) .set(character, {x:0, y:"-=200"}, 1) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 1) .set(character, {x:0, y:"-=200"}, 2) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 2) .set(character, {x:0, y:"-=200"}, 3) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 3) .set(character, {x:0, y:"-=200"}, 4) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 4) .set(character, {x:0, y:"-=200"}, 5) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 5) .set(character, {x:0, y:"-=200"}, 6) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 6) .set(character, {x:0, y:"-=200"}, 7) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 7) .set(character, {x:0, y:"-=200"}, 8) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 8) .set(character, {x:0, y:"-=200"}, 9) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 9) .set(character, {x:0, y:"-=200"}, 10) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 10) .set(character, {x:0, y:"-=200"}, 11) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 11) .set(character, {x:0, y:"-=200"}, 12) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 12) .set(character, {x:0, y:"-=200"}, 13) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 13) .set(character, {x:0, y:"-=200"}, 14) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 14) .set(character, {x:0, y:"-=200"}, 15) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 15) .set(character, {x:0, y:"-=200"}, 16) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 16) .set(character, {x:0, y:"-=200"}, 17) .to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 17) .set(character, {x:0, y:"-=200"}, 18) .to(character, .8, {x:-2800, ease:SteppedEase.config(14)}, 18) Is there a smarter way to do this? I guess there is... //Devotee007
  2. Devotee007

    Delay clickTag

    Thank you all, I got the client to NOT go with this solotion. And to Greensock, sorry for posting this question here in the first place. //Devotee007
  3. Devotee007

    Delay clickTag

    Hi, A client wants to delay the time before the click on the clickTag happen. A short message is to be shown before the new tab/popup opens. But when I put the clickTag in a setTImeout all browsers gives me warnings about a popup window. I have set my browsers to open tab instead of popup. If I take away the setTimeout it works as it should, there is a short delay and then the tab opens with the correct link. What can this be, I can't see anything wrong with the setTimeout? function clickTagUrl() { setTimeout(function() {, "_blank") }, 800); } //Devotee007
  4. Devotee007

    Changing fontSize

    Thank you for all help! It works fine now. I only scale up two numbers from 20px to 40px and it looks OK. I have mananged to center it now with your help. //Devotee007
  5. Devotee007

    Changing fontSize

    Hi, I'm doing a simple:".btn-text", 1, { fontSize: 40}); Start size of the text is 20. When text change it scales to the left. I would like it to scale up "centered", is there a way to do that? //Devotee007
  6. Devotee007

    Image sequence flickering?

    How do I do this if I have transparent PNG:s? I have to show and hide the PNG to get it to work. Now all stack on top of each other.
  7. Devotee007

    Rotate text like a3D cube

    Thanks for your tip Davi! I have tried to do one with the DOM3D props now. I get it to spin, but I can't figure out how to get the space between the letters as in the video above. Don't have a Codepen account, but I have attached the thing I've done in the post.
  8. Devotee007

    Rotate text like a3D cube

    Hi, I'm trying to do a text animation like the one they have don in this YouTube-video in the end: Been trying a lot of different values on rotationX, transformPerspective and transformOrigin", but I just can't make it work. :-/ Any help to get started in the right direction would be very appreciated.
  9. Devotee007

    Text animation

    Thanks for your input! I will try and go with SVG. //Devotee007
  10. Devotee007

    Text animation

    I'm about to do some text animation. I want to recreate the animation in the Alien Covenant trailer. Is it a good idea to use SplitText for this or is it better to animate it letter for letter? What do you think? Example here: //Devotee007
  11. Devotee007

    Making pennants move

    Hi, I would like to make som pennants "move in the wind", but I really can't figure out how to do it? Any help would be much appreciated. I don't have any Codepen ready, because I don't know where to start with this one. The graphic I have is something like this - //Devotee007
  12. Devotee007

    Stagger from center object and out?

    Thanks for clearing it up, PointC, I'm quite new at this. I will consider getting a membership, Greensock is really awesome! //Devotee007
  13. Devotee007

    Stagger from center object and out?

    Nicely done Diaco! Thanks for the help, but I don't have a Club Greensock membership, so I can't use that method. Or maybe I do something wrong. //Devotee007
  14. Devotee007

    Stagger from center object and out?

    Hi, Is it possible to stagger from center and out? I have 5 objects in a row and would like the center one (1) fade in from bottom to top and then the two ones next to it (2 and 3) fades in and last the two on the end (4, 5) comes in. 4 2 1 3 5 //Devotee007
  15. Devotee007

    Rotate object in a circle

    Thank you! I see that I was on the right track, but not quite...