Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Video] Add fade in on scroll animation #2495

Merged
merged 1 commit into from
Apr 5, 2023
Merged

Conversation

kjellr
Copy link
Contributor

@kjellr kjellr commented Apr 5, 2023

PR Summary:

Why are these changes introduced?

Closes #2423

What approach did you take?

Replicated animations from the original prototype

Visual impact on existing themes

Will animate Multicolumn section on scroll, when Reveal sections on scroll is enabled.

05-23-ha3v4-bfr0t.mp4

Testing steps/scenarios

  • Enable Reveal sections on scroll under Animations in Theme settings
  • On the home page, add a Video section and verify that it fades in on scroll
  • Verify that each column cascades in
  • Update the section's settings and verify that everything still works as expected

Demo links

Checklist

Copy link
Contributor

@melissaperreault melissaperreault left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Kjell! That's a quick one!

Initially I was going to raise that we could make the Video section similar to Image banner but since we'll adjust the animation above the fold with https://github.com/Shopify/themes/issues/400, I am less concerned of the potential jarring experience in the end if it's used as the hero section.

Works as expected! 🚢

@kjellr kjellr merged commit 2ff714f into main Apr 5, 2023
@kjellr kjellr deleted the animate-video-on-scroll branch April 5, 2023 19:31
@kjellr
Copy link
Contributor Author

kjellr commented Apr 5, 2023

Thanks everyone!

pangloss added a commit to pangloss/dawn that referenced this pull request Apr 5, 2023
* shopify/main:
  [Video] Add fade in on scroll animation (Shopify#2495)
  Animate rich text and email signup (Shopify#2408)
  [Gift card] Add help doc link and change label for translation (Shopify#2471)
  Add prettier config to support format-on-save (Shopify#2323)
  Announcements slideshow (Shopify#2394)
  fix: Update Follow on Shop Option Text (Shopify#2463)
  Enable "per-PR" async PR mode (Shopify#2488)
  Animate multicolumn (Shopify#2409)
  Fix improper image sizes in the collage section (Shopify#2478)
  Replaced depreciated liquid property/value (Shopify#2480)
pangloss added a commit to pangloss/dawn that referenced this pull request Apr 12, 2023
* next:
  [Video] Add fade in on scroll animation (Shopify#2495)
  Animate rich text and email signup (Shopify#2408)
  [Gift card] Add help doc link and change label for translation (Shopify#2471)
  Add prettier config to support format-on-save (Shopify#2323)
  Announcements slideshow (Shopify#2394)
  fix: Update Follow on Shop Option Text (Shopify#2463)
  Enable "per-PR" async PR mode (Shopify#2488)
  Animate multicolumn (Shopify#2409)
  Fix improper image sizes in the collage section (Shopify#2478)
  Replaced depreciated liquid property/value (Shopify#2480)
  Update from Shopify for theme dawn/next
  Update from Shopify for theme dawn/next
  Update from Shopify for theme dawn/next
  Update from Shopify for theme dawn/next
  Update from Shopify for theme dawn/next
  Update from Shopify for theme dawn/next
phapsidesGT pushed a commit to Gravytrain-UK/gt-shopify-dawn-theme that referenced this pull request Sep 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Video] Add fade in on scroll animation
4 participants