Leaderboard

I'm not sure if it will help with what you're doing, but the ThrowPropsPlugin has a track() method that will allow you to track velocity. https://greensock.com/docs/Plugins/ThrowPropsPlugin Happy tweening.

We don't have any tools that really do that directly -- detecting scroll direction and triggering appropriate animations. However, this demo from @mikel that started with @Chrysto and then got tweaked a bit by @OSUblake looks like it has the basic functionality in there: link to original post:

Well problem is that when you animate element above target and reduce height, it offsets scrollTo's target location. So assuming you don't really need to do animation as it is not visible anyway, you can use following method so you won't see any jumps. Otherwise you will just have to constantly update target using onUpdate callback so you won't see any jumps, but still it will have some awkward behavior depending on height reduction and position of elements.

You need scrollTo plugin for it to work. In demo you can see that I am passing id of second row as string and it stops at the right position. I re-read your question couple of times and it seems you are trying to achieve something similar to this. So you just need to pass id of the element until which you want to scroll. Does that help? If your implementation is different than this, please post an updated demo.

Just to clarify TweenLite includes the Power eases, so you don't need EasePack for those. The default ease is Power1.easeOut so even if you don't define an ease your animation should slow down at the end and not speed up. Like PointC said a demo would really help us clear this up. Definitely sounds like something strange is going on.

Hi @vicmortelmans Welcome to the forum. I'm not sure I completely follow your question, but I'm wondering if you may need to use an offsetY value to have both tweens play at the same time. You mentioned that it all works right if the first tween finishes before the second starts so if you can use the starting height value of that contentToHide element as a y offset in your scroll tween it may work for you. More info in the docs: https://greensock.com/docs/Plugins/ScrollToPlugin I'm just guessing based on the code you posted, but if you could create a demo, it would be much easier to troubleshoot the issue. Here's some info about that: Happy tweening and welcome aboard.

Using ThrowProps as PointC suggested is a great way to match the current velocity at the start of a new tween and then slow down as you meet your end value. It sounds like you will need another tween though to start moving in the opposite direction. I think another way of looking at this is to consider that instead of tweening the x or y position of your sub you could tween the velocity directly. //if you have something like ship.velocity = 30 //you can tween TweenLite.to(ship, 2, {velocity:0}); I suspect you may have a vx and vy value that gets changed based on user input. My point is you can tween those values to change the speed and direction of the object that is updating its position based on those values.

Hi @RichardC Is it just the ease for stopping the sub you're after? // this ease just creates a forward<->back-motion var stopEase = 'M0,0 C0.124,0 0.394,0.151 0.484,0.162 0.656,0.182 0.838,0 1,0'; function _Stop(speed) { TweenLite.to(div, 0.2, { ease: CustomEase.create("custom", stopEase), x: '-=' + 300*speed }); } _Stop(0.5);

Thank you so much @Sahil and @OSUblake . You people just saved my job. The whole idea of letting the responsive design go really helped me to make the website responsive and all I did was just rearrange certain things and animation. Thanks again.

Hi @hemmoleg Welcome to the forum. I see you're using TweenLite so perhaps you didn't load the EasePack? Another thing to check is if you've put the ease in the correct place in your tween vars? Here's a simple pen with a few different eases. My pen loads TweenMax which also loads the EasePack, but if you're loading TweenLite only, you need to load the EasePack too. TweenMax loads: TweenLite TweenMax TimelineLite TimelineMax CSSPlugin AttrPlugin RoundPropsPlugin DirectionalRotationPlugin BezierPlugin EasePack If you have other questions, a demo is most helpful in getting you the best answers. Hopefully that helps. Happy tweening.