Jump to content


  • Posts

  • Joined

  • Last visited

Profile Information

  • Gender

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

azuki's Achievements



  1. Hi all, I'm experiencing the same issue with banner ads submitted to DoubleClick: One of your HTML5 assets is invalid and cannot be analyzed. Please correct any malformed assets and try again. Of the 5 ads I've submitted, 3 of them use the GSAP CDN and jQuery - all animating SVG objects, of which I've removed the <style> tags and placed in an external CSS file. @flysi3000 - I'm not finding any errors when inspecting the source in a browser. Was your solution immediately evident? Otherwise, I'd really appreciate any ideas here - as mentioned above, I'm just shooting in the dark with that very vague error message... thanks!
  2. azuki

    Glow effect?

    Thank you all for your help. After some tinkering and your much appreciated guidance, I've been able to get it working. @Jonathan, you're right - a codepen is the way to go. I'm working with assets that can't be public facing at the moment but I suppose I could create FPO assets to show how it's developing. Is that the best practice for sharing on codepen without revealing the client or project specifics? As a side note, working with SVGs is a huge learning experience!
  3. azuki

    Glow effect?

    Ok, I'm able to get the SVG object to glow. Interestingly, when the SVG was inside of a <div>, the glow filled the size of that div and thus was a box. When the <div> was removed, the glow was more natural around the shape. Seen here with the opening <div> tag that was removed: <div id="buyTwo"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 354.4 87.1" xml:space="preserve" enable-background="new 0 0 354.4 87.1" preserveAspectRatio="xMidYMin" filter="url(#glow)"> <defs> <filter id="glow" x="-50%" y="-50%" width="200%" height="200%"> <feGaussianBlur id="glowfeGaussianBlur" stdDeviation="40" result="blur"/> <feMerge> <feMergeNode in="blur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> Without placing the SVG in a <div>, I'm not able to position or animate it with the below line: Is there a way to target the entire SVG for animation? tl.set($buyTwo, {scale:0.9, top:40})
  4. azuki

    Glow effect?

    I did but didn't see any change so I'm assuming I placed this line incorrectly? Also, please let me know how I can reference my SVG shape rather than this circle? <circle cx="200" cy="200" r="50" fill="green" filter="url(#glow)"></circle> <div id="svgTest"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 354.4 87.1" xml:space="preserve" enable-background="new 0 0 354.4 87.1" preserveAspectRatio="xMidYMin"> <defs> <filter id="glow" x="-50%" y="-50%" width="200%" height="200%"> <feGaussianBlur stdDeviation="10" result="blur"/> <feMerge> <feMergeNode in="blur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <circle cx="200" cy="200" r="50" fill="green" filter="url(#glow)"></circle> <style type="text/css"> .st0{fill:#3CD52E;} .st1{fill:none;stroke:#EB0029;stroke-width:3.541;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st2{fill:none;stroke:#82BC00;stroke-width:4.0131;stroke-linecap:round;stroke-linejoin:round;} .st3{fill:none;stroke:#91C323;stroke-width:3.0689;stroke-linecap:round;stroke-linejoin:round;} .st4{fill:none;stroke:#9ECA43;stroke-width:2.3607;stroke-linecap:round;stroke-linejoin:round;} .st5{fill:none;stroke:#A5CD51;stroke-width:1.8885;stroke-linecap:round;stroke-linejoin:round;} .st6{fill:none;stroke:#ACD05E;stroke-width:1.1803;} .st7{fill:none;stroke:#C5DD8C;stroke-width:0.4721;stroke-linecap:round;stroke-linejoin:round;} </style> <g id="svgGraphic"> *below this is a ton of svg path content so I've omitted it.
  5. azuki

    Glow effect?

    Thank you both. However, I'm trying to make an irregular shape glow. Some context shown in the attachment, I'm trying to create a neon effect for an SVG graphic that I've created in Illustrator. Essentially, this is an outline of a font, creating a 'neon tube' graphic, ideally that I can make glow to simulate the neon effect. Unfortunately, the original font doesn't have an outlined version, hence the reason I recreated it in Illustrator - otherwise I'd love to use a font like this approach just to keep the code clean and animate that effect. So, I could be taking the wrong approach here (trying to glow an SVG) but I appreciate any other thoughts!
  6. azuki

    Glow effect?

    Outside of the text and box shadow options above, is there a way to add a glow effect to an SVG object? Trying to find a way to animate a glow effect on an irregular SVG shape. Any ideas?
  7. azuki

    Glow effect?

    Perfect, thank you!
  8. azuki

    Glow effect?

    Hi all, Back in the Flash greensock library, there was a glow effect for symbols and text. Is there anything like that for the HTML5 version? Ideally, I'd like to animate a glow effect for text, images, and SVG objects but I'm sure where to begin. Any thoughts? Thanks in advance!
  9. Hi Diaco, Thanks for your response. I do know how to create outlines in Illustrator however, I'm don't know where to get the SVG data to put into the html so I can start animating it. Where does the SVG data come from?
  10. Hi all, Apologies for a very green question here but I've searched through the interwebs and the forums here and can't seem to land on an answer (unless I have already and just didn't recognize it...) I'd like to explore the DrawSVG plugin to animate the outline of a word, much like the example used on the DrawSVG page here. However, I'm not clear on where/how the original illustration is created - in Illustrator or purely in code? Is the graphic first drawn in illustrator, exported as an svg file and then animated with GSAP? When looking at the source files for this tutorial, I don't see any Illustrator files, just the svg code in the html. Is this being drawn with coordinates and then animated? Likewise, when inspecting the source for the DrawSVG banner, the green-caped greensock illustration is composed of several "path class="gray-line"" lines - was this logo first created in Illustrator and the coordinates copied in Illustrator somehow? Again, apologies for what I'm sure is a simple answer via my verbose question but I'm not sure where to dive in so I can start animating. Any help is much appreciated!!
  11. Hi all, Thank you very much for taking the time to check out the project - and for the comments and feedback! It should be up and running now as I haven't taken it down since launch... Regarding viewing this outside of a mobile device: Yes, this was designed specifically for mobile but upon launch (gotta love great timing) the device detection from our side was breaking, allowing the mobile version to be viewed on a desktop browser rather than serving up a different desktop experience within our regular site framework. This had an interesting and unexpected result - the engagement from tablet users skyrocketed, where tablet users are typically served our normal desktop site. Unfortunately, this was unplanned so the experience wasn't designed with tablet in mind and less than ideal but it's definitely noted for future projects. Carl, thank you for your feedback. It seems a few bugs slipped through our QA - the nightmare scenario after pouring so much work into a project. This was built in the Zurb Foundation 5.0 framework which has a few responsive off-canvas nav bugs related to it. Definitely not trying to point the finger here - it is, after all, a framework to build upon and a fantastic starting point, imho. Thanks again for checking it out! Azuki
  12. howdy GSAP team! Just wanted to post a recently launched project using GSAP, specifically draggable and ThrowPropsPlugin. This is designed for mobile phones only so please check it out on your phone to get the full experience. http://www.crocs.com/spring thanks to Jack, Carl, and the whole GSAP community - always helpful and friendly! And thanks in advance for taking it for a spin Azuki
  13. Hi GSAP team, I need to create several display banner ads and would prefer to animate them using GSAP. However, the only animation file format that is accepted is Flash AS 2.0. While I can design the banners in Flash, which would be a single SWF file deliverable, I'd like to know how the rest of the community creates and delivers GSAP banners? From my experience, the basic animation would be a single GSAP html file using in-line CSS styles and referencing the greensock library hosted somewhere... Is that right? Any insight on this would be very much appreciated! thanks!
  14. Thanks to both of you for your reply. Carl, that pen is exactly what I was looking for. Thanks! Essentially, I'd like each "notch" position to be linkable - like a product carousel that I can spin and when it lands on a product ("notch"), it's clickable to a URL. Additionally, and I know I'm asking alot here so thank you for your patience, is it possible to have each notch position dynamically change a text field. So, if the dial spins, lands on "blue", a text field on the page updates to "blue". Each "notch" would have a different label that would dynamically update the text field. Thanks again!
  15. Hey GSAP team, I'm using the ThrowPropsPlugin and Draggable feature for a spinning dial of sorts. My dial will lock at 25.71 degrees (dividing a circle into 14 equal sections). I'd like to create a button that randomly spins the dial and stops at one of the defined sections. Has anyone created this kind of functionality or does anyone have any insight on how I might approach this? Also, in the GSAP dial example, the rotating image is a single "knob.png". My dial will have 14 different colors and I'd like each color to link to a new page. I realize this makes the dial a great deal more complex so I wanted to reach out for any suggestions on executing this elegantly. Thoughts? As always, thanks for any insight! azuki