Creating professional looking newsTickers with headings, subheadings and text

[perfG1]

Mikel

I have got my Codepen script to almost work... What I would like to see is subheadings show up to the right of the heading with a background-color #2A3132 and stay static while all the news under the subheadings are done. Then the subheadings will change to the next entry and all the news items will scroll for the next entry, till all entries in the subheadings are done. How can I do that?

Thanks in advance!

Sree

See the Pen ZEYgazq by properjon (@properjon) on CodePen

[perfG1]

Sorry, I forgot to fork it - here is the forked entry, my project - 

See the Pen yLVyNaM by inventor_2000 (@inventor_2000) on CodePen

[perfG1]

Mikel

I have got my Codepen script to almost work... What I would like to see is subheadings show up to the right of the heading with a background-color #2A3132 and stay static while all the news under the subheadings are done. Then the subheadings will change to the next entry and all the news items will scroll for the next entry, till all entries in the subheadings are done. How can I do that?

Thanks in advance!

Sree

[ZachSaucier]

Hey Sree. Sorry, I don't understand the question/issue. Can you please try to rephrase it?

[perfG1]

The strings in the above NewsTicker are laid out under subheadings as follows:
 

Indian Budget Headlines 

·          India aims high with 12% GDP Growth 

·          India builds momentum with record Tax collection in Q3 and green shoots

   

Global Headlines 

·         Myanmar leader Aung San Suu Kyi and other leaders detained

·          Chinese survey Ships straying into other Nations

·          Bomb and Gunfire rock Somali Capital, Terrorists Claim Responsibility

·          Taiwan says both Chinese and US Planes  entered defense zone

·          US Vows to Defend Philippines 

·          Thailand challenges Laos River Dam Building 

·          Blinken speaks QUAD with India 

·          Jake speaks Countering Chinese Narrative 

·          UK applies for TA - CPP Partnership and on top of the Queue 

 

As the news scrolls I would like to have the subheading be placed static to the right of PGurus Headlines: ... till the news entries under that subheading are finished. Then the text changes to the next section. See the JS code below:

var subheadings = [
  "• Indian Budget Headlines",
  "• Global Headlines",
  "• US Headlines",
  "• Global Covid update",
  "• Markets & Economy"
];
var news = [
  ["• India aims high with 12% GDP Growth",
   "• India builds momentum with record Tax collection in Q3 and green shoots"],
  ["• Myanmar leader Aung San Suu Kyi and other leaders detained",
    "• Chinese survey Ships straying into other Nations",
    "• Bomb and Gunfire rock Somali capital, Terrorists claim responsibility",
    "• Taiwan says both Chinese and US Planes  entered defense zone",
    "• US vows to defend Philippines ",
    "• Thailand challenges Laos River dam Building ",
    "• Blinken speaks QUAD with India ",
    "• Jake speaks countering Chinese narrative ",
    "• UK applies for TA - CPP Partnership and on top of the Queue"],
  ["•    US can draw lessons from Taiwan on China disinformation ",
    "•    Biden wants to focus on Agenda and not Impeachment ",
    "•    US has spent $162 million to keep 9/11 Masterminds alive ",
    "•    Major Storms head North East after blanketing Midwest "],
  ["•    Global cases at 103M and Deaths at 2.24M Active 26M",
    "•    US Cases at 26.7M Deaths at 0.452M active at 9.9M",
    "•    Californian Cases starting to slip ",
    "•    France, UK, Italy, Germany, Mexico, Poland, etc. remain high",
    "•    AstraZeneca to supply 9 Million vaccines to EU"],
  ["•    Dow futures drop 270 Points building on losses",
"•    Companies have bid $81 Billion for aor waves to build 5G",
"•    10 GOP Senators Offer Alternative Stimulus Package - $600 Billion plan",
"•    Extend Aid thru June and Vaccination Funding",
"•    Direct checks of up to $1000"]
];

 

So news is a two dimensional array which is being worked on as follows:

for (i = 0; i < subheadings.length; i++) {
  $("#newsTicker p").append(
    "<span class='section'; style='color:#E8F9C5'>" + subheadings[i] + "</span>"
  );

for (j = 0; j < news[i].length; j++) {
  $("#newsTicker p").append(
    
    "<span class='story'>"  + news[i][j] + "</span>"
  );
}
}

Codepen - 

See the Pen MWbYERQ by inventor_2000 (@inventor_2000) on CodePen

Write now, the subheadings are in cream color (RGB #e8f9c5) to differentiate it from the news items which are in white. Instead of this what I would like is for the subheading to be static for all news items under it and then change

Hope this helps

 

[ZachSaucier]

17 minutes ago, perfG1 said:

Instead of this what I would like is for the subheading to be static for all news items under it and then change

What do you mean here by "static"? Stay in the same location next to the blue heading while the content is scrolled beneath it? If so, how does it get there? Animate there like the rest of the content? And how does it exit? The same way?

 

FYI these forums are not a free service for getting your work done. They're for specific questions related to GSAP. So we will try our best to point you in the right direction but do not promise that we will build it for you  

[perfG1]

I understand it - I got here by myself based on sample code. The challenge in this example is that is not obvious as to how I can make a portion of the text static and also dynamic (in that it will changes as the subheading changes).
My As to your Qs:
What do you mean here by "static"? Stay in the same location next to the blue heading while the content is scrolled beneath it? Yes
If so, how does it get there? Animate there like the rest of the content? Yes
And how does it exit? The same way? Yes
 

Thanks

[ZachSaucier]

I'd probably have a set start point of all of your animations. Right off screen to the right it probably a good value to use. Then I'd calculate how far it is to the right of the blue section (or wherever you want it to go). Then I'd animate the title/heading to that position at your set rate.

 

Then you need to know how long in seconds the rest of the animation will take (i.e. the time it will take for the rest of the text will take to travel its entire length - NOT the total distance it has to travel (because that would also include the distance from off screen to the right most of the title/heading). Then after that duration of time, animate the title to the left at your constant speed for the distance of itself. 

 

For the rest of the text, you need to know the distance from the right most portion of the screen and add to that the distance of its own width. Then create a constant tween with your set speed to get there.