bromel

Hi Shaun, Thanks again, Yes you are very right, I think it was a case of me not paying attention to my coding, In this particular case my vars got the better of me. regards bromel

Hello all Just something I noticed In gsap I can change tween or change a class by simply doing TweenMax.to(myClass,.3,{className:"yourClass"}); so we can tween myClass to yourClass, but I get a console error if the classname has a '-' in it for example TweenMax.to(myClass-hypen,.3,{className:"yourClass"}); The following console msg proceeds: Uncaught TypeError: t.split is not a functionse @ TweenMax.min.js:15l.parse @ TweenMax.min.js:15l.parse @ TweenMax.min.js:16ye.parser @ TweenMax.min.js:16l._onInitTween @ TweenMax.min.js:16n._initProps @ TweenMax.min.js:16n._init @ TweenMax.min.js:16n.render @ TweenMax.min.js:17l.render @ TweenMax.min.js:14n.render @ TweenMax.min.js:16O._updateRoot.D.render @ TweenMax.min.js:16n.dispatchEvent @ TweenMax.min.js:16g @ TweenMax.min.js:16 So I am assuming that the Classname property does not like changing hyphenated classes although the '+=' and '-=' atributes work as expected. Any thoughts? bromel

Hello m4g1c14n I have just had a quick look at your pen, this is just a quick suggestion but mainly I would ask if the button map class is setup relative in your css as the other tweenable classes in this section. Here is my code suggestion //Strange choppiness started here! tl.staggerFrom ( $(container_menu).children() , 0.25, {y:"50px", autoAlpha:0, ease:Back.easeOut}, 0.1, "-=0.25" ); tl.from(button_map, 0.5, {y:"25px", opacity:0, ease:Back.easeIn}, "-=0.25"); tl.staggerFrom ( $(container_social).children() , 0.25, {y:"100px", autoAlpha:0, ease:Back.easeOut}, 0.1, "-=0.25" ); tl.from(button_like, 0.5, {x:"100px", autoAlpha:0, ease:Back.easeOut}, "-=0.25"); tl.from(address_title, 0.5, {y:"-25px", autoAlpha:0, ease:Back.easeOut}, "-=0.25"); This is a usefully article which might be of use to you http://greensock.com/forums/topic/6176-starting-opacity-when-autoalpha-fading-from-0-to-1/ Just double check your css, I believe you will find the issue lies there. regards bromel

+1 for cycle I think cycle is a more suitable word as suggests that the feature can go through a multitude of values, arrays etc. The word alt feels too ambiguous.

Hi Diaco I have managed to implement your solution which works nicely. http://codepen.io/w9914420/pen/aOgJvY Many tnxs Bromel

Hi Diaco Many thanks for this solution, your code makes it so simple to implement. I'll give this a go and comeback to you. regards bromel

Good evening All, I am just trying to create a loader screen, http://codepen.io/w9914420/pen/doExzE The issue that I having is that I am also wanting to move along the progress bars along the stage to create a infinite loop like the code pen below. http://codepen.io/w9914420/pen/rVgEqm Any help or pointers into achieving this effect will be most welcome. regards bromel

Hi Diaco, I have properly read Jack's explanation fully now, thanks for the heads up regards Bromel

I believe Carl came up with an ideal solution. http://greensock.com/forums/topic/8854-stagger-from-the-last-element/ regards Bromel

Good evening all, Many thanks for taking a look at this for me, especially when you guys are extremely busy. I have updated the code and added a new pen which can be found here. http://codepen.io/w9914420/pen/gbNwRd I have managed to get it working with the logic that I need to be functional. its not the most elegant code but it will do the job, although I question if it could be written better. what is important to note is that if the user clicks either of the main buttons (denied, cancel, allowed) whilst the start tween is onscreen or completed then i want my other tweens to do their job. If on start any of these buttons are pressed, then the user will only see a special-tween for the denied function. The final goal will to be disable the buttons after the first choice has been made, so as not to confuse the user. @OSUblake many thanks for the code, i like how you written it, I did not know u could feed vars, with assigned tweens in such a fashion. Please feel free to comment, im not a coder just someone who likes GSAP regards bromel

Hello Carl, Many thanks for this, i must have been playing around with the pen after I had submitted it. Im just going have a look into this further and get back to you on this. many thanks bromel

Hello everyone, It always seems to be the case u get the answer after a long walk in the park it looks like i did not reference my tween correctly: // this does not work(we mention the tween but don't reference it) if (status == 'denied') { myNorm.restart(); console.log('should have restarted the tween?'); } // lets reference it if (status == 'denied') { this.myNorm.restart(); console.log('should have restarted the tween?'); } this seems to have the affect, but I wonder what your thoughts are on this? again too much tnxs guys regards bromel

Good Afternoon, I am trying to be able to control a tween within a function that i have created. I am not sure weather what I am doing is possible within the scope or whether I am using the correct call back function My goal is to simply to reverse the direction of a tween when the call back is made, but I am unable to make reference to it within my function. http://codepen.io/w9914420/pen/ZYNgXW Any Help would be most appreciated. regards Bromel

Hi Diaco.AW many thanks, for correcting me on this. Awesome!!

Hello everyone, Sorry to interrupt this brilliant conversation, but could the same method be used to add other timelines to the Parent timelines instead of tweens. I did this code pen, but it does not seem to work. http://codepen.io/w9914420/pen/LEoNyv I just wonder if a similar method could be applied to using timelines instead of tweens. regards w9914420

Hi Diaco.AW Many, many thanks I very much appreciate your time on this, plus you have given me something to study and ponder on. regards bromel

Good evening All I have created a modal info box for which I had added the Draggable and scrollTo plugin for some added functionality. I am trying to do 2 things. 1. At the moment when you press either the 'up or down' button you get an incremental tween. 2. I am wanting to control the scroll by making it so that when either button is pressed and held down the scroll will smoothly move in the direction that you have pressed. I am not sure if this more a JS question since it would depend on the function used to make the call. I did come across this fiddle on my travels which works to an extent. var timeout, clicker = $('#clicker'); clicker.mousedown(function(){ timeout = setInterval(function(){ // Do something continuously }, 500); return false; }); $(document).mouseup(function(){ clearInterval(timeout); return false; }); I am wonder what would be the best way to approach this. Any ideas or suggestions most welcome. regards bromel

Hi Maelfyn You hit the nail on the head, this is exactly what I was trying to achieve opinions are always welcome . Im not too familiar with JS but I understand what you have done and now I have something to study. My immediate thought is that by your method, I could easily create libraries of tweens for one element. Thank you very much for your help. regards bromel

Good evening all, I have been experimenting with GSAP (which is awesome!!) and I am trying to create a loading animation for which can be viewed here: http://codepen.io/w9914420/pen/pvvPyW The effect does work, but I am wanting to keep the spinner, spinning clock-wise on 'loadout' (when the button is pressed). due to the method for which I have the animation working I was wondering if I could still have the animation in reverse but keep the rotation property going in the direction that I want it. initially I had in mind the use of: tlspin.kill({rotation:true}) in an effort to rebuild the animation again, but this did not work, out of interest is there a way to reinstate a tweens property once it has been killed? or is there another way of creating the same effect. many thanks Bromel

Hello Jamie, I much appreciate your answer on this and understand what you mean so in essence the full code looks like this: $("<div class='fly'>foo</div>").prependTo("body"); var tl = new TimelineLite(); var fly = $('.fly'); tl.to(fly, 3, {className:"flyaway", right:"632px"}) .to(fly, 2, {className:"flybye"}, 1) .to(fly, 2, {className:"dead"}); What I wanted to ask since I am completely new to Javascript/jquery/GSAP is more of how the cache object is being referenced when it is being applied. From a non-technical perspective it seems as if it will inherit the next class and hold that as 'fly' and then apply the next class and cache that has 'fly' also. This is just an assumption but is this more or less to what is actually happening with the object? bromel

Hello all, I have a div for which I want to sequence a string of classes. There are three classes in total, I can tween the first two but as for the last one I can not seem to make it work on the timeline. I would appreciate if someone could correct my error. Here is the link. http://codepen.io/w9914420/pen/GFyjD