Jump to content
GreenSock

ajhalls

Playing timeline edits my source code?

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

Link to comment
Share on other sites

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

 

.

  • Like 3
Link to comment
Share on other sites

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 :)

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