Jump to content
Search Community

cfx

Members
  • Posts

    18
  • Joined

  • Last visited

Everything posted by cfx

  1. cfx

    Sound playing twice

    Wouldn't have done it without you guys.
  2. cfx

    Sound playing twice

    Thanks Jack. Yes I do see and tried this earlier in the process but it wasn't working. However loaded the two new files you used for TweenMax and GSDevTools and used .call(player, [mySound], this, position) on the masterTL and all is working!! Nearly finished my anim now and can't say how grateful I am. Thank you so much - I'm really sorry if I caused you guys a bunch of work. Buzz
  3. cfx

    Sound playing twice

    Guys, Firstly, I was deeply impressed/grateful when Carl posted back on a Saturday! But now I see Jacks post from yesterday - can I just say here I think your commitment to an already great product is outstanding, you gentlemen are totally invested in GSAP and it allows guys like me to say "yes, we'll depend on this library". I think of you now as brothers in arms - when we launch our new site we'll be doing an article on GSAP. Ok, I'm going to grab the updated TweenMax and try it on my dev pen and see how it goes. I am still struggling with timing from the aspect of just using the timeline to control sound events. Using a simple patch for now with a setTimeout inside the sound function to allow me to pass a unique time variable to control deployment - not ideal obviously, particularly as any changes to the timeline will mean individual changes to those times which defeats the great power of the dev tools to control the tl! I've updated the pen so you can see what I'm aiming at. Again, if I'm being exceptionally dense feel free to humble me. Meanwhile, massive thumbs (socks) up for the Green Team. You rock. Buzz
  4. cfx

    Sound playing twice

    Guys, hate to open this topic again but I'm not getting the control over the sound I need with the set up I had, I also tried using the code as you had it Carl but I'm still getting a double playback on the sound. I'm obviously doing this completely wrong. Can anybody suggest the best way to trigger a sound with timing control? I'd be immensely grateful. I've updated the pen at the top with latest code sample...
  5. cfx

    Sound playing twice

    Final update ========== Ok, switched to howler to manage sound across devices and took sounds off the masterTL and put them within the individual timeline functions then started/stopped sounds with eventCallbacks and its syncs perfectly and means sounds don't need to be exactly the right length. <CODE> var rumble = new Howl({ src: ['mySound.mp3', 'mySound.ogg'], loop: false }); function player (sound) { sound.play(); } function playerStop (sound) { sound.stop(); } function runText (textLine) { TweenLite.set(textLine, {visibility:"visible"}); var mySplitText = new SplitText(textLine, { type: "chars" }), tl = new TimelineMax(); tl.staggerFrom(mySplitText.chars, 0.01, { opacity: 0 }, 0.04) .eventCallback("onStart", player, [mySound]) .eventCallback("onComplete", playerStop, [mySound]); return tl; } var masterTL = new TimelineMax(); masterTL.add(someFunction(), 0) .add(runText("#myText"), 1.35) .add(someOtherFunction), 2) Updated the pen for any interested. Appreciate all the help. Buzz
  6. cfx

    Sound playing twice

    ok - looks good. Obviously it's still sequenced in the masterTL but what about precise timing control - I take it as the audio isn't actually added to the tl I'll have to use audio methods to do that?
  7. cfx

    Sound playing twice

    Thanks, Carl - lightning speed reply! My apologies about the pen, I forked it off a private pen and forgot to make it public, I've changed that now. Thanks for the fix too, looking at it I can see this is right. I'll test it out and post back but looks good.. Really appreciate your time.
  8. cfx

    Sound playing twice

    Guys, simple codepen example (ignore the graphics I've just dumped stuff down) trying to work out why the sound isn't playing first time on play back but on playing again (or using loop in GSDEV player) its playing twice on the time line? Grateful for a steer here. Buzz
  9. Thanks Carl, all sorted! Both those bits of code you pointed out were the problem. The fade effect function I changed from the original tl i wrote and the return was left over from that. All the events on the masterTL were originally .add (six in total) but I changed a couple to experiment as the timeline side of GSAP is new to me, my previous anims were flash and AS mostly. Anyway came back to it all cold this morning and couldn't see the wood for the trees. I got to start working during the day again... Everything is now on the timeline and the fade I changed back to a tl too. It all works fine and the GSDevTools are replaying the same every time as you would expect from this very robust platform! Much obliged Green Crusader.. Buzz
  10. Guys, Although I've worked with GS before, GSDevTools is new to me. I'm loving it but finding I get varying results in the playback. I have some code which I'll list below and it includes a draw function then a splitText function then a fade function which are on a masterTL. I hit play and all's well but if I hit play to watch the animation again the fade gets quicker and seems to move up the timescale and if I hit play again it gets quicker still and then disappears. I've tried including TL functions to reset vars but it doesn't make any difference. Obviously the code doesn't change. <CODE> /*Draw Function - makes .svg with class="badge" visible then draws it, then fades the container div #splash and all works fine*/ function drawBadge (){ TweenLite.set("#coreBadge", {visibility:"visible"}); var tl = new TimelineLite(); tl.from(".badge", 0.6, { drawSVG: 0, delay: 0.2 }); tl.to("#splash", 0.6, {autoAlpha: 0, display:"none"}); return tl; } /*Split Text function - variable received to function as console confirms, makes <p> visible then performs splitText on <p> and works fine*/ function runText (textLine) { TweenLite.set(textLine, {visibility:"visible"}); var mySplitText = new SplitText(textLine, { type: "chars" }), tl = new TimelineLite(); console.log("done split ",textLine); tl.staggerFrom(mySplitText.chars, 0.01, { opacity: 0 }, 0.04); return tl; } /* Fade Function - variable received to function as console confirms, then tweens a simple repeating fade on same <p> as Split Text function and works fine first time*/ function hudFadeEffect (hudLine) { TweenMax.to(hudLine, 0.8, {delay: 0.8, alpha: 0, repeatDelay: 0.1, repeat: -1, yoyo: true}); console.log("fade effect",hudLine); return hudLine; } /*Timeline*/ var masterTL = new TimelineMax(); masterTL.add(drawBadge(), 0) .call(runText, ["#hudGenius"], 1) .call(hudFadeEffect, ["#hudGenius"], 2) What am I doing wrong? I know you'd probably appreciate a pen but mine's private - I can send the url to GS superfabheroes if you want via email. Buzz
  11. Ok, clearly never do things at 2 a.m. - turns out my index.js was ref'd in the head so of course it wasn't picking up the string elements on the page before the script ran. doh. Hope this maybe helpful to other late night developers. Now where's my coffee.. Thanks Carl. Buzz
  12. I've turned off all scripts except js/SplitText.min.js https://...../libs/gsap/1.20.3/TweenLite.min.js https://..../libs/gsap/1.20.3/TimelineLite.min.js and my working script but have commented out everything except the splitText function I posted. The problem can only be either the local environment, the splitText function or the html! Buzz
  13. Just done that Carl, reports 0.5.8..
  14. Guys, I don't understand this, using this simple splitText action inside a function, works fine on codepen but locally getting in browser console: TypeError: undefined is not an object (evaluating 'a.length') Any ideas? Set up is code in a local .js file correctly linked and working with other animations and html elements in index.html exactly as codepen example. 2 a.m. here so that might have something to do with it, not normally this dense... Buzz
  15. cfx

    Particle Ball

    That's really useful Blake! Thanks so much. Now go enjoy your Saturday - even superheroes have a day off... Buzz
  16. cfx

    Particle Ball

    Just to let you know, this was a piece of cake in THREE.js - will support it with GSAP. Buzz
  17. cfx

    Particle Ball

    Thanks for the reply. Actually this looks pretty straight forward with three.js and low overhead so great tip thanks! Buzz
  18. cfx

    Particle Ball

    Guys, I've used greenock before on website deployments but I'm no expert, we're going to be using it much more now and the first project we've come up with is (as usual) tricky. Is it possible within GSAP to replicate something like this? Seems ambitious but I'm sure GSAP can handle it Interested in any other threads that discuss these principles. Needless to say I'm trying to avoid defaulting to After Effects.. Buzz
×
×
  • Create New...