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

I've tried to upload some files but it says the limit is 21.03 kb which is obviously not enough. I'll try again later just in case its a glitch now. Thanks, Barry

Hello all, I'll post an example in a moment, but does anyone else have issues with older versions of Firefox. I've been developing in FF15 and have cross browser tested in IE6,7,8 and 9 as thats where I usualy have issues (they all work fine). I'm just about to check Chrome and Safari. I just tested in Firefox 11 and 13 (so not even that old really) none of my GreenSock animation works. Im sure its somthing simple, but worrying for me to say the least. I'll get an example up here shortly. Thanks, Barry

Hi Carl, Thanks for your reply. Its handy to know that it shouldnt effect the browser's rendering speed due to the divs being set to visibility:hidden. I cant imagine i'd be using more than 20 divs or so. In the code i showed above (but not the original dowload) it now finishes the last tween before jumping to the correct one (so i'm happy). Also, thanks for the praise... its much appreciated

I used an example that Jack gave me before and it works. I'm wary that in this case it may use up lots of memory to tween everything at the same time even though the divs aren't actually visible. Does tweening divs that arent actually visible still use up memory? I'm trying not to have stuttery tweens. They look great to me, but I'm thinking of users with older machines with less RAM. var counter = 1; var tl = new TimelineLite(); function animateSlides(SlideLeftIn, SlideRightIn) { tl.clear(); //kills all the tweens in the timeline and empties it. tl.appendMultiple( [TweenLite.to([LeftSlide001, LeftSlide002, LeftSlide003, LeftSlide004, LeftSlide005], 1.25, {css:{left:"-490", autoAlpha:0}, ease:Power2.easeInOut, delay:0} ), TweenLite.to([RightSlide001, RightSlide002, RightSlide003, RightSlide004, RightSlide005], 1.25, {css:{right:"-490", autoAlpha:0}, ease:Power2.easeInOut, delay:0} ) ]); tl.appendMultiple( [TweenLite.to(document.getElementById(SlideLeftIn), 1, {css:{left:"0", autoAlpha:1}} ), TweenLite.to(document.getElementById(SlideRightIn), 1, {css:{right:"0", autoAlpha:1}} )]); tl.restart(); } function showNext() { if (counter == 1) { animateSlides('LeftSlide002', 'RightSlide002'); TweenLite.to(BackButton, 0.25, {css:{autoAlpha:1}}); $("#pageNum").html("2"); counter++; } else if (counter == 2) { animateSlides('LeftSlide003', 'RightSlide003'); $("#pageNum").html("3"); counter++; } else if (counter == 3) { animateSlides('LeftSlide004', 'RightSlide004'); $("#pageNum").html("4"); counter++; } else if (counter == 4) { animateSlides('LeftSlide005', 'RightSlide005'); TweenLite.to(NextButton, 0, {css:{autoAlpha:0}}), TweenLite.to(NextButton2, 0, {css:{autoAlpha:1}}); $("#pageNum").html("5"); counter++; } } function showPrev() { if (counter == 2) { animateSlides('LeftSlide001', 'RightSlide001'); TweenLite.to(BackButton, 0.25, {css:{autoAlpha:0}}); $("#pageNum").html("1"); counter--; } else if (counter == 3) { animateSlides('LeftSlide002', 'RightSlide002'); $("#pageNum").html("2"); counter--; } else if (counter == 4) { animateSlides('LeftSlide003', 'RightSlide003'); $("#pageNum").html("3"); counter--; } else if (counter == 5) { animateSlides('LeftSlide004', 'RightSlide004'); TweenLite.to(NextButton, 0, {css:{autoAlpha:1}}), TweenLite.to(NextButton2, 0, {css:{autoAlpha:0}}); $("#pageNum").html("4"); counter--; } }

Hello all, I have a faily simple slideshow (see attached files) that is controled by back and next buttons. At the moment it works fine until you click the buttons quickly and get animation build up. I know users will do this and though its not a major issue I'd like to try and fix it. I'd like to be able to use labels to jump to the corresponding part of the Timeline after the current set of Tweens have finished. I've tried using the Bullet-Proof TimelineMax Transitions example here but I'm struggling. http://forums.greensock.com/topic/6349-bullet-proof-timelinemax-transitions/ Thanks in advance. Sorry if my example looks pretty lame but I had to take out the nice imagery as I do not have permission to upload it anyhere other than its intended final delivery. Thank you, Barry animation_build-up.zip

Hello all, Just letting you know that the version of GSAP that I downloaded today no longer crashes my Dreamweaver. Thanks a lot Barry

You were right of course! I just needed to change the Perspective angle of the movieclip in the 3D Position and view settings. Until now, I didnt even know they existed. Cheers, Barry

Thank you for the advice; I'll look into this now. Sorry for the lack of a coded example though. Thanks again, Barry

Hello all, I have a timeline based animated movie clip that I am trying to tween the position of with TweenLite. When I do so I get an unwanted skewing of the object. Ive tried to find a simple of way of fixing it but I can't. Carl thought it may have something to do with the 3d perspective and the objects relationship to the camera (Thanks for the heads up Carl). Thank you in advance. Barry

Thanks Carl, you're a star!! I've just signed up to Club Greensock for two reasons really. 1. so I could get my hands on the motion blur feature. And 2. so I could show my apprecation of the platform. I love the GSAP! If it isnt in there already, will the motion blur be available for JS? Thanks, Barry