Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Torben

  1. Very nice Rodrigo - works beautifully Thank you to you too Jonathan.
  2. As you can se in the Codepen the centered text is shaking when the width of the parent element is animated. Any ideas on how to fix that?
  3. I know what you mean. I can't animate the actual change between the images - that's impossible. But that is not what I needed. The change between all the source images should happen over fx. 1 second so that it shows each image within that timeframe and ends on the last one. But I figured it out in the meantime - this is my code boiled down. <div class="storyNumber" no="0"><img src=""></div> function updateNumber() { var no = $storyNumber.attr('no'); var $img = $storyNumber.find('img'); $img.attr('src', 'http://localhost/images/number_' + numberArray[no] + '.png'); } var numberArray = [0, 127, 89, 80, 8, 200, 20, 87, 3]; var $storyNumber = $('.storyNumber'); TweenMax.to($storyNumber, 1.2, { ease:Power4.easeInOut, attr:{no:10}, roundProps:'attr', onUpdate: updateNumber, onComplete: function() { $storyNumber.attr('no', 0); } });
  4. ...and if so how? What I need to do is over time (and with an ease if possible) change the src of an img tag between 10 different images that I have in an array (either the path to them or the images created by js). I see there's a new attr plugin - is that what I need?
  5. Ahh great - thanks Jack
  6. I'm just starting using this library for real so I'm asking a lot of questions these days - thank you for answering. Look at this Codepen and try to play it till the end. Then try and hit the "progress 0.5" button which sets the progress on the timelime to 0.5 and then read out the progress by hitting "get progress". It reads out 0.66666. Why is that? If you hit "progress 0.5" again and read out the progress it now says 0.5 as I would expect. http://codepen.io/anon/pen/texlC
  7. Torben

    Timeline help

    So it was the pauses - thank you Carl. Guess I could also add a small number to the pauses?...like this: tween.addPause("+=0.00001");
  8. Torben

    Timeline help

    I have a timeline which I need to be able to reverse and redo when the browser is resized because some of the tween values are set to window height. The issue I have is after a resize where I do a seek. The next time I goNext() the animation doesn't play. Is it the pauses? What am I doing wrong or is there are smarter way? var tween, currentNo; function createTween() { tween = new TimelineMax({paused:true}); tween.addLabel('0'); tween.add( TweenMax.fromTo($images, 1, {y:0}, { y:(-1 * $(window).height() })); tween.addPause(); tween.addLabel('1'); tween.add( TweenMax.to($images.find('.image-blurred'), 1, { opacity:1 })); tween.addPause(); tween.addLabel('2'); tween.add( TweenMax.to($images, 1, { y:(-2 * $(window).height() })); tween.addLabel('3'); tween.seek((currentNo.toString())); } function onResize() { createTween(); } function goNext() { if (currentNo === 3) return; tween.play(); currentNo++; } function goPrev() { if (currentNo === 0) return; tween.reverse(); currentNo--; }
  9. There seems to be an agreement to this being a browser bug. If anyone else finds this a need a fix there is a work around here: http://stackoverflow.com/questions/24787618/hover-not-working-on-animated-div
  10. Look at this: http://codepen.io/anon/pen/tvKjq Why doesn't the box go back to 0? And while we'er at it - why does the box insist on going to 550px here: http://codepen.io/anon/pen/kygIj
  11. Thank you Chrysto - don't know what happened to my Codepen. And yes that is what I meant
  12. The red box in this example has a hover effect on the css. http://codepen.io/anon/pen/aHepz The thing is this only works if the mouse is moving on the red box; not when thw box itself moves under the mousepointer (leave the mouse in the path of the box). This is probably not a Tweenlite issue but a js question. How do I fix that?
  13. I'm trying to use the TransformAroundPoint on a Starling Sprite but it fails. I'm not sure what exactly TransformAroundPoint does internally, but I guess it uses some properties that are not there on a Starling Sprite ? The error is: TransformAroundPointPlugin/onInitTween()[D:\_Flash\_AS3\src\com\greensock\plugins\TransformAroundPointPlugin.as:71]
  14. I honestly don't know why it didn't work but I somehow fixed it now - thanks anyway Jack
  15. I don't understand why nothing gets traced in my onChildComplete function. What am I doing wrong? urls = ["http://www.server.com/1.jpg", "http://www.server.com/2.jpg"]; var queue:LoaderMax = LoaderMax.parse(urls, {name:"mainQueue", onChildComplete:completeHandler}); queue.load(); function completeHandler(e:LoaderEvent) : void { var content:ContentDisplay = e.target.content; trace(content); }
  16. Fantastic support!.....thank you Carl for your perseverance and actually finding a solution. Good to know it wasn't me being stupid. And thank you Jack for fixing it so quickly. You're the best....and no explanation needed
  17. Thanks Carl, sorry for the late reply but forgot to subscribe to the thread.
  18. I have a Timeline with some steps. In the end I want it to go back to the first label and then continue through the other steps. But when I gotoAndStop("START") and then try to restart the timeline the next animation is wrong, Kinda hard to explain, but I have attached a zip that I think shows the "error" well.
  19. Thanks It's a banner so I can't spare the extra kb in TimelineLite/Max. I'll figure something out.
  20. I'm not sure I can explain this but I'll try. I have a movieclip that has a timeline animation (that I'd rather not convert to a tween) that changes scale, rotation and so on. The same movieclip will at some time be tweened with TweenNano too (again scale, rotation...). I stop() the timeline animation before I tween it. The next time I try to play() the timeline animation nothing happens - the playhead on the timeline is progressing, I can tell by tracing the currentFrame on ENTER_FRAME but the scaling, rotation, x & y doesn't change as it goes along the timeline animation. Seems like the TweenNano has overwritten the timeline animation or something.
  21. Nevermind - I found another solutiuon on a blog.
  22. Thanks Jack I'm trying to imitate the bezier/bezierThrough example where you can drag a point and the line curves with it. And when using bezierThrough it curves through the point. I'm thinking I should do this: shape.graphics.clear(); shape.graphics.lineStyle(lineWeight, lineColor, 1, true, LineScaleMode.NONE, CapsStyle.NONE); shape.graphics.moveTo(lineStartX, lineStartY); var bezPoints:Object = BezierPlugin.parseBeziers({"x":[lineStartX, mouseX, lineEndX], "y":[lineStartY, mouseY, lineEndY]}, true); shape.graphics.curveTo(bezPoints.x[0][1], bezPoints.y[0][1], bezPoints.x[0][2], bezPoints.y[0][2]); But that doesn't work - does anyone know what I'm doing wrong
  23. Hi Jack - or anyone else who can answer this. I'm trying to acheive (sp?) the same thing - I think I'm drawing a bezier curve according to the user mousx and mouseY position. I would like to change it to your more "natural" bezierThrough points. Now I have: shape.graphics.curveTo(mouseX, mouseY, lineEndX, lineEndY); So instead of mouseX and mouseY I would need the bezierThrough points - lineEndX and lineEndY doens't change. But I'm not sure what to feed the BezierPlugin.parseBeziers method. I think I just don't get the idea behind bezier points. Thanks