Jump to content


  • Posts

  • Joined

  • Last visited


5 Newbie

Recent Profile Visitors

3,187 profile views
  1. Hi @PointCyes this is now resolved. It was targeting the layer correctly and changing the opacity, but because I hadn't included cssPlugin it wasn't visually showing. No errors are displayed when this happens either. Essentially all i had to do was include the plugin. thank you for your help.
  2. Jonny

    Targeting svg layers

    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.....
  3. 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. https://codepen.io/JonnyPS/pen/zQXWVa?editors=1010
  4. Jonny

    Targeting svg layers

    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?
  5. Jonny

    Targeting svg layers

    Thank you geedix, this was very helpful
  6. Jonny

    Targeting svg layers

    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. https://codepen.io/JonnyPS/pen/zQXWVa?editors=1010
  7. 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?
  8. Thanks Carl. I'm using vanilla Javascript but 'this.querySelectorAll('.logoCircle')' worked equally as well Regards, Jonny
  9. 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. Regards Jonny
  10. 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. Thanks, Jonny
  11. Jonny

    SVG morph problems

    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. Jonny.
  12. Hi Diaco, Sure, this is similar to the way i normally do it, but i really wanted to use the repeat:x in the timeline variable parameter.s thnaks for the quick reply.
  13. 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
  14. 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: http://codepen.io/JonnyS/pen/mVdwWj
  15. 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.