evoactivity / ember-fast-marquee

A lightweight Ember component that uses CSS animations to create silky smooth marquees. Inspired by https://github.com/justin-chu/react-fast-marquee

Ember Fast Marquee

Ember Fast Marquee is a lightweight ember component that utilizes the power of CSS animations to create silky smooth marquees.

Inspired by React Fast Marquee

Differences from React Fast Marquee

• Automatically duplicates content as many times as necessary
• Use @fillRow={{true}} to fill any left over white space if desired
• 1 transform3d animation per marquee

Compatibility

• Ember.js v3.24 or above
• Embroider or ember-auto-import v2

Installation

ember install ember-fast-marquee

Usage

To use the component, first you need to import marquee.css into your application somehow.

If you are using embroider simply import the css into your application

// application.js
import "ember-fast-marquee/marquee.css";

Or import into your css as your would other third party CSS eg.

/* app.css */
@import "node_modules/ember-fast-marquee/marquee.css";

Then wrap the <Marquee> component around any component or text you'd like to slide.

<Marquee>
  I can be a component, multiple components, plain html or just some text.
</Marquee>

Full Example

All options with defaults

<Marquee
  @fillRow={{false}}
  @play={{true}}
  @pauseOnHover={{false}}
  @pauseOnClick={{false}}
  @direction="left"
  @speed={{20}}
  @delay={{0}}
  @loop={{0}}
  @gradient={{true}}
  @gradientColor="255,255,255"
  @gradientWidth="5%"
  @onFinish={{this.someAction}}
  @onCycleComplete={{this.anotherAction}}
  class="my-own-fancy-class"
>
  <div class="photo">
    <img src="https://i.pravatar.cc/150?img=3" />
  </div>

  <div class="photo">
    <img src="https://i.pravatar.cc/150?img=3" />
  </div>

  <div class="photo">
    <img src="https://i.pravatar.cc/150?img=3" />
  </div>
</Marquee>

Component Arguments

Property	Type	Default	Description
fillRow	boolean	false	Whether to fill empty spaces with repeat content
play	boolean	true	Whether to play or pause the marquee
pauseOnHover	boolean	false	Whether to pause the marquee when hovered
pauseOnClick	boolean	false	Whether to pause the marquee when clicked
direction	"left" or "right"	"left"	The direction the marquee is sliding
speed	number	20	Speed calculated as pixels/second
delay	number	0	Duration to delay the animation after render, in seconds
loop	number	0	The number of times the marquee should loop, 0 is equivalent to infinite
gradient	boolean	false	Whether to show the gradient or not
gradientColor	string	"255,255,255"	The rgb color of the gradient as a string of RGB values separated by commas
gradientWidth	number or string	"5%"	The width of the gradient on either side, if a number is passed % is used, if a string is passed it is used as is to allow other units to be used
onFinish	Function	undefined	A callback for when the marquee finishes scrolling and stops. Only calls if loop is non-zero.
onCycleComplete	Function	undefined	A callback for when the marquee finishes a loop. Does not call if maximum loops are reached (use onFinish instead).

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

ember-fast-marquee's Issues

Move DOM operations to modifier

The large majority of the backing class is taking in options and setting css variables, this could be moved to the modifier.

We probably want to keep the duplicateCount / repeat functionality in the component instead of managing the DOM directly for the repeated elements.

Release to NPM

The blueprint also setup "release-it". Once ready use it to cut a release and publish to NPM.

Handle resizes using ember-resize-observer-service

Better performance than watching window resize
https://github.com/PrecisionNutrition/ember-resize-kitchen-sink/tree/main/packages/ember-resize-observer-service

Create demo site

Use the test-app as the demo website and deploy to github pages with a github action.

• Purchase Domain
• Homepage
• Demo Page
• Documentation
  • Installation
  • Usage
  • Credits

Use a true mask instead of gradient pseudo elements.

The gradients are used to blend the marquee in with a background colour. This would be more effective if alpha masked.

eg

mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));

This would allow true transparency.

Frozen marquee on production (works fine on development)

I am using ember-cli-sass to compile my stylesheets. In order to get ember-fast-marquee to work on production, I have to copy and paste the included CSS into a seperate marquee.scss file, which I include in my app.scss.

This works fine on development, but when building to production, the marquee is completely frozen.

It turns out something in my build pipeline removes all units like 'px' from variables with a value of 0. So, '0px' in css becomes '0', which usually is perfectly fine. However, it also did it with the calc() inside the @keyframes definition.

Switching from the use of calc(0px - var(...) to calc(-1 * var(...) in the @keyframes definition fixes this issue:

@-webkit-keyframes marquee_scroll__KV5JD {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-1 * var(--marquee-scroll-amount)), 0, 0);
  }
}

@keyframes marquee_scroll__KV5JD {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-1 * var(--marquee-scroll-amount)), 0, 0);
  }
}

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): replace dependency babel-eslint with @babel/eslint-parser ^7.11.0
• chore(deps): replace dependency eslint-plugin-node with eslint-plugin-n ^14.0.0
• chore(deps): replace dependency npm-run-all with npm-run-all2 ^5.0.0
• chore(deps): update dependency @tailwindcss/forms to v0.5.7
• chore(deps): update dependency @tailwindcss/typography to v0.5.10
• chore(deps): update dependency postcss to v8.4.38
• chore(deps): update dependency postcss-nested to v6.0.1
• chore(deps): update dependency ember-cli to ~4.12.0
• chore(deps): update dependency ember-data to ~4.12.0
• chore(deps): update dependency ember-source to ~4.12.0
• chore(deps): update dependency postcss-import to v15.1.0
• chore(deps): update dependency postcss-loader to v7.3.4
• chore(deps): update dependency sharp to ^0.33.0
• chore(deps): update dependency tailwindcss to v3.4.1
• chore(deps): update node.js to v16.20.2
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency @ember/test-helpers to v3
• chore(deps): update dependency cssnano to v6
• chore(deps): update dependency ember-cli to v5
• chore(deps): update dependency ember-cli-app-version to v6
• chore(deps): update dependency ember-cli-babel to v8
• chore(deps): update dependency ember-data to v5
• chore(deps): update dependency ember-page-title to v8
• chore(deps): update dependency ember-qunit to v8
• chore(deps): update dependency ember-resolver to v11
• chore(deps): update dependency ember-source to v5
• chore(deps): update dependency ember-template-lint to v5
• chore(deps): update dependency ember-try to v3
• chore(deps): update dependency ember-welcome-page to v7
• chore(deps): update dependency eslint to v8
• chore(deps): update dependency eslint-config-prettier to v9
• chore(deps): update dependency eslint-plugin-ember to v12
• chore(deps): update dependency eslint-plugin-prettier to v5
• chore(deps): update dependency eslint-plugin-qunit to v8
• chore(deps): update dependency postcss-font-magician to v4
• chore(deps): update dependency postcss-import to v16
• chore(deps): update dependency postcss-loader to v8
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency qunit-dom to v3
• chore(deps): update dependency release-it to v17
• chore(deps): update dependency rollup to v4
• chore(deps): update dependency typescript to v5
• chore(deps): update embroider monorepo (major) (@embroider/addon-dev, @embroider/compat, @embroider/core, @embroider/router, @embroider/test-setup, @embroider/webpack)
• chore(deps): update node.js to v20
• chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update dependency ember-modifier to v4
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/checkout v3
• actions/setup-node v3
• bahmutov/npm-install v1
• actions/checkout v3
• actions/setup-node v3
• bahmutov/npm-install v1

npm

docsSrc/package.json

• @ember/optional-features ^2.0.0
• @ember/test-helpers ^2.8.1
• @embroider/compat ^1.8.0
• @embroider/core ^1.8.0
• @embroider/router ^1.8.0
• @embroider/webpack ^1.8.0
• @glimmer/component ^1.1.2
• @glimmer/tracking ^1.1.2
• @tailwindcss/forms 0.5.3
• @tailwindcss/typography 0.5.8
• autoprefixer ^10.4.7
• babel-eslint ^10.1.0
• broccoli-asset-rev ^3.0.0
• cssnano ^5.1.11
• ember-auto-import ^2.4.2
• ember-build-prerender ^0.3.2
• ember-cli ~4.8.0
• ember-cli-app-version ^5.0.0
• ember-cli-babel ^7.26.11
• ember-cli-dependency-checker ^3.3.1
• ember-cli-htmlbars ^6.0.1
• ember-cli-inject-live-reload ^2.1.0
• ember-cli-sri ^2.1.1
• ember-cli-terser ^4.0.2
• ember-data ~4.8.0
• ember-export-application-global ^2.0.1
• ember-fast-marquee ^0.1.6
• ember-fetch ^8.1.1
• ember-load-initializers ^2.1.2
• ember-page-title ^7.0.0
• ember-qunit ^6.0.0
• ember-resolver ^8.0.3
• ember-source ~4.8.0
• ember-template-lint ^4.10.0
• ember-welcome-page ^6.2.0
• eslint ^7.32.0
• eslint-config-prettier ^8.5.0
• eslint-plugin-ember ^11.0.0
• eslint-plugin-node ^11.1.0
• eslint-plugin-prettier ^4.0.0
• eslint-plugin-qunit ^7.3.0
• loader.js ^4.7.0
• npm-run-all ^4.1.5
• postcss 8.4.18
• postcss-easing-gradients 3.0.1
• postcss-easy-import 4.0.0
• postcss-font-magician 3.0.0
• postcss-hexrgba 2.1.0
• postcss-import 15.0.0
• postcss-loader 7.0.1
• postcss-nested 6.0.0
• postcss-responsive-type 1.0.0
• postcss-simple-vars 7.0.1
• prettier ^2.6.2
• qunit ^2.19.1
• qunit-dom ^2.0.0
• responsive-loader ^3.0.4
• sharp ^0.31.0
• tailwindcss 3.2.3
• webpack ^5.73.0
• node 12.* || 14.* || >= 16

package.json

• npm-run-all ^4.1.5
• prettier ^2.6.2
• release-it ^15.0.0
• release-it-lerna-changelog ^5.0.0
• release-it-yarn-workspaces ^3.0.0
• node 16.19.1

packages/ember-fast-marquee/package.json

• @embroider/addon-shim ^1.7.1
• ember-modifier ^3.2.7
• ember-resize-observer-service ^1.1.0
• @babel/core ^7.18.2
• @babel/plugin-proposal-class-properties ^7.17.12
• @babel/plugin-proposal-decorators ^7.18.2
• @babel/plugin-syntax-decorators ^7.17.12
• @babel/plugin-transform-runtime ^7.18.2
• @babel/preset-env ^7.18.2
• @babel/preset-typescript ^7.17.12
• @embroider/addon-dev ^2.0.0
• @rollup/plugin-babel ^6.0.0
• @types/ember ^4.0.0
• @types/ember__destroyable ^4.0.0
• @typescript-eslint/eslint-plugin ^5.26.0
• @typescript-eslint/parser ^5.26.0
• autoprefixer ^10.4.7
• babel-eslint ^10.1.0
• babel-plugin-search-and-replace ^1.1.0
• ember-template-lint ^4.9.1
• eslint ^7.32.0
• eslint-config-prettier ^8.5.0
• eslint-plugin-ember ^11.0.0
• eslint-plugin-node ^11.1.0
• eslint-plugin-prettier ^4.0.0
• npm-run-all ^4.1.5
• postcss ^8.4.14
• rollup ^2.74.1
• rollup-plugin-postcss ^4.0.2
• rollup-plugin-ts ^3.0.1
• typescript ^4.7.2
• @glimmer/component ^1.1.2
• @glimmer/tracking ^1.1.2
• ember-source ^4.4.0
• node 14.* || >= 16

packages/test-app/package.json

• @ember/optional-features ^2.0.0
• @ember/test-helpers ^2.8.1
• @embroider/test-setup ^1.7.1
• @glimmer/component ^1.1.2
• @glimmer/tracking ^1.1.2
• babel-eslint ^10.1.0
• broccoli-asset-rev ^3.0.0
• ember-auto-import ^2.4.2
• ember-cli ~4.8.0
• ember-cli-app-version ^5.0.0
• ember-cli-babel ^7.26.11
• ember-cli-dependency-checker ^3.3.1
• ember-cli-htmlbars ^6.0.1
• ember-cli-inject-live-reload ^2.1.0
• ember-cli-sri ^2.1.1
• ember-cli-terser ^4.0.2
• ember-data ~4.8.0
• ember-export-application-global ^2.0.1
• ember-fetch ^8.1.1
• ember-load-initializers ^2.1.2
• ember-page-title ^7.0.0
• ember-qunit ^6.0.0
• ember-resolver ^8.0.3
• ember-source ~4.8.0
• ember-source-channel-url ^3.0.0
• ember-template-lint ^4.9.1
• ember-try ^2.0.0
• eslint ^7.32.0
• eslint-config-prettier ^8.5.0
• eslint-plugin-ember ^11.0.0
• eslint-plugin-node ^11.1.0
• eslint-plugin-prettier ^4.0.0
• eslint-plugin-qunit ^7.2.0
• loader.js ^4.7.0
• npm-run-all ^4.1.5
• prettier ^2.6.2
• qunit ^2.19.1
• qunit-dom ^2.0.0
• webpack ^5.72.1
• node 14.* || >= 16

---

• Check this box to trigger a request for Renovate to run again on this repository

Request: Add ember-cli-sass support

See https://github.com/adopted-ember-addons/ember-cli-sass#addon-development

Add tests

Needs tests adding to test-app

A single animation for the entire marquee can't be composited

For full page marquees the width of the scroller is larger than the allowed compositing width meaning we get janky animations. 4 composited animations are more performant than 1 un-composited animation.

As repeater elements are added we need to reset the animation startTime to 0 otherwise everything gets out of sync. This can be done with a simple modifier that resets a components animation using

element.getAnimations().forEach((animation) => {
  animation.startTime = 0;
});