Jump to content
GreenSock

Torben

Members
  • Posts

    26
  • Joined

  • Last visited

Posts posted by Torben

  1. 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); }
    });
    
  2. ...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?

  3. 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.

    See the Pen texlC by anon (@anon) on CodePen

  4. 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--;
    }
    
  5. The red box in this example has a hover effect on the css.

    See the Pen aHepz by anon (@anon) on CodePen

     

    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?

     

     

  6. 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]
    

  7. 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);
    }

  8. 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.

  9. 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.

  10. 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

  11. 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

×