Jump to content
Search Community

Acmafali

Members

  • Posts

    10

  • Joined

  • Last visited

 Content Type 

Posts posted by Acmafali

    Angularjs 1.5 and Greensock, not animating. - Plunker

    in GSAP

    Posted

    Hey guys,

     

    Thank you for helping me out before but i have realised that i actually need to access to the scope using the ng animate module but I cant actually create and access the global timeline object in my animation function, so I would need to create a directive which isn't a problem, i need this so I can rewind and resume the timeline with button clicks. I'm just wondering do you guys have any elegant solutions at hand to resolve this problem or do you see any issues making use of a directive so that we can access the scope timeline object. 

     

    Thanks again for your help.

    How to approach this animation - drawing an arrow

    in GSAP

    Posted

    Hi Guys,
     
    I'm currently creating an animation that requires me to animate an arrow which looks like its being drawn, the arrow itself has a zig-zag before the arrow head. The arrow SVG is in the codepen link below. 
     
    So to explain in detail, I want the first circle at the bottom left to be filled left to right with the colour white and then the rectangle next to it and then to the next circle and so on, this colour goes all the way to the tip of the arrow head.

    I'm going to implement this on page with a black background and I'm planning to fill the arrow in white so it looks like its being drawn very quickly when animated with it being filled white.

     

    I have 2 versions of the arrow, one that is has a single path the other hasn't.

     

    Compound path:

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

     

    Single Path: (Codepen URL attached to this post)

     

    I'm just really confused on how to approach this problem, do i use clipping path or a mask? Do I use Draw SVG?

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

    Play and rewind to specific points in timeline

    in GSAP

    Posted

    Hi,

     

    I would like to know how to play to specific points in the timeline with one button which will then pause once that point is reached until the play button is pressed again. Also I would like to know how to rewind to specific points in the timeline which will pause to that point until its pressed again. So i will only have 2 buttons in total which is rewind to previous check point and forward to next check point.

     

    I know this seems really obvious but the logic behind this is actually confusing me.

     

    Thanks.

    Morphing help - cannot morph a <G> SVG element.

    in GSAP

    Posted

    Hi,

     

    I'm trying to morph one SVG to another, the SVG's are ontop of each other. Its an SVG of a brain that morphs into a thumbs up. I keep getting the error:

    WARNING: cannot morph a <G> SVG element. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing.

    The brain has an id of #start.

    The thumbs up as an id of #end.

     

    The thumbs up is hidden in the css.

     

    I'm not sure where I'm going wrong, the codepen is attached.

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

×
×
  • Create New...