Ticker scroll with images

[LesUX]

Hello, is it possible to create a smooth ticker scroll with images? I have one going but it jumps. Maybe I'm missing something.

advertiser_logo_ticker.hype

[Photics]

This is more of a funny reply than an actual solution…

The Marquee tag still works… "marquee" | Can I use... Support tables for HTML5, CSS3, etc

Ha ha ha… it's deprecated / obsolete, but has amazing browser support.

So… uh… is this what you're trying to do… https://photics.com/games/cabling/

I have words scrolling across, but I suppose I could use images if I really wanted to do that. Basically, it's just an element that is told to move with Hype's Get/Set API…

hypeDocument.setElementProperty(e, 'left', -500, td, 'linear');

…where "e" is the element, and "td" is the ticker duration.

There was a performance issue, where it would eat a lot of CPU power. I thought I'd have to redo that part, as I'm planning on updating the game, but I just checked it now and it seemed OK. I don't know why it got better. Maybe it's my computer, maybe Hype changed, or maybe Safari got better?

Also, maybe the Camera thingie is an alternative… Hype Dynamic Camera

[MarkHunte]

I have my own custom ticker for hype, but a little complex for here as it is also loading data externally.

I watched this video the other day https://www.youtube.com/watch?v=bd9MLIb3DCg which uses css and if I remember right deals with flicker. It may work for you, you would have to convert the idea to hype.

Build an Infinite Scroll Animation Effect Using Only CSS

[LesUX]

Thanks

[MarkHunte]

I have adapted the css to Hype elements.

The Scene's Scaling is set to width

Our stock-ticker is a Group with another group inside named UL

The stock-ticker gets the class name stock-ticker

The stock-ticker flexible layout.

The UL gets the class name ul

Inside the UL group are the UI groups
Each UI represents a stock item and hold its elements. These can be text, images or hype elements..

--
The stock-ticker group's
Left edge is placed at the left edge of the scene
Right edge is placed at the right edge of the scene.

The UL group's
Right edge is place at the right stock-ticker's* right edge , which should place it just out of scene.

The CSS :

.stock-ticker {
/* padding-block: 8px!important; */
  border-block: 1px solid!important;
  overflow: hidden!important;
  user-select: none!important;

  --gap: 20px!important;
}   

.stock-ticker .ul{

  animation: scroll 20s linear infinite!important;
}


.stock-ticker:hover .ul {
  animation-play-state: paused!important;
}

@keyframes scroll {
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
 
 </style>

Css - Hype Ticker 2.hype.zip (371.4 KB)