Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by gareth

  1. I have a text animation that shows one word at a time. Is there a way I can fire a function at the end of each staggerTo (i.e each paragraph?)


    This is what I have: 


    tl.staggerTo(mySplitText.words, speed, {display:'block',repeat:1,yoyo:true}, speed*2,endOf)
    function endOf() {
      console.log ('end of paragraph')


    See the Pen wrXwra by garethj (@garethj) on CodePen

  2. ok so I can just grab the screen width (but will have to update on resize)

    var maxX =  window.innerWidth;

    which brings me to my next question how do you control when the snap is triggered ? at the moment it looks like you have to exceed 50% for the menu to snap either way. Is is possible to change this to say 25% i.e if I drag past 25% the menu will snap to 100% ?

  3. Hi,


    I have simple menu that I want to drag from 5% of the screen to 100%. 

    // changing this to "100%" does not work
    var maxX = 320
    Draggable.create(".menu", {
      edgeResistance: 1,
       bounds: {maxX:maxX, minX:0}, 
        snap: {
        x: [0, maxX]

    The menu works fine if I supply a pixel value for the bounds and snap points. It is possible to use % ?




    See the Pen xOdYqY by garethj (@garethj) on CodePen

  4. thanks Jonathan.


    It does not return the "live" value of the attr while tweening i.e it always returns  M100,300 C100,100 125,40 125,40, not the values as it is tweening. is it possible to do that? 

  5. sorry please close, it is easier to just create a new tween for the circle. 

    TweenMax.to("#circle", force, {x:bendAmount-100,repeat:-1,yoyo:true,ease:Power1.easeInOut});
  6. I would like to be able to get a svg point value as the tween is updating, so I can move another svg in sync:

    var curve = {
      d: 'M100,300 C100,100 ' + bendAmount + ',40  ' + bendAmount + ',40'
    TweenMax.to("#pole", force, {
      attr: curve,
      repeat: -1,
      yoyo: true,
      ease: RoughEase.ease.config({
        strength: 2,
        points: 20
      onUpdate: topper,
    function topper (tween) {
      // how do I get the values of curve ?

    I am trying to animate the circle so it attached to the top of the line. 


    See the Pen NAjRLV by garethj (@garethj) on CodePen

  7. Hi,


    How can I use a variable in the d section of this tween?

    TweenMax.to("#pole",force,{attr:{d:'M100,300 C100,100 110,40  110,40'},repeat:-1,yoyo:true});

    I tried 

    TweenMax.to("#pole",force,{attr:{d:'M100,300 C100,100' +force+',40'  +force+',40'},repeat:-1,yoyo:true});
  8. I have a simple animation which moves a 25% wide menu from off screen to 0:

    var menuMove = new TimelineMax();
    menuMove.to(menu, menuSpeed, {
        left: "0",
        ease: Power4.easeInOut

    On my 27inch screen the animation is fast, on mobile it is very slow. Is there a way to tie speed to screen size?

    See the Pen RaEQaO by eighthday (@eighthday) on CodePen

  9. I am trying to play a timeline once and then loop the last part of it. 


    I have tried using  tweenFromTo, but not sure if this is the right approach as the delay does not work and it's hard to work out start and end as it based on seconds: 

     myTl.tweenFromTo(blinkStart,blinkEnd, {delay:blinkGap,onComplete: blinking});

    See the Pen YyeeBw by eighthday (@eighthday) on CodePen

  10. Leaving aside the snap points, I am trying to do the same thing, but have the menu come in from the right. 


         //if less than halfway go back to fully open
       return (end > menuWidth*1.5) ? menuWidth*2 : 0;

    See the Pen gbGqBE by anon (@anon) on CodePen


    edit. got it .