Jump to content


  • Posts

  • Joined

  • Last visited

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

2,482 profile views

dev-kp's Achievements


Newbie (1/14)




Community Answers

  1. Hi GameSite, Had a look at the image you provided. This really shouldn't be happing. Can you give the URL to the website? Can have a look. Cheer, KP
  2. Hey Idan! I think SVG would a very good fit for this: This is the example provided by Greensock. tl.staggerFromTo(shapes, 1, {drawSVG:"100%"}, {drawSVG:"50% 50%"}, 0.1) .fromTo(shapes, 0.1, {drawSVG:"0%"}, {drawSVG:"10%", immediateRender:false}, "+=0.1") You can directly control the line and how it will draw, this includes the start and end positions. Hope this helps.
  3. About to years ago when I just made the switch from Flash to html/css/js I would have been in agreement with this. But now two years later, I find hand coding speeds up the process incredibly. There is a bit of learning curve, but once everything is setup the process couldn't be more easier. Task runners alone provide so much benefits. On top of that you can automate so much, preview link generation, automatic platform change (DC, DCM, Sizmek) and the list goes on. Just last week I've build a full campaign of 54 creatives in under 2 working days, using Bannertime, and saved so much time.
  4. Hi sschulman and welcome! Had a quick look at this and yes can't seem to animate the x and y attr or a table or div. I've experimented with an SVG version and that seems to work: <svg width="300" height="250"> <rect id="rect" width="100" height="100" x="0" y="0" style="fill:rgb(252,81,48);" /> </svg> TweenLite.to("#rect", 1, {attr:{x:250, y:200, width:50, height:50}, ease:Power1.easeOut}); See full version here: http://codepen.io/Dev-KP/pen/jWQmKb Hope fully that will help.
  5. Hi dia, and welcome to the forums. A bit unclear about what you are after; if you clarify a bit better that would help. Is it something like this that you are looking for: http://codepen.io/Dev-KP/pen/RrZVeb
  6. You can try something like this: https://codepen.io/Dev-KP/pen/adWdKG?editors=101 Basically before each repeat there is a check to see if the total time will be more then 15 sec. tl.totalTime()+tl.totalTime() >= maxTime ? tl.pause() : tl.repeat(); If it is then the animation will stop and if not then another repeat will occur. This will only work with timeline. var maxTime = 15; var loops = 3; var tl = new TimelineMax({repeat:loops, repeatDelay:1, onRepeat:function(){ // Check if another loop of the animation will make the total time of the animation longer then 15 sec // More or equal to 15 sec the animation will stop // If its less it will repat tl.totalTime()+tl.totalTime() >= maxTime ? tl.pause() : tl.repeat(); }, onUpdate:function(){ //outputs the time into the text box document.getElementById('time').value = tl.totalTime(); }}) tl.to("#div1", 4, {x:300}) .to("#div2", 4, {x:200}) .to("#div3", 4, {x:100}); Hopefully that helps.
  7. Very nice! Its good to see the one size fit all setup rather then building a variety of creatives for each placement. Some interesting calculations to make the animation work at any width. Good to see the full potential of html with the use of GSAP! What's the browser cutoff, I'm assuming IE10?
  8. This seems to work as well. Pause the nested timelines and then play them in the global timeline. http://codepen.io/Dev-KP/pen/WQobdQ?editors=101 This is using set() P
  9. Yup I did have a look at that post. The work around seems workable but a bit odd. If I build a normal timeline, with a bunch of add() and set() with out using nested timeline the set() seems to work correctly. But nested timelines run immediately, wonder if a call() function would cause the same issue? Guess will be using the 0.01 duration fix for the time be. Cheers, P
  10. Seems changing the .set to .to with a 0.01 duration actually fixes the issue. http://codepen.io/Dev-KP/pen/WQobdQ?editors=101
  11. Hi, Been trying to get this to work for a little while now, a bit stuck. CodePen: http://codepen.io/Dev-KP/pen/jbMWxy Basically the individual animations work: .add(aninIn(copy1, 20)) //.add(aninOut(copy1, 20)) When one of them is commented out the other will work perfectly, but having them both there seems to make them merge. I'm guessing it's something to do with the .set in the returned tiimelines? If I am not mistaken the nested timelines should play one after another? Or is this something for immediateRender? Cheers P
  12. Got it working: import com.greensock.*; import com.greensock.easing.*; mc.meter.text = "0%" var push = 2 var strain = .7 // 1 normal .5 moderate .3 hard var speedCounter = 0 var tween = TweenLite.to(this, strain, {push: 1,ease: Back.easeInOut,onUpdate: showScore, paused:true}) var tl = TweenLite.to(mc, 20, {x: stage.stageWidth-mc.width/2,ease: Linear.easeNone,paused: true, onUpdate: showProgress, onComplete:done}) stage.addEventListener(MouseEvent.CLICK, changeScore); function showScore() { if (push == 1) { tl.reverse(); speedCounter = 0 tl.timeScale(.5); } else { tl.play(); if(speedCounter == 0){ tl.timeScale(1); } } } function changeScore(e: MouseEvent): void { push = 2 speedCounter+=.1 tl.timeScale(1+speedCounter); tween.restart(); } function done():void{ tl.kill(); tween.kill(); } function showProgress():void{ mc.meter.text = (int(tl.totalProgress()*100)).toString() + "%" }
  13. Hi, Hope someone can help me with with this. I am trying to find a way to create a "wind effect / drift". A movie clip will be constantly be pushed back -x but clicking the stage will make it move forward +x the more you click the faster it moves. If the clicks stop it will slowly slowdown and start to drift backwards. Any support is much appreciated! Thx
  14. Thanks for the reply Jack, was looking into that fix. But even with the updated com folder still the same issue happens. Take a look: https://www.dropbox.com/sh/dw1bcjx1ytcnesk/-eSlkW7ik7 There is still a jump before the animation happens. Any thoughts? Any help will be very appreciated. Thx P
  15. I am getting a very odd result when using this code: import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; TweenPlugin.activate([MotionBlurPlugin]); function init():Void{ mc._visible = false; doFrame1(); } function doFrame1():Void{ mc._visible = true; TweenLite.from(mc,.5,{_x:mc1._x, motionBlur:true,delay:2}); } init(); There is a jump that happens before the animation. This only occurs if I use another movieclip _x for the tweenlite, which I absolutely have to do. In the main version the other mc acts like a tracker. Any ideas? https://www.dropbox.com/sh/f9fa8tnvb37ty9z/wBidYq3aYx This is a reference file. Thx P