Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

swampthang last won the day on June 19 2016

swampthang had the most liked content!

swampthang

BusinessGreen
  • Posts

    372
  • Joined

  • Last visited

  • Days Won

    1

Community Answers

  1. swampthang's post in Failed to decode downloaded font was marked as the answer   
    Thanks for the input, Jonathan. Following is an explanation of why I couldn't replicate this in a codepen.
     
    I finally found out what was causing those pesky errors. In case someone else runs into this problem I'm posting the resolution.
     
    This is an Electron app which uses the Chromium browser. Electron allows you to create desktop applications using HTML, CSS and Javascript and you can use anything from the npm library just about.
     
    Loading all the system fonts on a user's computer was just a matter of snagging all the font files in the various fonts folders but I was (wrongly) under the impression that I had to create a css file with @font-face rules in the electron app for all the local fonts. I found out that all I have to do is know the font-family for the font and it would style the fonts directly from the system. Having the css file with a bunch of @font-face definitions and font-family declarations was not only confusing the system, it was really slowing down the loading of the app.
     
    I completely removed the css file and everything is styling correctly and the errors/warnings are gone!
     
    Just in case you are curious, snagging local system fonts can be done with several libraries but here is one that only uses javascript. The creator of this library is actively working on it and very knowledgable about fonts. He's the one who enlightened me regarding not having to create the css file for system fonts.
     
    https://github.com/rBurgett/system-font-families
  2. swampthang's post in crossfade background causes SVG text to fade was marked as the answer   
    Ok, I think I figured out a better way to handle this since it's just a background crossfade that I'm after. 
     

    See the Pen pRRMjj by swampthang (@swampthang) on CodePen
     
    Transition (crossFade) works fine in WebKit but not so smoothly in Firefox. If anyone has an idea on how to fix that in FireFox please speak up. Personally, I'm not worried about FF for my needs.
  3. swampthang's post in Scale up from zero was marked as the answer   
    Hmmm, seems to have fixed the scale issue but it's not successfully setting Draggable now. Actually it was a conflict with how I have the transforms set up and CSSPlugin.useSVGTransformAttr = true. So I was able to fix the zoom from zero thing using the code above and remove CSSPlugin.useSVGTransformAttr = true.
  4. swampthang's post in Back to back directional rotation was marked as the answer   
    I decided to use the _gsTransform.rotation = 0 approach. Doesn't nuke the positioning of the SVG. I updated the pen in case anyone needs help with this too. It's in the clearVars function on line 22.
  5. swampthang's post in drawSVG mask out to reveal image was marked as the answer   
    The solution to the issue in this post is definitely Blake's post quoted above. The final, working version with the single paths not drawing issue fixed is here...

    See the Pen KrYAdo?editors=1010 by swampthang (@swampthang) on CodePen
  6. swampthang's post in Understanding overwrite:all was marked as the answer   
    I think my thick skull is beginning to get the picture. I was not successfully implementing invalidate() and needed to deal with Draggable on the tweened object. Got a clue from Rodrigo when he said:
     
     
    So, I changed the tween from a "from" tween to a "fromTo" tween. I'm able now to handle user changes because there are several variables available at all times.
    There's an onRelease callback on a Draggable object that returns an endX and endY variable. The fromTo Tween contains a vars.startAt object that stores the from x/y vars in an object. So, if I drag the object to a new position, the endX/endY values are available and I can snag the startAt x/y values from the tween object. 
     
    I built a new Codepen to play with all this and learn how things fire - when, what variables are returned, etc. Anyone who is interested in taking a look, it's here. 
     

    See the Pen qNrEQq by swampthang (@swampthang) on CodePen
     
    For example,
    See the Pen mEKomP by swampthang (@swampthang) on CodePen
    I figured out that if you set repeat to -1 (infinite repeat) the onComplete callbacks never fire (you can see the commented repeat on line 33). Little stuff like that can make a huge difference once you've built a big project and all of a sudden something isn't working like you think it should.
  7. swampthang's post in Path channels instead of stroke-width on path was marked as the answer   
    Wow, Blake! I just now saw this. Not sure how I missed your post. Always like seeing what you have to say. I looked over that Codepen and man, that makes my stomach hurt
     
    You're smarter than the average bear, that's for sure. I bookmarked the wiki links to floods fills and marching squares. Hehe, for now, I'm just gonna push back on the art.
  8. swampthang's post in Raphael Plugin for Free Transform Tool was marked as the answer   
    Thanks, Carl. I decided against using Raphael and of course, the Raphael FreeTransform tool. Ended up doing this.

    See the Pen WxEzgj by swampthang (@swampthang) on CodePen
×