Jump to content
GreenSock

glassbean

Members
  • Posts

    13
  • Joined

  • Last visited

Posts posted by glassbean

  1. thanks for this, actually I realized this just at the very same time after reading the instillation guide. Swapped to DrawSVGPlugin.min.js

     

    and now it al works fine... arh.. sorry for wasting your time but I learned something, I assumed the minified and module versions would both work...

    Thanks again,
    B

    • Like 1
  2. Thanks Zach,

    I'll take  a look at the link you sent, in the meantime this is the console error I get:

    SyntaxError: export declarations may only appear at top level of a module

    I'm only using very simple syntax in my file:


      .from("#screen", { drawSVG: 0},'-=.1')
       .from("#buttons path", { drawSVG: 0, stagger: .1 })

     

    As I say, it works fine with DrawSVGPlugin3.min.js in the local directory, but not with DrawSVGPlugin.js

    I'm using
    gsap_3.1.0_min.js, perhaps DrawSVGPlugin.js is not compatible with GSAP3?

    Thanks,
    G
     

  3. Hello there,

     

    After playing the DrawSVGPlugin today I've decided to use it in commercial project which is great. I was using DrawSVGPlugin3.min.js locally and created some animations. Ive now got a business license and have unzipped the plugin library. I notice there is no CDN for the plugins so I'm linking to DrawSVGPlugin.js locally in my files (Im assuming the syntax is the same either .js files?. Now the plugin no longer works. How do i get this working. Apologies if this is a stupid question.

    Thanks,
    G

  4. Hi There,

    So I have a few looping animations (for example the one below) running through a larger animation.

     

    TweenMax.fromTo("#beam", 1, {x:-50}, {x:400, ease:Linear.easeNone, repeat:-1});


    At a certain point I want all the animations to stop but rather than just suddenly freeze I want them to ease to a final position, is this possible?

    BTW I know I can use pause() to stop the animation but that causes everything to  stop suddenly

    Thanks,
    G^

  5. @Jack and @Carl Thanks a lot for your help. Your replies have prompted me to look at the files in Chrome and it works as you say, but not in Firefox, my default browser, the most recent version. The sprite part doesn't loop. Did you see it working in Firefox? Thanks for the tips. I will make sure to upload a correct codepen next time around.

  6. Hey Jack,

    Thanks for your reply. Ive stripped down the problem to its essentials. Ive attached a zip of the file for you to look at in its simplest

    The loop should replay the whole timeline including the stepped ease on the sprite sheet but its doesnt it only loops the fade on the beam. If I remove the line of code tweening the beam, the sprite sheet is reanimated with the loop as expected. I just cant figure out why its doing this?
     

    function doAnim() {
    
        TL = new TimelineMax();
        TL.stop();
    
        TL.set([spriteSheet], { x: 0 });
        TL.set([bg], { alpha: 0 });
    
        TL.play()
        /*--- FRAME 1 IN ---*/
    
        TL
            .to(spriteContainer, .1, { autoAlpha: 1, ease: Sine.easeInOut })
            .to(spriteSheet, 1.5, { x: -11400, ease: SteppedEase.config(38) }, "+=0.2")
            .to(beam, .7, {autoAlpha:.6, ease:Sine.easeOut}, "+=.5") // If i remove this line the sprite is looped
            .call(loopMe)
    }
    
    function loopMe() {
        console.log("loopMe");
    
        TL.set([spriteSheet], { x: 0 });
    
        TL.restart();
    }

     

    simpleSpriteLoop.zip

  7. Hi There, I am not quite sure why the following code which simply repeats a timeline that plays a animated sprite twice works fine:
     

        TL = new TimelineMax({repeat:1});
        TL.stop();
        TL.set([spriteSheet], {x:0});
        TL.play();
        TL.addLabel("f1", "0")
    
        TL.to(spriteContainer, .1, {autoAlpha:1, ease:Sine.easeInOut}, "f1+=0");
        TL.to(spriteSheet, 1.5, {x:-(spriteWidth * spriteCopyFrame),ease:SteppedEase.config(spriteCopyFrame)});


    but if I add another tween after the sprite stepped ease animation, the sprite is not reanimated on the repeat but the new tween is animated twice as per the

    repeat:1


     

        TL = new TimelineMax({repeat:1});
        TL.stop();
        TL.set([spriteSheet], {x:0});
        TL.play();
        TL.addLabel("f1", "0")
    
        TL.to(spriteContainer, .1, {autoAlpha:1, ease:Sine.easeInOut}, "f1+=0");
        TL.to(spriteSheet, 1.5, {x:-(spriteWidth * spriteCopyFrame),ease:SteppedEase.config(spriteCopyFrame)});
        TL.to(beam, .5, {autoAlpha:.8, y:80, x:-35, scaleX:.35, scaleY:.35, ease:Sine.easeOut}, "f1+=1.9");


    Ive tried resetting the the sprites x position with different methods but still it will not replay and seems to always hold on the first frame. Any help appreciated as Ive spent a few hours trying different solutions without success

     

     

  8. I am using stepped ease to animate a sprite and it works fine.

    The problem i have is that there are so many frames that strip is now too wide and I need to have a grid of rows and columns of images

    Is there a way of animating the y position incrementally as well the x position using the following:

     

    TL.to(spriteSheet, 4, {x:-(spriteWidth * spriteNoOfFrames),ease:SteppedEase.config(spriteNoOfFrames)},"f1+=2.5" );

     

    Thanks in advance... I really would love to use stepped ease since its so slimline compared with other js sprite animation code.

  9. Hello,

    Simple question that I can can't seem to find the answer for in the docs.

    I want to split a word into characters and animate each character individually to a spot, but I cannot find the syntax to identify them individually, from what I gather they are stored as an array..

     

    I have
    
        var mySplitText = new SplitText("txt1");
    
        TL.to(mySplitText.chars, 0.5, {x:150, ease:Back.easeOut}) 

     

    But rather than shift all the characters by 150px to the right I want all the character to condenses to the same point at x=150

    Thanks in advance.

     

  10. Hi There,

     

    Finally migrating from Flash to HTML5 and am completely new to CSS & JS. I'm making some simple banners to get up to speed.

    I have a problem tweening single characters of a text which are broken apart in html using span tags. In the codepen example linked, why for example does the opacity property work fine but not the scale or co-ordinate positions?

     

    Thanks for you time,

     

    G*

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

×