Jump to content
Search Community

Ease on Play

mlovett test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello all!

 

So I have button that plays a timeline when it's mousedown and then stops when mouse up, but I want it to ease into the play every time the button held down, so it doesn't feel so linear.

 

I haven't really used TweenLite very much, and I have the TweenMax script in my document.

 

So far my code looks like this:

 
var omni = sym.getSymbol("omnibed_side");
var pos = omni.getPosition();
 
 
if (pos < '3000')
{
omni.play();
}
 
else 
{
omni.stop();
}
 
I was thinking it'd go inside the "if" statement. Any help would be greatly appreciated!
 
-mlovett
Link to comment
Share on other sites

I'm having trouble understanding what you need. Can you please give more details on your project?

 

I am only guessing you might be using Edge Animate because I see sym.getSymbol(), but you don't mention that anywhere.

 

I really don't know enough about EdgeAnimate to help you, and we really try to keep our core focus on the GreenSock tools.

 

Here is a demo that illustrates how to ease in and out of a single TweenMax tween by adjusting the timeScale().

http://codepen.io/GreenSock/pen/LuIJj?editors=001

 

There are some EdgeAnimate guys that visit the forums, so perhaps if you explain more of what you are doing (and provide a zip of your files) someone can more effectively help you out.

 

Thanks!

Link to comment
Share on other sites

Ah, Sorry! Yeah, I'm using Edge Animate.

 

Basically what's happening is I have an "Up" symbol, a "Down" symbol, and a symbol containing a 3 second long animation of an object moving up, called "omni". So when you mouseDown on the "Up" symbol, "omni" plays and the object moves up. mouseUP and it stops. The same is true with the "Down" symbol except that instead of ".play()" it's ".playReverse()".

 

So what I'm looking for is a way to ease into the ".play()" or the ".playReverse()" so that it feels more fluid. I'm not sure if there is a way to do this, or in general a better way to accomplish this task as I am new to Edge and this coding in general. Eager to learn though, haha!

 

The reason I'm posting here is because I thought it might be accomplished somehow with TweenLite/TweenMax.

 

-mlovett

Link to comment
Share on other sites

Hi mlovett  :)

 

actually this isn't about GSAP ( TweenMax/Lite ) , you play Edge Animate Symbol's Timeline , Fortunately you can control Edge Timelines with GSAP :)

 

pls try this :

 

var mySymbol = sym.getSymbol("yourSymbol");
var time = {t:0};
var ToFrame;
var Tween = TweenMax.to(time,3,{paused:true,t:1,ease:Linear.easeNone,onUpdate:UpdateTl});

function UpdateTl(){
ToFrame = Math.round(time.t * mySymbol.getDuration());
mySymbol.stop(ToFrame);
}
// $('#Stage_BtnPlay') = sym.$('BtnPlay');
$('#Stage_BtnPlay').mousedown(function() {
  Tween.play();
  TweenLite.to(Tween,1,{timeScale:1});
});

$('#Stage_BtnRev').mousedown(function() {
  Tween.reverse();
  TweenLite.to(Tween,1,{timeScale:1});
});

$('#Stage_BtnRev,#Stage_BtnPlay').mouseup(function() {
  TweenLite.to(Tween,1,{timeScale:0,onComplete:function(){Tween.pause()}});
});
  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...