Jump to content
Search Community

Easing as separate object?

ajhalls 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

I am wondering if there is any way to declare the easing as separate from the effect? Something like:

mainTL.to(".sliderLayer-0", 2, {x: "595"}, ease:Linear.easeNone);
or 
mainTL.to(".sliderLayer-0", 2, {x: "595"}, {ease:Linear.easeNone});
instead of:
mainTL.to(".sliderLayer-0", 2, {x: "595", ease:Linear.easeNone});

I am trying to figure out a good system for storing the animation data and would love to be able to store the ease as separate so it is easier to concatonate everything without trying to insert it into the middle of the object :)

 

Just thought I would ask.

Link to comment
Share on other sites

Sorry, that would simply be impossible to wedge into the API like that. I'm curious why it's problematic to have in the regular vars object as it is now? In other words, what is it exactly that makes it difficult to store the data? Hint: you can define eases as strings if that's easier for you. Like ease:"Linear.easeNone"

  • Like 2
Link to comment
Share on other sites

It isn't a huge deal, I am just looking at ways to store things in the database and was thinking it would be nice to store the ease data in a separate table which could then be assigned to any particular tween. Since it has to be part of the other object, I have to concatenate things first, which isn't the worst, and maybe I am overthinking it and it will simplify itself along the way.

for instance, I have this in my database:

post-36693-0-30324000-1485972335_thumb.png

 

 

It would be cool to be able to have default ease effects stored there, but then in a separate table able to assign a different on, without manipulating the data too much. As it is, I just use something like this:

function resequenceJSON(sequence) {
    var greenAniArray = {
        options: {}
    };
    if ($.isArray(sequence)) {

        for (S = 0; S < sequence.length; S++) {
            for (var setting in sequence[S]) {
                if (setting == "duration") {
                    greenAniArray["duration"] = sequence[S][setting];
                } else {
                    greenAniArray["options"][setting] = sequence[S][setting];
                }
            }
            animationSequence = greenAniArray["options"];
            animationDuration = greenAniArray["duration"];
        }
    } else {
        for (var setting in sequence) {
            if (setting == "duration") {
                greenAniArray["duration"] = sequence[setting];
            } else if (setting == "ease") {
                greenAniArray["ease"] = sequence[setting];
            } else if (setting == "sequence") {
                greenAniArray["sequence"] = sequence[setting];
            }
        }

        animationSequence = greenAniArray["sequence"];
        animationDuration = greenAniArray["duration"];

    }
}

   and then assemble the info later.

 assembledTimeline += '.to(' + targetItem + ', ' + animationDuration + ', ' + JSON.stringify(animationSequence) + ')';
Link to comment
Share on other sites

You could probably simplify a lot of that using lodash.

 

You said you wanted some default values? It's really easy to do that with the defaults method. It goes from to left to right, adding any properties that aren't defined.

 

Here, foo doesn't have a y property, so it's going to assign it one.

var foo = { x: 100, ease: "Back.easeInOut" };
var bar = { y: 500, ease: "Power1.easeOut" };

_.defaults(foo, bar);
// => { x: 100, y: 500, ease: "Back.easeInOut" }

You can run it though as many objects as you want, but it only modifies the first one. You can use an empty one if you don't want to modify an existing object.

var foo = { x: 100, y: 250 };
var bar = { y: 500, ease: "Power1.easeOut" };
var baz = { y: 300, rotation: 45 };

var obj = _.defaults({}, foo, bar, baz);
// => { rotation: 45, x: 100, y: 250, ease: "Power1.easeOut" }

That's just one example. There are hundreds of other methods that are just as useful. Some that come to mind for this kind of thing are union, zipObject, merge, omit, pick, toPairs... too many to name.

.

  • Like 2
Link to comment
Share on other sites

Thanks guys, sometimes I forget to google for the easy way of doing things. I was so stuck on what I already knew that I forgot that there was probably an easy way to do it. Turns out I just needed to know about the basic javascript .assign() function, or as Blake noted Underscore has a method, as soes jQuery and many others to merge two arrays.

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

 

I am embarrased to admit I actually went through the trouble of rebuildin the process on my own before I got home and even thought about googling for a way to assign a new object to an existing object :)

  var assembleTween = "{";
  for (N = 0; N < newTween.length; N++) {
    if(N < newTween.length-1){
      assembleTween +="\"" +newTween[N]['option'] +"\" : \"" + newTween[N]['value'] +"\",";
    } else{
      assembleTween +="\"" +newTween[N]['option'] +"\" : \"" + newTween[N]['value'] +"\", \"ease\":\"" +ease +"\"";
    }
  }
  assembleTween +="}";

instead of:

newTween = $.extend(newTween, { [option]: value });
Link to comment
Share on other sites

It seems like we are back to concatenating vars to a string if you want to use CustomEase unless you know a better way, such as how to add the returned object of

CustomEase.create('custom','M0,0,C0.104,0.204,0.492,1,1,1')

to the timeline.

 

http://stackoverflow.com/questions/42120385/store-unexecuted-function-in-json

 

I am looking at OSUBlake's custom ease tool (

See the Pen b7f5c5b3456eef085930d08d91b1cb1c?editors=0011 by osublake (@osublake) on CodePen

) to see if there is an option to use his function instead.

Link to comment
Share on other sites

It sounds like the way you're doing things might benefit most from a parsing mechanism that you build so that when you read things back from the database, you can look for and transform some of the special types of data like CustomEase instances. For example, you could store a CustomEase as "customEase" property of your JSON object and then look for that in your parser and if it's found, you do the proper conversion. 

//JSON
{ customEase: {id:'custom', data: 'M0,0,C0.104,0.204,0.492,1,1,1'} ... }

//then in your parser...
if (obj.customEase) {
  vars.ease = CustomEase.create(obj.customEase.id, obj.customEase.data);
}

You could do that sort of thing for any special data you need, not just CustomEase. 

 

Anyway, hopefully that helps. I guess you could use eval() there too - I just try to avoid that personally. 

  • Like 2
Link to comment
Share on other sites

Wow, thanks Jack! I have no idea what is different about that solution than what I was doing:

if (sequence[S]["customEase"]){
  ease = sequence[S]["customEase"]
  $.extend(true, sequence, {"ease": CustomEase.create('custom, '  + ease + )});
}

from a console.log() I can't tell a difference in the object "sequence" between the two, but your way works, where mine didn't.

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...