• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

mozilla / blurts-server / 446e1e97-978a-4c89-a3a2-11259e2a180c

pending completion
446e1e97-978a-4c89-a3a2-11259e2a180c

Pull #2983

circleci

Florian Zia
chore: Set CSS vars instead of adding classnames
Pull Request #2983: MNTOR-971: Landing page section transitions

282 of 1677 branches covered (16.82%)

Branch coverage included in aggregate %.

36 of 36 new or added lines in 2 files covered. (100.0%)

959 of 4545 relevant lines covered (21.1%)

1.76 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0
/src/client/js/transition-observer.js
1
/* This Source Code Form is subject to the terms of the Mozilla Public
2
 * License, v. 2.0. If a copy of the MPL was not distributed with this
3
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4

5
// percentage a section that has to be in view in order to appear
6
const sectionThreshold = 0.1
×
7
const queueIntervalDuration = 150
×
8

9
let observers
10
let queueInterval
11
// holds the sections so they can appear one after another
12
const entryQueue = []
×
13

14
function handleShowSection () {
15
  if (!entryQueue.length && queueInterval) {
×
16
    clearInterval(queueInterval)
×
17
    queueInterval = null
×
18
    return
×
19
  }
20

21
  const nextEntry = entryQueue.shift()
×
22
  nextEntry.target.dataset.enterTransition = 'visible'
×
23
}
24

25
function setQueueInterval () {
26
  queueInterval = setInterval(handleShowSection, queueIntervalDuration)
×
27
}
28

29
function handleScroll (entries) {
30
  entries.forEach(entry => {
×
31
    const sectionElement = entry.target
×
32
    const hasEntered = sectionElement.getAttribute('data-enter-transition') === 'visible'
×
33

34
    if (hasEntered) {
×
35
      return
×
36
    }
37

38
    const isInViewport = entry.isIntersecting
×
39
    if (isInViewport) {
×
40
      entryQueue.push(entry)
×
41
    }
42

43
    if (!queueInterval) {
×
44
      setQueueInterval()
×
45
    }
46
  })
47
}
48

49
function init (sections) {
50
  const observer = new IntersectionObserver(handleScroll, {
×
51
    threshold: sectionThreshold
52
  })
53

54
  observers = [...sections].map(section => {
×
55
    observer.observe(section)
×
56
    return observer
×
57
  })
58

59
  setQueueInterval()
×
60
}
61

62
if (!observers) {
×
63
  const mediaQuery = window.matchMedia('(prefers-reduced-motion: no-preference)')
×
64
  const allowMotion = mediaQuery && mediaQuery.matches
×
65

66
  const sections = document.querySelectorAll('[data-enter-transition]')
×
67

68
  // Don’t hide elements that are marked for entering transitions
69
  // while users set their motion preferences.
70
  mediaQuery.addEventListener('change', () => {
×
71
    const documentStyle = document.documentElement.style
×
72
    documentStyle.setProperty('--enter-transition-opacity', '1')
×
73
    documentStyle.setProperty('--enter-transition-y', '0')
×
74
  })
75

76
  if (allowMotion) {
×
77
    init(sections)
×
78
  }
79
}
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc