azuki

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!

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!

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})

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.

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!

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?

Perfect, thank you!

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!

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?

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!!

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

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

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!

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!

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

wow. excellent example.

Hello greensockers, This is a "how's that done?" post rather than a plea for help solving something. I'm curious if anyone has any experience achieving a parallax effect on elements in a page. An impressive example - and incredible site overall, can be seen on the welcome page here: http://axel-aubert.fr/#accueil Most of my queries with Uncle Google have come up with solutions similar to Scrollorama, which is different. I did find Plax (http://cameronmcefee.com/plax/) but the demo isn't very smooth... wasn't able to find much beyond that. I realize this isn't completely related to greensock but as it revolves around web effects, it seems to be in the same universe. Plus, you guys are always very helpful So, any thoughts on how I might approach this? JS libraries? If it's greensock-able, I'd love to know! I'm guessing this experience degrades down to a static image or wonky version of parallax in non-modern browsers but it's just too fun not to try. thanks in advance for any insight! azuki

Thanks, Jack. I know you guys would only take time to put out something of quality. As a sidenote, I've always appreciated the DIY nature of greensock and the community. That is, the reward really does go to those that are willing to find examples, deconstruct them, experiment, and interact with the forums. While I do hope this platform continues to grow, I'd be thrown into a pathetic pit of depression if a video series for GSAP showed up on Lynda.com...

parkcastle, Thanks for posting your experience with this. I'm working with a display ad vendor that is just now making the transition from Flash to non-flash solutions. Amazingly, they haven't heard of this platform yet. I'm wondering what your deliverables for files looked like. With Flash, a simple SWF was enough (plus a fallback jpg). Using GSAP or any other platform, are you delivering as few files as possible? ie. in-line styles and the extra GSAP library or a folder containing HTML, a CSS folder, greensock, etc? Any info/insight you can provide would be great. thanks!

Hey Greensock team, I'm sure this isn't a new request but I check back here every so often to see if any new tutorials have been posted. Carl, I don't mean to call you out but I learned quite a bit from your early Flash tutorials and since your migration to greensock, I've been awaiting the same great learning content from snorkl.tv to appear here for GSAP. The slideshow is a great start for us beginners but are there any plans for any new video tutorials? Thanks in advance. Always appreciate the contribution you guys make to web dev! - azuki

Hi greensocks, First, I realize my request is only marginally related to Greensock by relation to SuperScrollorama but I thought this would be the best forum to ask. I've done as broad of a web search as possible on the topic and came up with this example: http://stackoverflow.com/questions/9925174/scrollorama-and-responsive-webdesign Which, honestly, while unanswered on that site, seems to be working. Still, does anybody else have any experience combining these two features? Is this even recommended for performance, stability, etc? As GSAP for javascript is fairly new, I often see questions posted here of the experimental nature so I'm hoping some minds will have given this some thought they'd like to share. As always, thanks for any insight!

nevermind! I had this in the CSS which was overriding the GSAP! .scratchFloat:hover { opacity:0; } Cheers to caffeinating properly before posting!

thanks, Carl. I can see how this is working in the JSFiddle but my implementation of it isn't producing the same tweened fadeout. what am I missing? <script type="text/javascript" src="js/greensock/TweenLite.min.js"></script> <script type="text/javascript" src="js/greensock/easing/EasePack.min.js"></script> <script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.scratchFloat').mouseover(function (e){ TweenLite.to($(this), .2, {css:{opacity:0}}); }); }); </script> The mouseover is fading out the ".scratchFloat" buttons but it's happening immediately rather than tweened. as always, thanks for your help!

hi all, After a good search in this forum, I'm surprised to find that I'm the first one to ask this question... unless my search skills have gone sour... Is there a really simple way to create a mouseover animation using GSAP? I'm not super familiar with javascript/jquery so this would be my first attempt at going this route to create a rollover event. Usually, I create all of my button animations in CSS but I have a very specific animation in mind that I can't do in CSS: on mouseover, the image simply fades out - not fading back in on mouseout. Basically, I just want the img/btn/whatever to fade out with the smooth easing of Greensock on a mouseover. Any tips? Sorry if this has been asked before!

Thanks, Carl. I was afraid a "Flash-like" solution might involve several technologies. I'll keep researching...