PawleyBoboli

Ah-HAH! Rodrigo, your response led to the right answer... though it is not what I expected. You are right that I should be using $EV_SoundManager.playSFX() but I must also include the parameter for the sound file inside the parenthesis (just like when I use it for buttons on the page) and forego using the onStartParams element. In all the examples I have found, it seems that the parameters must be put in the Timeline call to a function as a separate attribute/value pairs, but in this case, this worked: var tlboxBtn = new TimelineMax({onStart: $EV_SoundManager.playSFX("glitch020"), paused : true }); // other stuff... element.grpanimation = tlboxBtn; element.grpanimation.play(); Not sure I understand why this should be different, but I appreciate your help. --Kevin

I have created a SoundManager object which loads my sounds and has functions for playing them. Most of the time, they are various click-sounds attached to buttons, but in some cases, there are longer sounds associated with a TimelineLite animation. I am trying to trigger them with this: var tlboxBtn = new TimelineMax({onStart: $EV_SoundManager.playSFX, onStartParams: ["glitch020"], paused : true }); // other animation items added to the TimeLine... then... element.grpanimation = tlboxBtn; element.grpanimation.play(); The first thing in the "playSFX" function of $EV_SoundManager is a log to the console displaying the name of the soundfile to play. This is working for all calls triggered from button clicks, but not when this timeline runs. No sound and no log statement. I could just create an anonymous function, call that from the TimelineMax, and have it trigger the function in the $EV_SoundManager object, but that seems like a step too many. Is there a better way to do this? Any help is appreciated. --Kevin

Thanks again Rodrigo. This works much better. As for reversing the hover animation on click, I found it is necessary. Since both timelines "clkAnimation" and "hvranimation" set the same color CSS attributes at the end of their sequences, reversing just the "clkAnimation" does not return the color to it's initial state if the "hvranimation" is still at the end of it's timeline. I think it's because your mouse hovers over a button in order to click it, so that timeline is also gets run and stays in effect until you hover out. Actually, it doesn't make sense to me, because in order to click a different button, one must hover out of the last selected button thereby reversing its "hvranimation" timeline. so it shouldn't make a difference - but for whatever reason, it doesn't work without reversing both timelines. --Kevin

Hi Folks, I have been trying to add a SplitText animation to my accordion menu but I cannot get the revert function to work, and apparently, it doesn't work in the GSAP example either. In the tutorial video here: http://www.greensock.com/splittext/ , at the 8:21 mark Carl shows how calling function allDone() { mySplitText.revert(); } returns the animated string elements back to a single div. However, in the CopePen example at: http://codepen.io/GreenSock/pen/mvhak the same function is used but the string is not being reverted back to a single div. I am getting the same behavior in my own attempts. I can't figure out why but hopefully someone here knows. Additionally, is it possible to chain separate SplitText animations and stagger their starts? I have tried chaining a few SplitText animations into a TimelineLight but not getting this to work. Thanks so much for any info. --Kevin

Thanks again for these tips Rodrigo. I am being exposed for the poser JScript/JQuery newbie that I am. I am still trying to get a handle on all the possibilities, and my head is still thinking ActionScript. I have incorporated your suggestions in a new codepen fork here: http://codepen.io/PawleyBoboli/pen/Ltlvs and they do clean up alot of my code. I added a test inside each click function for the existence of the "activeMod" and "activeChap" classes since errors were thrown if they did not exist (like at init). The new code works, but as before, if you click quickly back & forth between 2 chapter buttons, they will stop working. I think this might have something to with the timelines not completing between clicks? I tried changing the clickTl to .set(element, {className: "+=activeChap"}, 0) but that did not work. I also tried setting the duration of that tween to a very small number like 0.01, but also no go. I appreciate your continued input on this. Thanks --Kevin

Thanks both Rodrigo & Jonathan. Your input fixed both the highlight problem and the bug with FireFox. FWIW, I had created classes in my CSS for the active state of each button type. I figured when adding and removing the classes to the button instances would apply/remove those styles. Instead, using Rodrigo's code for tweening the CSS styles worked as long as I removed the classes from my CSS sheet. So in effect, I am now just using the classes as flags to determine the selected/active button, and changing the CSS with tweens. I have made a revised fork with everything working here: http://codepen.io/PawleyBoboli/pen/ofhqg Thanks so much! --Kevin

WHups... just discovered this accordion is not working at all in FireFox - but it does in Chrome and Safari. Gonna need to address that too eventually. --Kevin

Hi Folks, my first post to this forum. I've been using GSAP for Flash for years, but now trying to get a handle on working in JavaScript. GSAP for JS is a big help. I am working on a custom accordion menu and it mostly works, but has a bug where altering the "selected" look of a clicked button stops working after multiple clicks. i have created a CodePen project here: http://codepen.io/PawleyBoboli/pen/gjAxC Notes: I put this together from pieces of another example I found on the forum, but can't find again (sorry, too tired) I am using TimeLineLite to tween the addition of a class for the selected "active" item , and removal of the class for all others. It's working for the Module buttons, but for the Chapters inside a module, it stops highlighting your selection after clicking between 2 items repeatedly. Example:Open "SECTION MODULE 2" Click the 1st item - it highlights click the 2nd item - it highlights and the 1st one returns to previous state now click back & forth between them - all highlights stop working. I think my problem is related to the adding and removing of the ".activeChap" class but I am not sure. I have commented my code. Any help is greatly appreciated. --Kevin

Thanks for the tips Mike and Jonathan. I am going through Sublime 2's tutorial videos now and I appreciate Jonathan's tips on the script debugger tutorials for Firefox & Chrome. I will attack those next. Thanks again, --Kevin

Hi Folks, I am a long time ActionScript programmer and now making my way into JavaScript with GSAP. I have been using the Greensock Tweening plugins for Flash for years. As comfortable as I am with the Flash IDE, is there a similar IDE for programming HTML5 and JavaScript projects? I have dug around and there seems to be many applications but I am not sure what would be best to use. My projects will most likely include Canvas, JavaScript, JQuery, and video assets. I've got an Adobe account so I have access to the Edge products (Animate, Code, Inspect etc), but also have looked at using Eclipse, CodeKit, and TitaniumStudio. What is the best environment for programming/testing/debugging these kinds of projects? Thanks for any info. Happy New year all. --Kevin