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

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

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.

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. Regards, Jonny

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

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

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

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. http://codepen.io/JonnyS/pen/wKLaoZ J.

i have spent all day on this looking into what gets logged in the console. This worked in about two minutes, and made life a lot lot simpler. thanks very much J.

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.

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: tl.play("mylabel"); 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.