Jump to content
Search Community

LilaQ

Members

  • Posts

    39

  • Joined

  • Last visited

 Content Type 

Posts posted by LilaQ

    DrawSVG - Different animation speeds / times

    in GSAP

    Posted

    I have to extend this question...

     

    This may probably be the same issue that I already posted here: http://greensock.com/forums/topic/11066-drawsvg-queue-inset-paths/

     

    With your solution the paths animate to the correct duration, but now when I want to fill them, everything is filled. For example the globe on the left, the parts inside are supposed to be transparent, only the area between them is supposed to be filled. This works as expected with all the sub-paths in a single path-Element.

     

    How can that be achieved?

     

    Thanks in advance guys, you are awesome! :)

    DrawSVG - Different animation speeds / times

    in GSAP

    Posted

    Hi guys,

     

    I just noticed that DrawSVG runs for different durations with different SVGs, at least in my current case.

     

    I made a CodePen with the issue: 

    TweenMax.fromTo($(".svg-symbol"), 42, {drawSVG: "0%"}, {drawSVG: "true"});

    From this line I would expect all three SVGs to take 42 seconds to be completely drawn. But the first one is the quickest, the second one the second quickest and the third one takes about the 42 expected seconds (did not stop it). Originally it was set to 2 seconds, but then you virtually can not see the first one being drawn at all.

     

    Any help, once again, greatly appreciated!

     

    Best regards,

    See the Pen yyJMGZ by LilaQ (@LilaQ) on CodePen

    DrawSVG - queue inset paths?

    in GSAP

    Posted

    I just checked the W3 Docs and fiddled around with the 2 objects, there is no way to overwrite the bottom elements colored fill with the top elements transparent fill, so I guess this is a dead end.

     

    Only other way I would see is a non-minified version of the DrawSVGPlugin and modifiy it to tween multiple lines in a single path-object consecutively.

     

    Any hints, ideas etc.?

    Removing prior tweenend attribute

    in GSAP

    Posted

    First of all, sorry I'm replying so late.

     

    @Carl that looks great and I really love how you worked this out. I will have a deeper look at this and learn from it.

     

    Thank you very much for the time and effort you guys put into other peoples issues and questions! :)

     

    Best wishes,

    DrawSVG - queue inset paths?

    in GSAP

    Posted

    Hey guys,

     

    I hope I can get this across since english isn't my native language.

     

    I have a SVG-Logo which consists of several letters which have inset paths (like the "O", outside path, and inside path).

     

    Is there a way I can queue the inset paths to be drawn after the outside paths, and still be able to fill the whole letter?

     

     

    I tried to exclude the inset path to its own <path> element - this way I can draw the paths one after another. But I guess now I won't be able to fill the area between the outer and the inner path, only the area inside the inner path which is supposed to be transparent.

     

    I made a CodePen of it (without the actual images, I don't know how to import local images into a CodePen yet; the background is a close-up of human skin, the red box is actually an arm / hand holding a tattoo machine)

     

     

    Thanks in advance, you guys always find a way, I really love the forums here <3

     

    Best regards,

     

    See the Pen emzdwq by LilaQ (@LilaQ) on CodePen

    Removing prior tweenend attribute

    in GSAP

    Posted

    This is actually intentional, I want the characters to be spread apart through the padding, until the first character hits the left border (which is the end of the width tween), and then tween back to padding 0.

     

    It's supposed to look like the caracters are behaving like connected with springs.

     

    Any ideas on how to achieve this?

     

    I had a few ideas while trying to sleep, like:

     

    • creating a clone of the div (with display:none), including the characters with a set padding of 20px
    • measure the width of that div (is that even possible when not displayed?)
    • then tween to original div to that measured width on mouseleaves (which then should be enough to not break lines)
    • once the padding-tween is done, remove the measured width

    Now that I think about it again, this won't work b/c I have a text-align: right and this would just snap the element back at the end... :(

     

     

    However, ANY help and ideas would be greatly appreciated.

     

    Thanks in advance!

    Removing prior tweenend attribute

    in GSAP

    Posted

    Okay, sorry I have to mark it unanswered.

     

    The problem is following, if I try to add a padding as the effect for the tween back, it won't work, the inline-block div get's an inline width, which causes the characters to break down to the next line.

     

    I will make a CodePen to demonstrate right now.

     

    Edit:

     

    See the Pen wBGEOx by LilaQ (@LilaQ) on CodePen

     

    Note how the "child" div has an inline width of ~15% after the Tween. Any way to make the characters not break in the next lines until their padding 30px -> padding 0px is done?

    Removing prior tweenend attribute

    in GSAP

    Posted

    Hi,

     

    As far as I know the issue with tweening to auto is how the engine actually works. You'll see auto is a string that doesn't represents any numerical value, while "100%" is also a string but it does represents a numerical value which can be used by the CSS Plugin...

     

    That's what crossed my mind, too.

     

    Well, thing is, there WAS a solution - as you said, not terribly complicated - so, all is good :)

    Removing prior tweenend attribute

    in GSAP

    Posted

    Actually nothing fancy at all.

     

    See the Pen dPMjyg by LilaQ (@LilaQ) on CodePen

     

    This codepen here shows what I'm trying to accomplish (but with tweening back to the original width). Like you said, the reversing of a Timeline would work, I just want to additionally flip all the characters around 360 on the way back to its original position with the SplitTextPlugin.

     

    Edit:

     

    Sorry, the pen was not saved. It is now.

     

    Edit the 2nd:

     

    Of course if someone has an idea on how to accomplish my idea in any other way, I'm all ears.

    A have a div with a fixed with, a menu item inside (just text) on the left side of it. On hovering with the mouse, the text shall move to the right border of the parent div (at the moment accomplished with tweening the width to 100% and text-align: right), when the mouse leaves the object the text shall tween back to the left side of the parent div (with a little rotation of the characters).

    Removing prior tweenend attribute

    in GSAP

    Posted

    Hi guys,

     

    sorry for creating to many topics at the moment - it's just I know that I get the best help around here and I'm really trying to get some work done at the moment.

     

    My question:

     

    I have a <div> which is displayed as an inline-block, thus having a variable width (only wrapping around its content).

    At one point I want to tween the div to 100% width of its parent element (childsplay with GSAP).

    But after that, I want to remove the 100% value and tween it back to its original width and behaviour.

     

    How can I accomplish that?

     

    Thanks in advance, also for your patience with these, I'm pretty sure, easy questions.

     

    Best regards,

    DrawSVGPlugin - possible to get absolute coordinates?

    in GSAP

    Posted

    Hi guys,

     

    yesterday I successfully converted part of my companys logo to a SVG and let it draw with the new, awesome DrawSVGPlugin - works great and it's so fast to accomplish!

     

    Now I have a customer who is the owner of a tattoo shop - my idea was to animate his logo (handwriting of the name of the studio) as an SVG. What would be really cool if I could lay over an image of a brush, pen, tattoo machine, which follows the current draw process of the plugin.

     

    Is that possible? Is there a way to get the current coordinates in an update-callback or something?

     

    Thanks in advance! :)

     

    Best regards,

    rotateX on 3D-cube is off after a while

    in GSAP

    Posted

     

    Yes, you're assumption is exactly right. setTimeout is not accurate enough for this. Minor drifts in timing are going to make your tweens run funny.. as you have seen.

     

    2 more options:

     

    1: use TweenLite.delayedCall(duration, function) instead to fire a function every second and have it perfectly synched with the entire tweening engine: Look here: 

    See the Pen jEqaYw by GreenSock (@GreenSock) on CodePen

    I left that running for 20 minutes and its perfectly locked in. no time drift

     

    2: place an onComplete callback on your tween that basically runs whatever logic you need and re-creates a new tween

    TweenLite.to(someCube, 1, {rotationX:"+=90", onComplete:runLogic});

     

    A w e s o m e !

     

    Thank you so very much! :) The business license was SO well spent money, you guys deserve every single cent of it!

     

     

    btw cool demo;)

     

    Thanks, means a lot to me! :D 

    • Like 1

    rotateX on 3D-cube is off after a while

    in GSAP

    Posted

    Hi Diaco.AW

     

    thanks! The first issue is solved :)

     

    But the second one still exists, when I let the script run for 1-2 minutes, you can see that the box for the seconds is kinda crooked and did not rotate in full 90 degrees steps. :(

     

    It may very well be that it is my code / logic that is the problem here, but I can not seem to find the culprit. :(

     

    Edit:

    It seems the Tween sometimes gets called while it's still tweening, thus adding 90 degrees to the current rotation value, which leads to the obscure final rotation value. But I'm confused why it would get called while tweening, the Timeout only runs once a second... :(

     

    Any ideas?

    • Like 1
1
2
Page 1 of 2  
×
×
  • Create New...