Devotee007

Members
  • Content count

    23
  • Joined

  • Last visited

Community Reputation

3 Newbie

About Devotee007

  • Rank
    Member

Recent Profile Visitors

976 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='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script> var tlCircle = new TimelineMax({delay:0, repeat:-1, repeatDelay:0}); tlCircle.to(character, 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. 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. 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() { window.open(window.clickTag, "_blank") }, 800); } //Devotee007
  4. 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. Changing fontSize

    Hi, I'm doing a simple: TweenMax.to(".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. 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. 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. test-with-3d.zip
  8. 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. Text animation

    Thanks for your input! I will try and go with SVG. //Devotee007
  10. 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. 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 - http://www.profitf.com/wp-content/uploads/2015/01/Flags-and-Pennants-Chart-Patterns.gif //Devotee007
  12. 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. 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. 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. Rotate object in a circle

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