bromel

@PointC Absolutely fantastic ? I applied your solution to what I already have so it looks like this: https://codepen.io/w9914420/pen/ExYRqap Just out of curiosity, my understanding of the code and repeat property is that it will repeat the instantiated values on the first call, is it then possible that on every repeat cycle we can call different delay and repeatDelay values when the timeline repeats itself? Many thanks Bromel

Hi all I am trying to create a speedline effect similar to this: https://codepen.io/chrisgannon/pen/EjVyXN As you can see the effect in this demo is quite seamless and I am trying to create the same effect. My setup is rather different due to the nature of how I am animating things in my project. I am slightly stuck in trying to repeat my animation in the same way. Any tips or insights on how to do this would be greatly appreciated. many thanks

@ZachSaucier I was curious to know if it is possible to tween the colours instead of [Top-right to Bottom-left] have them move [Bottom-left to Top-right] as in the below example: https://codepen.io/w9914420/pen/wvwjXOL I have tried adding to the offset and has you can see only the blue gets shifted is it possible to play this in reverse? Many thanks

@ZachSaucier This is Awesome!!! I feel like you have spoiled me ? Many thanks

Hi all it has been a while ? So i have been experimenting with SVG's and i am trying to animate gradient colors but in a way so that the selected colors sequentially change and infinitely repeat themselves. The best example of what I am trying to do is in this example by OSUblake. SVG Gradient As you can see the colors seamless cycle through and repeat. As you can see in my example I simply changed the stop-color value to it's neighboring counter-part value hoping it would achieve a similar effect, however this is not the case. So I wonder what is the best way i can tween the stop-colors values to reach the same effect. Any help, tips or Advice is most appreciated, many thanks and it's good to be back ? Bromel

Hi @Sahil Yes you are completely right, but the scrubber works in a slightly different way to the one demonstrated in this example. The audio example works like: tl.progress(audio.currentTime / audio.duration); so the integer can never be anything small than 0; This example works like: t2.progress(x / (volRect.width - knob2Rect.width)); But the x value can be a negative integer hence the need for Jack's awesome solution And tnxs again for help, most appreciated

@GreenSock So I best explain - I wanted to build a player that would allow me to synchronize both audio and tween together for which @Sahil has helped and done a cracking job on it. Seeing the power and the potential that GSDevTools has. It seems like a no-brainier to use it instead, since you have incorporated mobile and responsive considerations. For me the task would be to create a method of doing this, which would be challenging, but I also suspect that there is a 'best approach method' with GSDev's Architecture of doing this in the best way and that is beyond my capabilities (in my mind) But in terms of using it, no I do understand it, it is super easy to use Has for customizing it, it is relatively straight forward (for me) below is the unofficially 'Be my Valentine' non-dev theme But on more serious note there is a lot of scope for this tool to have a production ready version, just a thought tnxs Bromel

@GreenSock Hi Jack, thanks for the insight, absolutely brilliant. In regards to GSDevTools, I was speaking in regards to myself implementing the code, JavaScript is a bit of an illusive creature in my mind, if you asked me to do a complex Tween, I could probably pull it off. But ask me to use JavaScript to build something from scratch, I struggle to do so. Google is my life line Anyways tnxs again Jack, your support is awesome!!!

@GreenSock Hi jack I spoke too soon, I am not sure if I have found a bug or it's a case of adding some numbers somewhere, anyways I noticed that if you click right on the edge of the volume bar container the timeline goes right to the end. I was trying to work out way and it seems as if the this.x value gives you a negative integer. which bugs things up. However we do not get the same effect when we click right on the edge of the volume bar container at the end of the timeline I just thought you might know whats going on. tnxs again P.s I updated the pen

@GreenSock Hi Jack, I did apply and updateRange() at the end of the updatePosition(), but it seems to break things. Is not the onPress() call doing that anyway since draggable's update function is been called when this is triggered (I am just assuming). I think with GSDevTools there is a lot more work involved in hooking it all up, But GSDevTools is really good, been playing around with it

@Greensock - Hey jack, I had another revisit to the problem and came up with this: Is there any caveats to this method, it appears to work but might not be correct. what do you think? many tnxs for your help

@GreenSock so Jack just out of interest Sahil helped me to develop an audio player that was synced with a timeline, would it be possible to do the same thing with the GSDevTools. audioTween player many tnxs

@GreenSock Hi Jack, many thanks for the insight, I guess GSDevTools would be a more sensible option, but I just wanted to see if I could achieve something simply and also broaden my understanding of draggable. I think I get what you are saying so: 1. Seperate the scrubber and the bar logic 2. create a mousedown/touchstart/pointerdown event listener and do the logic for the bar 3. Use the scrubber to just control the timeline only I think I will give it another shot tnxs Jack

Hi all, I just playing around with draggable some more, and I am trying to get a better understanding of how it works. I have created a simple draggle timeline with an attached tween. I am now wanting to be able to to click on the scrub and position both the scrub and timeline accordingly. At the moment it is quite hit and miss and I am just trying to understand it better. So any help would be most appreciative. tnxs Bromel

@Sahil Sorry for rambling on, so the way you have done it in the codepen above is what I am looking for, which I guess is calculating the knob against the range. So I can apply the same method for my volume control also. many tnxs bromel

@Sahil Let me first start by saying a big big thank you for your help on this, I intended to only understand how to get one task completed. In the end I ended up creating something rather special It is by far from perfect and I still have a long way to go, but because of your time, I was able to gain slowly some of my lost skills and figure out a way. I think the last thing for me now, is to get the range and knobs appearing in sync with one another, I was battling this one (my maths is terrible) but I think it's a case of understanding how to deduct the knob value from the container and apply a magic number to it Again any help is always appreciated, tnxs for it all Bromel

@Sahil I took onboard what you said in regards to incorporating draggable and replacing jquery UI, I am just trying to work out a couple of issues and finding the best way to do it. 1. In my current example you will see that have have attached the timeline to the draggable knob, however you can see that it falls quite short in expanding fully within the container i am not sure how to do this, so any examples would be most useful. 2. I also want to bind the knob on the draggable to the playing of the timeline (similar to how jquery UI works) again any examples will be helpful I appreciate, your help on this, my JavaScript memory is very very very slowly coming back to me many tnxs bromel

@Sahil Fantastic!, many many tnxs

@Sahil My very last question, I have managed to create a test setup, for an animation that I want to do over an audio sample. I have been playing around with two different methods of updating the current time on the file "timeupdate" and "setInterval" methods. They both do the job but I wonder which one performance wise would be best (as in effect on overall animation playback) to develop with, or would you adopt another way. Any feedback welcome tnxs bromel Audio testing

@Sahil Many tnxs for your solution. it is exactly what i was looking for

Hello Everyone Its been a while and my javascript knowledge (somewhat very little) has completely left my mind, so please excuse me if this seems like a straight forward answer. In my codepen I am trying to control the audio seeking feature of the mp3 with the Jquery slider. I assumed it was something like aud.seeking = ( ui.value / 100); but this is not the case, any pointers in the right direction would be most appreciated, tnxs

Brilliiant, many many tnxs Carl

Good Evening I am wanting to tween a property of a javascript object. For example I simply want to change Obj.coeficient.value to = 5. Below is my object example. var Obj = { coeficient:{ type: "f", value:0.39 }, glowColor: { type: "g", value:5 }, power: { type: "a", value:2 }, } I have done a simple codepen to try and illustrate the problem. Any help will be extremely useful. bromel

Hi Carl Thanks for that pen it was very helpful, out of interest I went away a tried to find a method of reversing the animation so that e.g on a button click the value attribute would scramble to nothing, in the same fashion in which it reveals itself here is my pen. http://codepen.io/w9914420/pen/wGrOjY?editors=101 As you can see it kinda works, but I am not quite happy with the result, I just wonder if you could give some advice, again the effect which I am trying to achieve is a reverse scramble in the same way that it is revealed. regards bromel

Hello Carl, I know this is an old topic, but I am in agreement with mgalic in regards to use and placement of this parameter. All the on methods (onComplete, onReverse etc ) of GSAP (that I have used) have been within the {} braces for example if we do a simply tween with a call back TweenMax.to(element, 1, {opacity:0, onComplete:completeHandler, ease:Back.easeOut}); with this in mind it makes it simple to remember placement of the parameter (or any parameter) within this structure so we can add parameters like this: TweenMax.to(element, 1, {opacity:0, onComplete:completeHandler, onCompleteParams: ["input"],ease:Back.easeOut, useFrames:true}); so if we take the staggerTo method and apply a similar treatment and I will use this case TweenMax.staggerTo(".tile", 1, { autoAlpha: 0, ease: Power2.easeOut, onComplete: allComplete}, 1); we know this will work, if may not be the desired effect but using 'onComplete' in this case will mean that we call the function every time each tween as completed. So with this method a developer may expect to use the same design pattern to call the function when the entire sequence of tweens has completed so I would expect this TweenMax.staggerTo(".tile", 1, { autoAlpha: 0, ease: Power2.easeOut, onCompleteAll: allComplete}, 1); but this does not work has you have mentioned you need to do this: TweenMax.staggerTo(".tile", 1, { autoAlpha: 0, ease: Power2.easeOut }, 1, allComplete); which causes confusion because it goes against the design pattern of the method, after your curly braces you would expect to see only stagger nums, positions or labels. Again its just my opinion but being a designer I rely on convention, patterns and logic to execute my work, this method of implementation is not really clear in the docs, neither is it what I would expect. regards bromel