Pons

The code seems similar. In my case the animation is called multiple times, its a screen transition animation. So each time user navigate to another screen, this tween is called. In the first run, fps is 12 but from the second time onwards fps seems to be 1. In your example, I added a button and the animation is performing onclick. On the first click fps is 12 and animation is some what smooth, but from the second click, its jumps to the final position with fps 1.

console.clear();

function animatebox(){
  // Set a linear ease for a better visualisation
  TweenLite.defaultEase = Linear.easeNone;

  TweenLite.to(
   '.box',
   1,
   {
    x: 100,
    onStart:function() {
     console.log('Start')
     TweenLite.ticker.fps(12);
    },
    onComplete:function() {
     console.log('Complete');
     TweenLite.ticker.fps(1);
     // Tween the box back to show the different fps
     TweenLite.to('.box', 1, {x:0})
    }
   }
  )
 }

<button onclick="animatebox()">animate</button>
<div class="container">
    <div class="box"></div>
</div>

Thanks @Dipscom

But is there any way to change fps onStart and onComplete?

I am working on a HTML application which runs in an embedded device. There is a GSAP animation using TweenLite. For performance improvement I would like to do some tweaks in the frame per second of the animation. For a smooth animation, I need a fps(40) and as soon as the animation is complete, I would like to change the fps to fps(0).

TweenLite.to($(element), 0, {
    scale: 0.95,
    opacity: 0,
    onStart: function () {
        TweenLite.ticker.fps(40);
    },
    onComplete: function () {
        $(element).css("transform", "none");
        done();
        TweenLite.ticker.fps(0);
    }
});

But the animation is always taking fps(0). onStart TweenLite.ticker.fps(40); is not working. In stead of onStart, I also tried it as below.

TweenLite.ticker.fps(40);
TweenLite.to($(element), 0, {
    scale: 0.95,
    opacity: 0,
    onComplete: function () {
        $(element).css("transform", "none");
        done();
        TweenLite.ticker.fps(0);
    }
});

Anyone have some idea regarding this? Thanks in advance!

I have an application which runs on embedded browser. It has a scroll area where draggable is used for swipe animation. I am using snap: snapPoints(is an array) to align the scrolling content in particular points. snap works fine while user drags. But when the user touch on the scroll bar drag is not happening and the snap: does not work. Is there any way to trigger the snap: on onRelease? Below is my darggable initialization code.
 

Draggable.create("#scroller", {
    type: "scroll",
    bounds: "#scroller",
    throwProps: true,
    throwResistance: 9000,
    overshootTolerance: 0,
    allowEventDefault: true,
    snap: snapPoints,
    
    onRelease: function () {
        //any way to trigger snap: snapPoints here?
    }
});