Copy link to clipboard
Copied
Hey.
I want to create an animated chronological timeline on my website. I'm making a site about a band and wants to have a chronological timeline with the dates of releases, new members, live perfomance, etc. Anyone that has some tips, advices, and/or links to tutorials that can help me?
//Thanks in advance
Copy link to clipboard
Copied
Hi.
My suggestion would be for you to add prev/next buttons for desktop and a drag behavior for mobile. And both should have a pagination.
But we need to know exactly how you intend to implement this timeline. Can you tell us?
Regards,
JC
Copy link to clipboard
Copied
a line with years / months / dates, on a date there will be a headline /image that you can click to get more information
Copy link to clipboard
Copied
create your timeline with dates and make each date a movieclip.
on each date's inital frame, just put what you want displayed by default. add a this.stop() to that initial frame's actions panel. create another frame (labeled eg, "clicked" that shows what you want displayed if that date is clicked. (before spending a lot of time on the "clicked" frame, check what it looks like by taking the steps below. you'll most likely find you want a background for the clicked frame and/or you want to reposition the "clicked" frame contents.)
on the main timeline put each date movieclip on the timeline where you want it positioned, and assign it an instance name (eg, date_10202022). on the main timeline actions panel use:
this.date_10202022.addEventListener("click", dateF.bind(this);
function dateF(e){
if(e.currentTarget.currentFrame==0){
e.currentTarget.gotoAndStop("clicked");
} else {
e.currentTarget.gotoAndStop(0);
}
}
//////////////////////
the same dateF can be used for all your date movieclips. they all need a different instance names and they all need listener functions.
eg, if you had todays date 10/20/2022 and the previous 3 days date, in addition to the code above, use:
this.date_10192022.addEventListener("click", dateF.bind(this);
this.date_10182022.addEventListener("click", dateF.bind(this);
this.date_10172022.addEventListener("click", dateF.bind(this);
Copy link to clipboard
Copied
Thank you for your help.
Copy link to clipboard
Copied
you're welcome. if you're in need of help as you get started (or at any point), just ask.