Jump to content
Search Community

Vars as String vs 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 working on retooling the animations from animate.css to greensock. I currently have this stored in the database:

fadeOutDownBig = 
    "duration": ".2",
    "vars": {
        "opacity": "1"
}, {
    "duration": ".2",
    "vars": {
        "opacity": "0",
        "transform": "translate3d(0, 2000px, 0)"

In response to: https://greensock.com/forums/topic/11874-full-animationcss-port-to-gsap-83-prepackaged-animations/#entry48567


I am trying to retool them to remove the transform and transform3d, but the issue I am dealing with is that when creating timeline events you have to submit them as an object, but some things can't be stored as objects (that I know of).


I have the 80 animations stored in the database which using a foreach loop create a drop down with the tween info stored as each options value. I then use jQuery to grab the value and use JSON.parse() to convert it into an object, which Greensock needs.

<select id="preDefined">
    <option value="[{'duration':'.8','vars':{'opacity':0,'y':'2000px'}}]"> fadeInDownBig</option>

    newTween = JSON.parse($("#preDefined").val());

That works, but if I want to actually have it start from the edge of the screen instead of 2000px above, since if it isn't low on the screen the opacity effect is not apparent and just looks like a slide in, then I need to use a javascript function to calculates the position, which would work if I typed it in without quotes like this:

TimelineLite.to(target, 1, {'opacity':0, 'y':calculatePosition(element).top * -1}})

But doesn't work because JSON.parse() fails to do it without quotes, but of course then it doesn't execute to return the position info. Thanks to OSUBlake, we have an excellent way of finding all that info:


Any tips on how I can use the JSON object data storage requirements along with Greensock's requirements to allow including functions?




As a side note, most of the examples I see here don't use quotes to define vars, which would be fine if it parsed strings. In my application, I threw in a manual add text box that users can copy and paste code from here into the application to get the desired results, but of course to define it as an object you have to do JSON.parse, which requires it to have quotes. To solve that, I put together a fun little regular expression to fix data.

goodJSON=badJSON.replace(/(['"])?([a-zA-Z#0-9_]+)(['"])?\s*:\s*(['"])?([a-zA-Z#0-9_+=]+)(['"])?/g, '"$2":"$5"');

See the Pen WwgQEV by osublake (@osublake) on CodePen

Link to comment
Share on other sites

Assuming your question is:


How do I store an expression like "calculatePosition(element).top * -1" as a String?


I really don't know, and I'm doubtful it is possible. My best guess is that maybe you can store a string reference in your json to the function you want to call like:


//load string data from somewhere
//this data allows something to move halfway across the screen
var data = {
  target: ".green",
  duration: "3",
  prop1Function:"halfWidth",//string key of function name

// in your app define a bunch of functions you can look up with string keys
var functions = []
functions["halfWidth"] = function() {
  return window.innerWidth/2;

// parse values from data and build a vars object
// in real life you would loop through object-value pairs in your data and not hard-code prop1Name / prop1Function
var tweenVars = {}
tweenVars[data.prop1Name] = functions[data.prop1Function](); // get half-width of window
tweenVars["ease"] = data.ease;

TweenLite.to(data.target, data.duration, tweenVars);


  • Like 1
Link to comment
Share on other sites

Thanks Carl, I never thought of that. When I got home and explained my problem to my wife, I realized I could also use the evil eval() command instead of JSON.parse() to end up with the same situation:

vars = eval([{'duration':'.8','vars':{'opacity':0,'y':calculatePosition($(".canvasItem")[0]).left * -1}}])

As I have admitted many times, I am still new enough to programming to not be sure just how evil a solution that would be, but I am so grateful to have your solution to use for "best practices".

  • Like 1
Link to comment
Share on other sites

Behind the scenes everything uses eval, so it couldn't be that evil. The evil comes from evaluating stuff from untrusted sources, like a user... and it can be slow.


Also look at the Function constructor as a way to get stuff out strings. Use the same caution as you would with eval here.


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