Creative Communities of the World Forums

The peer to peer support community for media production professionals.

Forums Adobe After Effects Expressions Changing the length of a line over time based off external data

  • Changing the length of a line over time based off external data

  • Angela Ravi

    February 22, 2019 at 9:27 pm

    So I’m fairly new to after effects and I’m trying to use a JSON file to pull data from and change the length of a line. So say I have data that reads.


    I want the length of the line to match the data as time progresses. So the line starts of being 0px and after a second then grows to 50 px , after a second it grows to 100 and after a second it becomes 10. all the while smoothly animating between these values.

    Could someone tell me what the best way to do this would be? Any help would be greatly appreciated.


  • Scott McGee

    February 22, 2019 at 10:41 pm

    So there’s 2 ways you could do this. (Haven’t tested these. So you may have to tweak if they don’t work)

    If your Json was to look like this.

    “One” : 0,
    “Two” : 50,
    “Three” : 100,
    “Four” : 10

    First way allows to change timings based on keyframes. So set up your keyframes and add the below expression to the element you wish to animate.

    txt = footage(“Country.json”).sourceData;

    Key(1).value = txt.One;
    Key(2).value = txt.Two;
    Key(3).value = txt.Three;
    Key(4).value = txt.Four;

    Alternatively you can (found this on rocketstock. Again not tested)

    a = txt.One;
    b = txt.Two;
    c = txt.Three;
    d = txt.Four;

    ease(time,inPoint,inPoint+1,[a],[b]) + ease(time,inPoint+1,inPoint+2,[b],[c]) + ease(time,inPoint+2,inPoint+3,[c],[d]);

    Hopefully one of those does the trick for you.

  • Angela Ravi

    February 23, 2019 at 11:30 am

    Thanks a lot Scott McGee. I used another method to get it to work from one of the previous answers posted on here. I’d already tried the ease method previously but couldn’t get it to work. So I used this method suggested by Oleg Pirogov from 2 weeks before for another user..


    var dur = 0;

    for (var i=0, len = arr.length; i=time) break;

    i === len || i === len-1 ? arr[len-1].slider : linear(time, dur-arr[i].duration, dur, arr[i].slider, arr[i+1].slider);

    (Jason file will be like below)
    var arr = [{“ID”: 1, “slider”: 1000, “duration”: 4}, {“ID”: 2, “slider”:2000, “duration”: 4}, {“ID”: 3, “slider”: 3000, “duration”: 4}];

    I applied this to the width property of the line/rectangle and it works.

  • Scott McGee

    February 25, 2019 at 1:29 pm

    No problem,

    Just because I’ve had a chance to test them. The ease expression didn’t work how I thought it would. So as an alternative. I’m recorrecting the method just incase anyone tries it and fails.

    txt = footage(“Test.json”).sourceData;

    a = txt.One;
    b = txt.Two;
    c = txt.Three;
    d = txt.Four;

    if (time < 1){
    }else if (time < 2){
    }else linear(time,inPoint+2,inPoint+3,c,d);

    Looking at the expression you’ve posted, it just makes it tidier to for loop through. So you don’t have to keep writing else if, for when you have 20 linear(time,t1,t2,v1,v2) expressions. Glad you found that I was struggling to find a for loop which will come in handy myself. 🙂

Viewing 1 - 4 of 4 posts

Log in to reply.

We use anonymous cookies to give you the best experience we can.
Our Privacy policy | GDPR Policy