Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mikesol

Smooth transition for TimelineLite.seek

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

Hey all,

 

I'm trying to make an interactive musical example where using absolute coordinate in SVGs proved to be too cumbersome so I've switched to a TimelineLite where I can use only relative coordinates but have the possibility to rewind to certain states, obviating the need for absolute coordinates.

 

This works fine, but it would be nice to be able to animate seeks to certain positions in the timeline.  In the attached codepen, seek simply resets the timeline to the indicated point (0), but it would be nice to simultaneously move all of the objects to this point without having them abruptly go there or traverse the timeline backwards.

 

Any ideas how to accomplish this?

 

Thanks!
~Mike

See the Pen jbpPJq by mikesol (@mikesol) on CodePen

Link to comment
Share on other sites

Thanks for the quick reply!  This is almost what I'm looking for - the goal is to do something like tweenTo with two extra caveats :

 

  1. It should not retrace the timeline but rather do a smooth interpolation from the current value to the seek value.
  2. It should do this interpolation for a duration that I set instead of following the duration of the timeline.

 

Is this swingable with GSAP?

Link to comment
Share on other sites

You could seek() to wherever you want, then grab the values you need (since the timeline will have rendered them at that point), create some simple tweens (or a timeline) then seek() back to where you were previously at. It should look seamless. 

  • Like 1
Link to comment
Share on other sites

That sounds like a great idea!
I've hacked it another way by rewinding all the tweens at http://mikesolomon.org/rondpoint/dist/#/, but what you're talking about would work much better.

Are there convient getter methods in gsap?  I know that a lot of the properties can be accessed directly from the CSS, but stuff like scaleX or autoAlpha require extra translations of information, so it'd be really convenient to do something like:

timeline.get(['x','y','autoAlpha'])

and have it yield an associative array like:

{
  x:0,
  y:0,
  autoAlpha:0.1
}

is something like this doable? I couldn't find it reading the docs...

Link to comment
Share on other sites

In GSAP you can try to access the _gsTransform object to get the values of transforms.

 

For example, to access transforms x and y ..  you could do something like this:

var element = document.getElementById("element");

var x = element._gsTransform.x; // get x value
var y = element._gsTransform.y; // get y value

// using jQuery maybe something like this
var x = $('#element').get(0)._gsTransform.x;

// or like this:
var x = $('#element')[0]._gsTransform.x;

You can find more about this in the GSAP CSSPlugin Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • All transforms are cached in a _gsTransform object attached to the element, so you can tween individual properties without worrying that they'll be lost. You don't need to define all of the transform properties on every tween - only the ones you want to animate. You can read the transform-related values anytime, like element._gsTransform.scaleX. If you'd like to clear those values (including the transform applied to the inline style of the element), you can do TweenLite.set(element, {clearProps:"transform"});. If you'd like to force GSAP to re-parse the transform data from the css (rather than use the data it had recorded from previous tweens), you can pass parseTransform:true into the config object.

:)

  • Like 2
Link to comment
Share on other sites

Wow, cool stuff!

To what extent is this a public API? It seems like it is more like exposing an implementation.

It'd be great if GSAP could encapsulate this in a getter method and make that part of the public API. Is there a place I can file a ticket?

Link to comment
Share on other sites

A getter method seems like a great idea on the surface, but it's actually a lot more complex than it may sound. Every plugin would have to tie into that getter and you'd need to define which plugin should be asked for the property. For example, requesting "x" on a DOM node that's implemented in CSS is very different than "x" on an EaselJS object. And what if you get("drawSVG")? Hm. You can technically feed in various values like "true" or "10% 90%" or "10px 40px" or "50%" in as a setter...but what would you expect back from the getter? Which units? What about get("directionalRotation")? 

 

In most real-world scenarios, it's pretty easy for you to get the properties you want with your own simple JS. If we expose a getter method for all of GSAP, it becomes exponentially more complex and of course requires more kb to cover. I'm just not sure it's worth it. 

  • Like 4
Link to comment
Share on other sites

I definitely see where you're coming from - my biggest question is just one of API stability, but if the _gsTransform interface will hang around, I'm all for it!

  • Like 1
Link to comment
Share on other sites

Hi guys :)

 

how about this :

var box = document.querySelector('#box');

TweenLite.set( box,{x:10,y:200,rotation:50} );

function ElemGT(X,P){
  var XgT={};
  if(X._gsTransform){
    for(var i=P.length;i--{XgT[P[i]]=X._gsTransform[P[i]];}
  }
  return XgT;
};

console.log(  ElemGT( box , ['x','y','rotation','opacity'] )  );
// Object { x: 10, y: 200, rotation: 50, opacity: undefined }

See the Pen bVjZGN by MAW (@MAW) on CodePen

  • Like 2
Link to comment
Share on other sites

Nice Diaco, good job! :)

Link to comment
Share on other sites

Might be better if you add a little check to prevent errors.

function ElemGT(X,P){
  if (!X._gsTransform) TweenLite.set(X, {x: "+=0"});
  var XgT={};
  for(var i<P.length;i--{XgT[P[i]]=X._gsTransform[P[i]];}
  return XgT;
}
  • Like 1
Link to comment
Share on other sites

good call ! , now just return empty obj {} if can't find any transform via GSAP :)

 

See the Pen bVjZGN by MAW (@MAW) on CodePen

  • Like 1
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.
×