Jump to content


  • Posts

  • Joined

  • Last visited


4 Newbie
  1. Thank you, much appreciated. The label stuff is awesome - I never realized that you could do that.
  2. Hi Dipscom, Can I ask you a couple of questions about the code. No rush or worries if you cant spare the time. There is a lot of new stuff for me that i don't quite understand. I don't understand the (element, _path) below. function circlePath(element, _path) { return TweenMax.to(element, 20, { bezier:{ values:_path, type:"cubic" }, ease:Linear.easeNone, repeat: -1 }); } and I don't understand "MoveCircles" bit below add(circlePath("#circle", path), "MoveCircles") To be honest it all looks like magic to me.
  3. Thanks for this. I am comparing just now - and learning. Appreciated.
  4. Thanks, and of course whenever suites you. And Happy Thanksgiving
  5. Hi, Thanks again for all your help. I have been playing with the code a bit more to get a series of looping animations happening at various times. I forked the original codepen here http://codepen.io/struthy/pen/QGgRzR I have a feeling My code is very convoluted. Can someone with a bit more experience show me how to do this more eloquently. Thanks in advance.
  6. Hi there - thanks for the reply. I have edited my original pen. The console errors have gone. But it is still not doing what I would like it to do. There are two circles that I would like to animate along separate paths Only the first circle (id="circle") is being animated just now. Help appreciated.
  7. Hi there, I am quite new to Gsap, I purchased the dev licence - its been great. I have stumble onto a bit of a problem though. I am trying to create a timeline which triggers animations along a path. Note: .to("#circle", 20, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone, repeat:-1}) works on my local machine, but .to("#circle-2", 20, {bezier:{values:pathTwo, type:"cubic"}, delay: -21, ease:Linear.easeNone, repeat:-1}); does not work
  8. I almost got there although I was missing the {paused:true} and the wipeAnimationHover bit of wipeAnimationHover.to(".device-ipad.client-sssc", 0.7, { x: "-30%", ease: Power4.easeOut, }) Thanks.
  9. Thanks very much - I will give it half an hour on my own before cheating Thanks again.
  10. Thanks Acccent - I will play about with that solution. Will prob take me a bit of time - I am no expert with javascript
  11. Hi, I am trying to get the animation to play back to its original position when the cursor leaves the button. Thanks in advance.
  12. Thanks this works. Ok - any future questions I will create a code pen and I will post in the correct forum. I was sure I had tried this solution,,,,, thanks again.
  13. Hi again, Another newbie question. Can anyone help. I am trying to get the last element in my timeline to start before the previous animation finishes. Thanks in advance. var h = $("h1"), para = $("p"), over = $(".overlay"), mod = $(".header-cta .module-cta"); var t1 = new TimelineLite() t1.from(over, 1, { css:{opacity: 0}, // /delay: 6 }); t1.from(h, 2, { css:{marginTop:400, opacity: 0}, ease:Bounce.easeOut, // /delay: 6 }); t1.from(para, 2, { css:{marginTop:600, opacity: 0}, ease:Bounce.easeOut, }, "-=1.3" ); t1.staggerFrom(mod, 1, { css:{marginTop:600, opacity: 0}, ease:Bounce.easeOut, }, 0.1, "stagger" );
  14. I have got what I want, I think I can work from this code. Thanks for the help var h = $("h1"), para = $("p"); var t1 = new TimelineLite() t1.from(h, 2, { css:{marginTop:400, opacity: 0}, ease:Bounce.easeOut, // /delay: 6 }); t1.from(para, 2, { css:{marginTop:400, opacity: 0}, ease:Bounce.easeOut, }, "-=1.3" );