Playing timeline edits my source code?

[ajhalls]

I noticed something funny today while implementing a right click on the timeline elements using dat.gui. As suggested, I store all my timeline info in a separate object which is then used to rebuild the timeline from scratch each time I make a change. The interesting thing is that once I hit play, it somehow changes my source vars and re-categorizes them somehow...

 

Click on the codepen, click on [show datGUI], expand a couple tweens so you can see all the vars.  Those are all populated from the values in the slidesData object. Then hit [Play]. (For reasons I don't want to diagnose, you have to click play 2X to get the JSON output to update).

 

Notice some of the data in dat.gui becomes "undefined". So interesting thing is happening there, it is taking JSON that looks like this:

[
    {
        "duration": "0",
        "vars": {
            "x": "+2000px"
        }
    },
    {
        "duration": "1",
        "vars": {
            "x": "0px",
            "ease": "Bounce.easeOut"
        }
    }
]

For some reason (and in ways I don't understand how Greensock even knows where to look to modify it), the sequence gets updated to look like this:

[
    {
        "duration": "0",
        "vars": {
            "css": {
                "x": "+2000px"
            }
        }
    },
    {
        "duration": "1",
        "vars": {
            "ease": "Bounce.easeOut",
            "css": {
                "x": "0px"
            }
        }
    }
]

This object should be completely outside Greensocks influence as it is only referenced to run the rebuildTimeline() function, and yet notice it added an extra level of objects called "css" for those transformations.

 

I can work around the problem, but it was just weird enough to ask what is going on, and I just KNEW that you guys would know the answer

 

The codepen is pretty awesome (if I may pat myself on the back). It can completely rebuild a scene, including animations, using only JSON data. It may be more complicated than was strictly required to show my problem, but it is a real world example of how I am using it

See the Pen GrYbKe?editors=1111 by ajhalls (@ajhalls) on CodePen

[OSUblake]

I didn't get a chance to go through your code, but the css object is created because of the autoCSS feature. It automatically wraps css props in a css object for you. Read about in the docs. Back in the day you would have to explicitly define properties for the CSSPlugin like this...

TweenLite.to(foo, 1, { css: { x: 100, opacity: 0.5 }});

And here's a thread you might find useful. I do the exact opposite of what you're doing. I create a JSON object from a timeline. Notice how the ColorPropsPlugin wraps the value in an object. That's the same thing the CSSPlugin is doing with css related properties.

https://greensock.com/forums/topic/15862-exporting-timelines/?p=69425

 

.

[ajhalls]

Thanks Blake, I noticed that Greensock organized it's data like that, I just couldn't figure out how / why it was reorganizing MY data