infinite-marquee - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

package.json

 {
   "name": "infinite-marquee",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Configurable package to create an infinite marquee effect. Animated with JS or CSS.",
@@ -5,0 +5,0 @@ "main": "resources/js/infinite-marquee.js",

resources/js/demo.js

 import InfiniteMarquee from './infinite-marquee'
 
-const marquee = new InfiniteMarquee()
+const marquee = new InfiniteMarquee({ css: false })
+
 // window.addEventListener(
@@ -5,0 +6,0 @@ //   'resize',

resources/js/infinite-marquee.js

@@ -15,3 +15,7 @@ import gsap from 'gsap'
 
-      this.fillContainer()
+      if (this.options.css) {
+        this.fillContainerCss()
+      } else {
+        this.fillContainerJs()
+      }
 
@@ -55,3 +59,7 @@ this.animate()
 
-    this.fillContainer()
+    if (this.options.css) {
+      this.fillContainerCss()
+    } else {
+      this.fillContainerJs()
+    }
   }
@@ -70,13 +78,17 @@
 
-    // How many content items it takes to fill the container doubled (so animation can loop infinitely)
-    return Math.ceil(containerWidth / contentWidth) * 2
+    // How many content items it takes to fill the container (doubled if JS so animation can loop infinitely)
+    if (this.options.css) {
+      return Math.ceil(containerWidth / contentWidth)
+    } else {
+      return Math.ceil(containerWidth / contentWidth) * 2
+    }
   }
 
-  // Create and append DOM
-  fillContainer() {
+  // Create and append JS DOM
+  fillContainerJs() {
     const fragment = document.createDocumentFragment()
 
     for (let i = 0; i < this.fillCount; i++) {
-      const node = this.dom.content.cloneNode(true)
-      fragment.appendChild(node)
+      const contentClone = this.dom.content.cloneNode(true)
+      fragment.appendChild(contentClone)
     }
@@ -89,10 +101,28 @@
 
+  // Create and append CSS DOM
+  fillContainerCss() {
+    const fragment = document.createDocumentFragment()
+    const innerClone = this.dom.inner.cloneNode()
+
+    innerClone.style.setProperty(
+      'animation-duration',
+      `${this.options.duration}s`
+    )
+
+    for (let i = 0; i < this.fillCount; i++) {
+      const contentClone = this.dom.content.cloneNode(true)
+      innerClone.appendChild(contentClone)
+    }
+
+    fragment.appendChild(innerClone)
+    fragment.appendChild(innerClone.cloneNode(true))
+
+    this.dom.el.innerHTML = ''
+
+    this.dom.el.appendChild(fragment)
+  }
+
   // Create marquee animation
   animate() {
     if (this.options.css) {
-      this.dom.inner.style.setProperty(
-        'animation-duration',
-        `${this.options.duration}s`
-      )
-
       this.dom.el.classList.add(
@@ -99,0 +129,0 @@ this.options.direction === 'left' ? 'marquee-left' : 'marquee-right'

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

790957

increased by435.77%

Lines of code

21429

increased by12145.14%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes