Jonny

Hi Zach, thanks for the quick reply. Ah I see, the problem is that this is a greatly simplified version, and I am actually morphing some text I saved as an svg thinking I could use the morph plugin. Just to be clearm are you saying to abandon svgmorph plugin completely and use vanilla js?

I have a codepen (link attached), that has an svg of a black outlined square. I have two sliders, one to morph width of the square, and a second slider that morphs height of the square. The problem is this: If I move the first (width control) half way through the transition, and then I want to morph the height using the second slider, there is a bug in which the square morphs the height to the original width (so there is a width and height transition to the svg as it's morphing the height). What I want to be able to do is to morph the squares width with the first slider, and then from whatever width it is currently at, morph the height, maintaining current width. Is this possible? Another bug that happens is that if I morph width, then height, if I go back to morphing width, the svg snaps back to the original width before it starts morphing again. Thank you for any help, Regards, J

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.

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

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

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?

Thank you geedix, this was very helpful

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

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?

Thanks Carl. I'm using vanilla Javascript but 'this.querySelectorAll('.logoCircle')' worked equally as well Regards, Jonny

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

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

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.

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.

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