Jump to content

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


  • Content Count

  • Joined

  • Last visited

Posts posted by BarryS

  1. 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 :)

  2. 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 :D

    • Like 1
  3. 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,









  4. 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.





  5. Hi guys,


    It would appear the CodePen example of the 3D hover flip is broken in Chrome.


    See the Pen yzahJ by GreenSock (@GreenSock) on CodePen


    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.







  6. 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.





  7. 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 {
    .Orange {
    .Green {
    .Black {


    Why IE8 doesnt like it I dont know, but I've had to remove it for now.


    Thanks again for the pointers.





  8. 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:




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


    Before posting I downloaded the latest version of the greensock-v12-js and tried both TweenMax.js and TweenMax.min.js


    Thanks in advance.



  9. 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.


    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.



  10. 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.





  11. 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 :)

  12. 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}} )]);
    function showNext() {
    if (counter == 1) {
     animateSlides('LeftSlide002', 'RightSlide002');
     TweenLite.to(BackButton, 0.25, {css:{autoAlpha:1}});
    else if  (counter == 2) {
     animateSlides('LeftSlide003', 'RightSlide003');
    else if  (counter == 3) {
     animateSlides('LeftSlide004', 'RightSlide004');
    else if  (counter == 4) {
     animateSlides('LeftSlide005', 'RightSlide005');
     TweenLite.to(NextButton, 0, {css:{autoAlpha:0}}),
     TweenLite.to(NextButton2, 0, {css:{autoAlpha:1}});
    function showPrev() {
    if  (counter == 2) {
     animateSlides('LeftSlide001', 'RightSlide001');
     TweenLite.to(BackButton, 0.25, {css:{autoAlpha:0}});
    else if  (counter == 3) {
     animateSlides('LeftSlide002', 'RightSlide002');
     else if  (counter == 4) {
     animateSlides('LeftSlide003', 'RightSlide003');
    else if  (counter == 5) {
     animateSlides('LeftSlide004', 'RightSlide004');
     TweenLite.to(NextButton, 0, {css:{autoAlpha:1}}),
     TweenLite.to(NextButton2, 0, {css:{autoAlpha:0}});

  13. 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.




    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,




  14. 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.