Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by Jonny

  1. Hi Blake,


    I literally just swapped it out for TweenMax and indeed it is now working.

    What threw me off was that there weren't even any errors displaying the console when trying this with TweenLite..... 

  2. Hello,


    I have started this as a new topic as it's changed slightly.


    I am animating the opacity of an svg <g> layer.

    I am trying to target the layer and animate that, but nothing happens.

    The timeline seems to play because my onComplete callback is firing, but the tweens are not running it would appear.


    However, if I try to do the exact same tween in jquery animate method, then animation happens. So I am led to believe it is an issue with greensock, or I have made an error in my code, but seeing as the jquery version works perfectly I am not sure this is true.



    See the Pen zQXWVa?editors=1010 by JonnyPS (@JonnyPS) on CodePen

  3. 14 hours ago, PointC said:

    It's tough to troubleshoot since you have a working demo with divs, but it could certainly be an ID problem. Could you provide a non-working demo with the SVG?


    Also keep in mind that you can animate SVG properties at the group level and individual child element level. This can sometimes produce unintended results. Say a group has an opacity setting of 0.5 and one of the child elements also has an individual setting of opacity:0.5. That would actually be an opacity of 0.25 for that child. If you then animate the group to an opacity of 1, the individual element set to 0.5 would not animate to full opacity. 


    But, as I mentioned, a non-working demo with the SVG would help us troubleshoot for you. 


    Happy tweening. 

    Hi PointC, valid point, but i have checked and that is not what is happening. I have included a working demo of the final thing that I want in the codepen below.

    It would appear jquery can target the element fine, but greensock doesn't?

  4. Hi everyone, thanks so much for the responses.


    I have now implemented exactly what i want in a codepen and it's still not working.


    I have linked the codepen here, and on line 36 have included a jquery animate method which animates the svg exactly as i would like it to, but as soon as i comment it out and uncomment the greensock timeline on line 44 it doesn't work, but i know it should because the jquery version works.


    Any help would be greatly appreciated, the problem seems to be that greensock is not able to target the svg layer in this instance and i don't know why.

    See the Pen zQXWVa?editors=1010 by JonnyPS (@JonnyPS) on CodePen

  5. I am working on a project where i want a timelinelite to change opacity of svg layers.

    I've made a codepen above where i am using divs to replace the svg temporarily.


    when i copy this working code into my project and target the svg <g> instead of the divs here, nothing happens.


    Question: - My copying might have been buggy, but I am concerned timelinelite won't work with svgs, is this right?

    See the Pen rgQPVm?editors=0010 by JonnyPS (@JonnyPS) on CodePen

  6. Hello,


    As you will see from my codepen, I have multiple elements, which I want to apply a Greensock tween (actually eventually it will be a timeline) when the 'onmouseover' event is triggered.


    It is all working well, but it applies the Tweening to all elements, - i only want it to happen to the specific one i'm hovering over.

    I don't want to use different id's etc, because I will ultimately have multiple elements.

    The mouseover is targeting all the classes it finds a match to, not just the nested one in 'this' svg.....


    Essentially I want my tween to look like this, - I believe the logic to be correct but the syntax is not. (Bold is the part that is the problem):

        TweenMax.to( this > + '.logoCircle', 0.75, {alpha:0, delay:0})

    Thanks in advance for your help.




    See the Pen OxVwZp by JonnyPS (@JonnyPS) on CodePen

  7. Hello,


    What task automation and features would people most like to see in banner prodcution?

    I am building a production workflow using gulp and browsersync etc. Just wondering what people would most like to use in this instance.






  8. Hello, 


    In the attached codepen, i have two SVGs i've exported from illustrator.

    Both were exported as svg code and the first thing i do with greensock is convert to paths.


    I want the first (the vertical line) to be morphed into the second (the arrow shape).

    The idea is that it will be like the bow on a bow and arrow being pulled back.


    For some reason it just doesn't seem to work for me, any guidance would be appreciated.




    See the Pen ZOyybA by JonnyS (@JonnyS) on CodePen

  9. Hello,


    I have a simple animation that i would like to repeat multiple times. 


    However, I would like to play the whole timeline on the first run, but go back and start from a later position on subsequent runs.

    I only want to see the first part of the animation on the first run.


    I cannot work out how you would play the timeline, have a repeat and on subsequent runs start at label position.

    Any help on this greatly appreciated.


    thank you,

    Jonny :)

    See the Pen MKYqmp by JonnyS (@JonnyS) on CodePen

  10. Hi Blake, 


    Thanks very much for these links.

    Although my aim has changed from my original plan (the slider now starts at the beginning and ends after all the loops, with no restarting with animation timeline - think this is more useful for debugging purposes) - I have resolved it!! I am very happy about this.


    I created my animation timeline, and added a repeat method, the tl.exportRoot() method takes these repetitions into account as part of the totalDuration.


    If you are interested, here is a simplified codepen of what i've done:


    See the Pen mVdwWj by JonnyS (@JonnyS) on CodePen

    • Like 1
  11. Hello,


    I have been thinking about this issue for a while now.

    I want this tool to be adaptable and flexible for applying to different projects.


    This means that a few requirements are needed in order to achieve this with minimal tweaking:

    1. There should not be a need to manually search for greensock timeline names (hence the use of exportRoot())

    2. I have decided that I have approached this incorrectly, and that the slider should start at the beginning, and not loop with the animation timeline, but carry on and only reach the end when the animation timeline has stopped, after however many loops is required.


    This would involve pre determining how long an animation timeline is, and multiiplying that by however many loop i had.

    Is there a way to find the length before a timeline has been played?


    This way i could dertimine the length of the whole animation, not just the length of one loop, which is essentially what is happening now.



  12. Hello all, 


    Sorry for the slow reply, i haven't had the chance.

    Yes i understand what is happening here, and thank for the demo Blake.

    the everytl playhead wouldn't restart at the beginning position on loop because of the time that has already gone before in the tl timeline.


    Bit of a pain really but not sure how to over come this,  without moving away from using exportRoot, - it works perfectly well on the first loop, which is the most help.


    thank you for your help.



    Jonny :)

  13. Ok,


    This is visible through the behaviour of the slider, the first time it starts at the beginning (0/6seconds), then the second time half way through (6/12) and the third time two thirds of the way through (12/18seconds).


    Now i just got to figure out how to get everytl to revert back to the beginning on loop

  14. OK,


    I see what you're saying about the scope of actions within a function, but are you saying that the exportRoot() timeline will keep ticking over regardless of what happens within a timeline, - so the exportRoot version will only stop counting when my original tl stops and doesn't restart etc?


    I'm not sure how i can go back and reset the exportRoot() timeline to be 0 when the original one does?



  15. Hello,


    I am having difficulty with the greensock exportRoot() method.

    I have attached a basic codepen, and i'll explain the trouble here:


    I have a slider using jquery UI to scrub through my animation for debugging purposes.

    I want to be able to insert this slider into any animation i'm creating, so on the slider functions i use the timeline.exportRoot() to pick up any greensock timelines that might occur in the script; - I don't want to have to pick through the scripts to find out what the timeline variables are named each time, I want this to be an adaptable, flexible tool.


    I want to run an animation repeatedly, and i want the slider to go back to the beginning and restart animating on each loop accordingly, inline with the animation.

    As you will see in the codepen, this is not what happens.

    I have logged the time() for the animation timeline and the exportRoot version, and you will see that the exportRoot timeline does not go back and restart along with the animation timeline.


    Is there a simple way to achieve this?


    thank you very much.


    Jonny :)


    See the Pen RWXzaq?editors=001 by JonnyS (@JonnyS) on CodePen

  16. There were a couple of issues, most fundamentally, you hadn't loaded the jquery library in codepen.

    JQuery is a bit overkill anyway so i removed your document.ready(); call, and replaced it with:

    <body onload="init()">


    init(); simply calls needleSpin.play();


    I used a javascript mouseover event listener to detect the hover, and then paused/played the relevent timeline.

    take a look below.


    See the Pen wKLaoZ by JonnyS (@JonnyS) on CodePen



    • Like 1
  17. Hello,


    I am creating a pause/play button as part of a suite of debugging tools.

    I want this to be versatile so that it works across any greensock animation.

    What i need to do is retrieve the greensock timeline, (without relying on going in to each aniamtion and finding what the timeline variable has been named) so that when i click on my pause button, it will grab all greensock timelines and pause them.


    I can see that the timeline returns: s {vars: Object, _totalDuration: 5, _duration: 5, _delay: 0, _timeScale: 1…}_

    But can't see how to access this and pause it, 


    could anyone help?


    thank you, J.


  18. Hello,


    no codepen for this, i don't think it requires one, if this is not a common issue i will create a codepen to demonstrate the issue:


    I have a timeline with splitfield text animating character by character.

    Three headlines alpha in and then out one after another.


    This works great first loop, but i repeat the animation by going to a label:



    This works great the second loop so i replay as above.

    On the third loop the splitfield text has not appeared to have reset properly and certain characters are still showing (it looks like each character has stopped alphering out a certain point in the tween).


    Is this common?

    The only way i know to amend this is to use tl.clear();

    and then call tl.play();


    This works fine but the problem with this is that it wipes out my label, - even if i try tl.clear(false); and so the animation starts from the very beginning again.


    am i doing anything wrong or does anyone have similar problems with spltitextfield, or tl.clear and labels?


    thank you.

  19. Hello all, 


    I'm sure we're all making the transition to HTML5, and finding a lot out a long the way - and getting mixed messages a lot!

    I'm interested to hear people's opinions on using web fonts in html5 banners, as well as general approach to file size. 


    There seems to be very little to no advice on this, and i've had to liaise with ad server platforms on how to use web fonts - does it count as initial load, do we store locally or via CDN etc?


    What are other people's opinions?


    Currently I locally store all web fonts needed (ttf, woff, eot and svg).

    I only count the zipped file size of the largest type file format for each type weight, and add that to the html, css, js and images.

    - i link to GSAP via CDN.


    I try to aim to have the whole ad within 200k.

    Largest font size comes in to about 60-80k in total for two weights, that leaves 120-140k for everything else.


    I could use SVGs, but this makes it impossible to use splitText plugin for example.


    How are other people approaching these fresh challenges?



    J.  :)

  20. Hello,


    I am tweening a still image, on my really nice mac it looks fine but viewing it on IE11 on a PC, the image stutters and wobbles when tweening.


    I have added a window.onload function() {CSSPlugin.force3D = true;};

    i have tried CSSPLUGIN.force3D = true

    CSSPlugin.force3D:true etc etc.......



    Nothing seems to work (yes, i am including the CSSPLUGIN.min.js file), am i doing it wrong or at the wrong time?


    Still the image seems to shudder along during the tween.


    thanks for your help, also, i thought i could explain without codepen, but sorry i went against recommendation!


    Jonny :)