GithubHelp home page GithubHelp logo

evoactivity / ember-fast-marquee Goto Github PK

View Code? Open in Web Editor NEW
7.0 1.0 0.0 2.93 MB

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

License: MIT License

JavaScript 33.29% HTML 5.21% Handlebars 49.65% CSS 2.72% TypeScript 9.13%
ember embroider javascript marquee slider typescript ember-addon

ember-fast-marquee's Issues

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;
});

Release to NPM

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

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

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.

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

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);
  }
}

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.

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.