github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #16915 from overleaf/tm-website-redesign-animation-a11y

Browse source 
Website redesign - update animation accessibility and tweak animation to match design spec

GitOrigin-RevId: 21b69f3d8b2ab8bafd9c31db19a7f2a365e2c039
This commit is contained in:
M Fahru 2024-02-08 07:12:22 -07:00 committed by Copybot
parent dc8d01cd74
commit 01e551e606
1 changed files with 23 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
services/web/frontend/js/pages/marketing/homepage.js
View file

@ -27,9 +27,11 @@ function realTimeEditsDemo() {
nextFrame()
}
realTimeEditsDemo()
if (document.querySelector('.real-time-example')) {
realTimeEditsDemo()
}
function homepageAnimation() {
function homepageAnimation(homepageAnimationEl) {
function createFrames(word, { buildTime, holdTime, breakTime }) {
const frames = []
let current = ''
@ -50,7 +52,7 @@ function homepageAnimation() {
}
// Add the final frame with an empty string
frames.push({ before: '', time: holdTime })
frames.push({ before: '', time: breakTime })
return frames
}
@ -62,11 +64,14 @@ function homepageAnimation() {
}
const frames = [
// 1.5s pause before starting
{ before: '', time: 1500 },
...createFrames('articles', opts),
...createFrames('theses', opts),
...createFrames('reports', opts),
...createFrames('presentations', opts),
...createFrames('anything', opts),
// 5s pause on 'anything' frame
...createFrames('anything', { ...opts, holdTime: 5000 }),
]
let index = 0
@ -74,10 +79,22 @@ function homepageAnimation() {
const frame = frames[index]
index = (index + 1) % frames.length
$('#home-animation-text').html(frame.before)
homepageAnimationEl.innerHTML = frame.before
setTimeout(nextFrame, frame.time)
}
nextFrame()
}
homepageAnimation()
const homepageAnimationEl = document.querySelector('#home-animation-text')
const reducedMotionReduce = window.matchMedia(
'(prefers-reduced-motion: reduce)'
)
if (homepageAnimationEl) {
if (reducedMotionReduce.matches) {
homepageAnimationEl.innerHTML = 'anything'
} else {
homepageAnimation(homepageAnimationEl)
}
}