MNTOR-971: Landing page section transitions #2983

flozia · 2023-04-12T11:59:28Z

References:

Jira: MNTOR-971
Design spec: https://ff-landing-page.webflow.io/#color

Description

Adds simple appearance transitions to sections on the landing page.

Screenshot

mntor-971-screenrec.mov

How to test

Navigate to the landing page: /
Scroll through the landing page

Checklist (Definition of Done)

Localization strings (if needed) have been added.
Commits in this PR are minimal and have descriptive commit messages.
I've added or updated the relevant sections in readme and/or code comments
I've added a unit test to test for potential regressions of this bug.
Product Owner accepted the User Story (demo of functionality completed) or waived the privilege.
All acceptance criteria are met.
Jira ticket has been updated (if needed) to match changes made during the development process.
Jira ticket has been updated (if needed) with suggestions for QA when this PR is deployed to stage.

src/client/js/section-observer.js

flozia · 2023-04-13T13:28:23Z

src/client/js/section-observer.js

+
+const classNameToObserve = 'section-transition'
+const classNameEntered = `${classNameToObserve}-entered`
+const cueIntervalDuration = 150


That’s a bit shorter than what is shown in the design prototype but feels more responsive. Alignment on this with UX is TBD.

+1 on speedy transitions! 👍

Vinnl

Have you considered leaving most of your inline comments in this PR as code comments? 😁

Other than that, one thing that might be annoying is that, if the JS doesn't load, or loads slowly (or is blocked, or broken), content won't be visible by default. But on the other hand, if we let JS hide the content initially, that could result in a quick flash of content before it animates in, which also isn't great. So I guess I don't have a better solution there 🤷

src/client/js/section-observer.js

Co-authored-by: Vincent <Vinnl@users.noreply.github.com>

flozia · 2023-04-13T17:41:20Z

Have you considered leaving most of your inline comments in this PR as code comments? 😁

I did but now I’ve added them as well: fb036ad. :)

Other than that, one thing that might be annoying is that, if the JS doesn't load, or loads slowly (or is blocked, or broken), content won't be visible by default. But on the other hand, if we let JS hide the content initially, that could result in a quick flash of content before it animates in, which also isn't great. So I guess I don't have a better solution there 🤷

Good point @Vinnl. I’m not really happy about this only working with JS as well. The flashing you describe would somewhat defeat the purpose of an appearance transition and in that case, I’d prefer no transition at all. Looking forward to animation-timeline evolving out of experimental mode! We could at least take care of instances where JS is not allowed — what do you think about this approach: e774f14?

toufali

This is looking good @flozia!

It works for me and I had only one "blocker-ish" thought -- I wonder if we should remove the transition from the Hero section? I don't know if it impacts CLS, but the hero does have a button and forthcoming form. Perhaps more a UX decision, but I wonder if it would be best to only apply the fly-in effect to sections that are just coming into view – not those already in view? Or at least not the very first element?

Additional thoughts more about implementation – no blockers just potential simplifiers/optimizers:

I notice you're tracking when a section is entered/transition has been run. Have you already tried using animation instead of transition? Using animation is often well-suited for run-once type behavior.
For the no-script users, animation might also benefit – it works using only a "to" property, which can keep sections visible unless JS is available to inject the proper initial state. Pseudo-ish code:

CSS:

[data-animate] {
  /* available by default to all with no-script defaults */
  opacity: var(--section-animation-opacity, 1);
  transform: translateY(var(--section-animation-y, 0));
}

[data-animate='visible'] {
  /* triggered via script when element in viewport */
  animation: section-animation 1s forwards;
}

@keyframes section-animation {
  to {
    opacity: 1;
  }
}

JS:

function init(){
  // we know script is available so we can populate initial state into vars
  // we can add these once in top level in `<html>` and it will apply to all associated elements
  document.documentElement.style.setProperty('--section-animation-opacity', '0')
  document.documentElement.style.setProperty('--section-animation-y', '24px')
}

function handleInteresectionEvent(){
  if (entry.isIntersecting) {
    element.dataset.animate = 'visible'
  }
}

HTML:

<section data-animate>...</section>

Happy to chat further or pair on this if you like!

toufali · 2023-04-13T20:52:26Z

src/views/partials/landing.js

+<noscript>
+  <style>
+    .section-transition {
+      opacity: 1;
+    }
+  </style>
+</noscript>


I wonder if there's another way we can handle no-script users, than having to add this snippet on every page with transitions? See thoughts in comment above.

This works; considering animation sounds good too. It doesn't necessarily deal with slow-loading JS; we could potentially also add a delayed animation in CSS that changes the opacity to 1 after a certain delay, and if the JS loads in time it can disable that and replace it with the actual animation trigger. But also, let's maybe not overthink it, as it's probably pretty much an edge case.

I’ve added a more generic way to add entering transitions for the site. Switched to CSS variables as suggested: c76e41d.

… and 9453676 should take care of JS that is loading too slow or not at all.

toufali · 2023-04-13T20:54:05Z

src/client/js/section-observer.js

+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const classNameToObserve = 'section-transition'
+const classNameEntered = `${classNameToObserve}-entered`


I assume this is to track if a transition has run, and that it runs only once? Perhaps we could avoid this overhead by using animation instead of transition?

We need a way to check which sections we need to add to the queue. Checking for the data attribute enter-transition now.

toufali · 2023-04-13T20:57:55Z

src/client/css/partials/landing.css

+  .section-transition {
+    opacity: 0;
+    transition: opacity 350ms ease-out, transform 350ms ease-out;
+    transform: translateY(var(--padding-lg));
+  }
+
+  .section-transition-entered {
+    opacity: 1;
+    transform: translateY(0);
+  }


Have you already explored using animation? Brainstorming here, but it might simplify and solve the cases of no-script and re-triggering transitions. See comment above.

Good idea! I’m using animations instead of transitions now.

toufali · 2023-04-13T21:51:47Z

src/client/js/section-observer.js

+}
+
+if (!observers) {
+  const mediaQuery = window.matchMedia('(prefers-reduced-motion: no-preference)')


Is this really necessary if we've already got @media screen and (prefers-reduced-motion: no-preference) in the CSS? Or maybe the CSS at-rule is not necessary?

See comment below: #2983 (comment).

src/client/js/section-observer.js

flozia · 2023-04-14T12:23:11Z

Thanks for the suggestions @toufali! I switched to using animations and I am using data-attributes as well as CSS variables instead.

Good point about potential issues we run into with hiding the hero section — I’ll raise that with UX.

flozia added 3 commits April 11, 2023 15:28

feat: Observe landing page sections

62853fe

feat: Add basic transitions to landing page sections

b556514

chore: Reorder const variables

378c199

flozia requested review from Vinnl and toufali April 13, 2023 13:21

flozia commented Apr 13, 2023

View reviewed changes

Merge branch 'main' into MNTOR-971-Landing-page-transitions

ccf1280

Vinnl approved these changes Apr 13, 2023

View reviewed changes

src/client/js/section-observer.js Outdated Show resolved Hide resolved

src/client/js/section-observer.js Outdated Show resolved Hide resolved

flozia and others added 5 commits April 13, 2023 17:59

chore: Remove optional Chaining

36b67ae

Co-authored-by: Vincent <Vinnl@users.noreply.github.com>

chore: Remove optional chhaining

e255eff

chore: Rename cue -> queue

81c85d3

chore: Add inline comments

fb036ad

chore: Fallback for when JS is not allowed

e774f14

toufali reviewed Apr 13, 2023

View reviewed changes

flozia added 2 commits April 14, 2023 11:55

chore: Use data attribute and CSS animations for entering transitions

c76e41d

chore: Set CSS vars instead of adding classnames

9e47556

flozia requested a review from toufali April 14, 2023 12:15

flozia marked this pull request as ready for review April 14, 2023 12:23

flozia added 3 commits April 14, 2023 16:17

chore: Handle instances where JS does not load or takes too long

9453676

chore: Remove entering transition for hero section

5e607c7

merge: main -> MNTOR-971-Landing-page-transitions

3caf352

flozia merged commit e8dceb9 into main Apr 17, 2023
9 checks passed

flozia deleted the MNTOR-971-Landing-page-transitions branch April 17, 2023 15:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MNTOR-971: Landing page section transitions #2983

MNTOR-971: Landing page section transitions #2983

flozia commented Apr 12, 2023 •

edited

flozia Apr 13, 2023

toufali Apr 13, 2023

Vinnl left a comment

flozia commented Apr 13, 2023 •

edited

toufali left a comment

toufali Apr 13, 2023

Vinnl Apr 14, 2023

flozia Apr 14, 2023 •

edited

flozia Apr 14, 2023 •

edited

toufali Apr 13, 2023

flozia Apr 14, 2023

toufali Apr 13, 2023

flozia Apr 14, 2023

toufali Apr 13, 2023

flozia Apr 14, 2023

flozia commented Apr 14, 2023

MNTOR-971: Landing page section transitions #2983

MNTOR-971: Landing page section transitions #2983

Conversation

flozia commented Apr 12, 2023 • edited

References:

Description

Screenshot

How to test

Checklist (Definition of Done)

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vinnl left a comment

Choose a reason for hiding this comment

flozia commented Apr 13, 2023 • edited

toufali left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flozia Apr 14, 2023 • edited

Choose a reason for hiding this comment

flozia Apr 14, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flozia commented Apr 14, 2023

flozia commented Apr 12, 2023 •

edited

flozia commented Apr 13, 2023 •

edited

flozia Apr 14, 2023 •

edited

flozia Apr 14, 2023 •

edited