Skip to main content
Inspiring
July 11, 2025
Answered

csv. number Data-driven scroll animation

  • July 11, 2025
  • 2 replies
  • 1527 views

Hello,

Please. Help 

I am trying to format a .csv file so I can have a elon vs zuck Montly networth  data,

it name is test.csv

How to data smooth scrolling animation in same time,

How to data link the each text layers .....

V1 = Date (eg- 1/4/2010) 

V2= Elon Musk (eg- 804931507)

V3= Mark Zuckerberg (eg- 4047591069)

V4=  Elon Musk value - Mark Zuckerberg value (eg- 804931507 - 4047591069 = "-3,242,659,562" )

every text layer chang by time and value.

Please. help 

Correct answer Rv-123

Look at this example It should be animated like in that video Give an A-Z guide for that

 

2 replies

Rv-123AuthorCorrect answer
Inspiring
July 12, 2025

Look at this example It should be animated like in that video Give an A-Z guide for that

 

Dan Ebberts
Community Expert
Community Expert
July 12, 2025

First, I had to alter your csv file so that the numbers aren't such large integers. My test file (test3.csv), has converted the numbers to billions and looks like this:

Date,Elon Musk,Mark Zuckerberg
1/1/2010,0.8,4
1/2/2010,0.801643836,4.01586369
1/3/2010,0.803287671,4.03172738
1/4/2010,0.804931507,4.047591069
1/5/2010,0.806575342,4.063454759
1/6/2010,0.808219178,4.079318449
1/7/2010,0.809863014,4.095182139
1/8/2010,0.811506849,4.111045828
1/9/2010,0.813150685,4.126909518
1/10/2010,0.814794521,4.142773208
1/11/2010,0.816438356,4.158636898

I imported test3.csv and dropped it into my test comp as a layer so that the expressions have easy access to the number of rows of data.

I used this expression for layer v1:

period = 2; // update date every x seconds
n = thisComp.layer("test3.csv")("Data")("Number of Rows");
i = Math.min(Math.floor(time/period),n-1);
footage("test3.csv").dataValue([0,i])

This for v2:

period = 2; // update date every x seconds
n = thisComp.layer("test3.csv")("Data")("Number of Rows");
i = Math.floor(time/period);
if (i < n-1){
  cur = footage("test3.csv").dataValue([1,i]);
  next = footage("test3.csv").dataValue([1,i+1]);
  t = time%period
  val = linear(t,0,period,cur,next);
}else{
  val = footage("test3.csv").dataValue([1,n-1]);
}
Math.round(val*1000000000)

This for v3:

period = 2; // update date every x seconds
n = thisComp.layer("test3.csv")("Data")("Number of Rows");
i = Math.floor(time/period);
if (i < n-1){
  cur = footage("test3.csv").dataValue([2,i]);
  next = footage("test3.csv").dataValue([2,i+1]);
  t = time%period
  val = linear(t,0,period,cur,next);
}else{
  val = footage("test3.csv").dataValue([2,n-1]);
}
Math.round(val*1000000000)

and this for v4:

v2 = thisComp.layer("v2").text.sourceText;
v3 = thisComp.layer("v3").text.sourceText;
Number(v2) - Number(v3)

That should get you close.

 

Rv-123Author
Inspiring
July 13, 2025

@Dan Ebberts  Thank you very much for your support, I will keep you informed.

Dan Ebberts
Community Expert
Community Expert
July 11, 2025

I think you have left some things undefined, like how often the data updates. How often do the dates change? Does the other data interpolate between date changes, or does it just jump to the new value? Details like that.

Rv-123Author
Inspiring
July 12, 2025

Look at this example It should be animated like in that video Give an A-Z guide for that