BarryS

Hi guys, Thank you so much for the information you share on this forum. I often have a look to see what issue people are having, to not only find fixes, but also as a way to find some inspiring code examples. A few weeks ago I was also looking for a way to draw lines using GSAP and then went down the SVG route using Lazy Line Painter. http://lazylinepainter.info/ I can't wait to try out the above examples so that I can have more control over the lines. Thank you very much for sharing

Hi Jonathan and Bassta, Thank you for your explanations. I was looking at it thinking it was far more complicated than you have both explained. I must admit I haven't ventured into using CSS animation before due to the browser inconsistencies, so to be able to simply do it using GSAP is great. I feel a bit dumb for not thinking of simply fading the PNG in and out as I use fading all the time. But I'm glad I asked. Cheers

Hi guys, I was looking at the showcase and came across this site: http://co3.lemouv.fr I love it and can see where GSAP has been used amongst other cool things. I guess some of the animation is done with sprites, but can someone tell me how the glow on the hexagonal icons is done. I've looked and can see that the icons are simply PNGs, but I can't work out how the glow is created. Is it possible to add a glow to a transparent PNG using GSAP? Thanks in advance, Barry

Thanks Jack. I'll make sure I report it to the Chrome team. Cheers, Barry

Hi Jonathan and Carl, Thank you for your replies. I'm using XP and the Chrome version 28.0.1500.95. If I wanted to use the effect I'd need to create a alternative script for older browsers anyway. But I still thought it best to point it out. I had wanted to upload a screenshot of my version of Chrome but the uploader says the file is too big to upload. Essentially, what happens is the front of the card face is are not shown and all I see is a mirror image of the card face back. Cheers, Barry

Hi guys, It would appear the CodePen example of the 3D hover flip is broken in Chrome. http://codepen.io/GreenSock/pen/yzahJ I love this effect and got to work creating my own examples without first checking browser compatibility. Damn you Internet Explorer! I was so surprised that it didn't work on IE9 and 10. I supposed I should have expected it! Anyways, I just thought I'd let you know about it not working in Chrome as I thought should. It works beautifully in Firefox though. Thanks, Barry

I second what Jack says! Thanks for your help Rodrigo. I'll look forward to running through your tutorial.

Hi Rodrigo, Thank you for your suggestions. You were right about the CSS mucking it up. It seems that when I used an embedded @font-face and then tried to tween classes that changed it colour then IE8 had issues. At first I removed the font-face and used standard text and this was fine. I then went back and re-added the font-face but then simply used TweenLite to swap the class using a 0 second tween rather than fading it like I did before. TweenLite.to($('#headerText'), 0, {css:{className:"Pink"}}); This works an I'm happy. Thanks for your help. Cheers, Barry

Hi guys, Using alerts made me think "Why not just comment out a line of code at a time until I know which one is buggy". The offending example code is shown below (a similar line was used on each of the four clicks): TweenLite.to($('#headerText'), 1, {css:{className:"Pink"}}); And CSS: #headerText { margin:10px 0px 0px 15px; } .Pink { color:#CA005D; } .Orange { color:#F0AB00; } .Green { color:#008566; } .Black { color:#000000; } Why IE8 doesnt like it I dont know, but I've had to remove it for now. Thanks again for the pointers. Cheers, Barry

Hi guys, Thank you for taking the time to reply and offer some advice. I'll give it a go now and let you know how I get on. Thanks again, Barry

Hi Guys, I'm having a problem with IE8. My code works fine on IE6,7 and 9, and all Firefoxes that I have tested on. However, in IE8 it throws an error when you select the coloured buttons at the top of the page that animate a large DIV container from left to right. I can't really explain very well without you looking at an example. See here: http://www.cblendedlearning.com/greensock/example_code_for_greensock/ All the Tweening is in the index.html and you need to select the coloured dots at the top of the screen. You may find that the first you click does work, but the error is thrown on the next click. In IE8 the debugger states there is an unspecified error on line 75 of TweenMax.min.js. The code highlighted is c[v.replace(h,d)]=g[v].... Though this doesnt mean a lot to me! Before posting I downloaded the latest version of the greensock-v12-js and tried both TweenMax.js and TweenMax.min.js Thanks in advance. Barry

I feel so silly! Thanks for pointing it out for me as I was having one of those days where I just could not see what was wrong! Thank you for your help. Cheers, Barry

HI Carl, Just so you know, when I used older versions of the library this simple animation now works in Safari. I guess I downloaded the update this morning before Jack made the change back (see thread below). http://forums.greensock.com/topic/6639-tweens-not-working-on-ios6/ The issue with the older versions of FF still exits though. I'll keep looking too. Thanks, Barry

Hi Carl, Thanks for looking into this for me. I seem to be having one of those days when nothing is going right! I've put the files here and they are available for download: http://www.cblendedlearning.com/greensock/greensock_FF11_and_13_test.zip Thanks, Barry

Hiya, Here's my code. It looks so simple and yet I can't for the life or me work out why it doesnt work. Its also not working in Safari. I'm using jquery-1.7.1.js and TimelineMax.min.js, but in my last test I used the TweenLite.js with the addition of CSSPlugin.js and it still doesn't work. $(window).load(function(){ TweenLite.to(musician_001, 1.5, {css:{autoAlpha:1}, delay:1}); TweenLite.to(musician_002, 1.5, {css:{autoAlpha:1}, delay:1.5}); TweenLite.to(musician_003, 1.5, {css:{autoAlpha:1}, delay:2}); TweenLite.to(musician_004, 1.5, {css:{autoAlpha:1}, delay:2.5}); TweenLite.to(musician_005, 1.5, {css:{autoAlpha:1}, delay:3}); TweenLite.to(musician_006, 1.5, {css:{autoAlpha:1}, delay:3.5}); }); <img id="musician_001" src="images/tracking_progress/musicians_001.gif" alt="" class="musician_one"/> <img id="musician_002" src="images/tracking_progress/musicians_002.png" alt="" class="musician_two"/> <img id="musician_003" src="images/tracking_progress/musicians_003.gif" alt="" class="musician_three"/> <img id="musician_004" src="images/tracking_progress/musicians_006.gif" alt="" class="musician_four"/> <img id="musician_005" src="images/tracking_progress/musicians_005.gif" alt="" class="musician_six"/> <img id="musician_006" src="images/tracking_progress/musicians_004.gif" alt="" class="musician_five"/> Thank you in advnace. Barry