Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Everything posted by Devotee007

  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
  16. 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
  17. Thanks for clearing it up, PointC, I'm quite new at this. I will consider getting a membership, Greensock is really awesome! //Devotee007
  18. 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
  19. 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
  20. Thank you! I see that I was on the right track, but not quite...
  21. I want to do something like this http://jsfiddle.net/leaverou/zXPzY/light/ and I have tried a lot of things now, but I can't get it to work. I can rotate the below code with: var circle = new TimelineMax({repeat:-1, repeatDelay:0}); circle.to("#circle", 2, {rotation:360, transformOrigin:"center", ease:Linear.easeNone}, 0); But I cant get it to go in a circle at the same time. <div id="content"> <div id="circle" style="width:100%; height:100%; position:relative; top:0px; left:0px;"> <div style="width:50%; height:100%; overflow:hidden; position:absolute; top:0px; left:0px;"> <div style="position: relative; border-radius: 100%; height: 100%; width: 200%; background-color: #3498db;"></div> </div> <div style="width:50%; height:100%; overflow:hidden; position:absolute; top:0px; left:50%; transform: rotateY(180deg);"> <div style="position: relative; border-radius: 100%; height: 100%; width: 200%; background-color: #2980b9;"></div> </div> </div> </div>
  22. Hi, I try to loop a timelineMax from a certain point. I have set a label, I think, but it starts from the begining, almost. It doesn't matter where I set the label. At the end I want it to wait half a second before it restarts from this line ".set(".txt1Content", {y:-10})". What am I doing wrong? var fadeOutForm = new TimelineMax({repeat:-1}); fadeOutForm.fromTo(".background", 10, {y:-40}, {y:0}) .to(".formContent", 1, {y: -40, ease:Power4.easeOut}, .1) .to(".formWrapper", .3, {alpha:0}, .2) .set(".txt1Content", {y:-10}, "txt1Wrapper") .set(".txt1Wrapper", {height:"0px"}) .to(".txt1Wrapper", 1.2, {height:"129px", opacity:1, ease:Expo.easeOut}, .6) .to(".txt1Content", 1.2, {y:20, ease:Power4.easeOut}, .6) .to(".txt2Wrapper", .6, {autoAlpha:1}, 1.2) .to(".txt1Wrapper", .3, {opacity:0}, 5) .to(".txt2Wrapper", .3, {alpha:0, onComplete:restart, onCompleteParams:["txt1Wrapper"]}, 5); function restart(position) { console.log(position) fadeOutForm.play(position); } //devotee007
  23. Hi Carl, Thanks for the links, I will ask there. //Devotee007
  24. Great video, thanks! Just a question about the spritesheet that the program creates. Is it possible to do it in any other way because the spritesheet, in this case, is 226 KB. The file sizes of the two images is 46 KB and 2 KB. I used TinyPNG on the created spritesheet and got it down to 76 KB, but that is still a lot more than 48 KB. //devotee007
  25. Sorry for my not so in depth question. I meant stop a timeline loop after a certain amount of time, so Carl gave me the answer I was looking for. Thanks a lot for the help Dipscom and Carl. //Devotee007