Jump to content


  • Posts

  • Joined

  • Last visited


6 Newbie

Recent Profile Visitors

1,336 profile views
  1. HI, I have tried to do this on a flex-box now, and I almost got it. But, the CSS-transistion doesn't happen on the box, instead it fills in the "box" of the browser window? //Devotee007
  2. Sahil, thanks a lot for this great answer! I will try this out on Flexbox. //Devotee007
  3. Hi, I'm thinking about animating the border on a flexbox using :after and :before just as it's done in the Codepen and the example "Draw Meet". But before I try to do it, is it possible to animate :after and :before with Greensock? //Devotee007
  4. Devotee007

    Animate :after

    Ok, I start a nre thread. Thanks.
  5. Devotee007

    Animate :after

    I was thinking about doing this "Draw Meet", but not on a button, but a flexbox with border, with the help of Greensock, reading the above makes me think that it is possible. But before I start, is it possible?
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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.
  12. 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
  13. 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.
  14. Thanks for your input! I will try and go with SVG. //Devotee007
  15. 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