Comments (2)
Hey @simurai 👋
This seems to be an issue with the custom class you're applying rather than the intersection observer itself. When you remove the custom class className={styles['Hero__logo-letter']}
, it loads the underlying image fine for me on the first attempt. E.g:
(Viewable by GitHub Staff only)
Screen.Recording.2023-07-25.at.16.54.49.mov
You shouldn't need to change the visibilityOptions
at all. The following should be enough. I'd also recommend positioning AnimationProvider as the root of Hero.tsx instead of composing it near the logos.
<AnimationProvider runOnce>
Not sure yet what the solution is for making your animation work, but wanted to get a response out to you re. the suspected bug first. If you feel it is a bug however, can you please provide an example with repro steps without the custom classes?
from brand.
@rezrah an issue with the custom class
Thanks for trying it out. 🙇 Each image needs extra styling, so we can't really remove that, but I tried the following:
- Wrap each image with
<Animate animate="slide-in-down">
- And lower the distance override to just
50px
And then it works great. So yeah.. it does seem that the custom styling is affecting things. Hmm.. Let's close this again. I might switch to an entirely custom implementation.. just because this project is short-lived and probably quite a unique case.
from brand.
Related Issues (20)
- 🐛 [BUG] - InlineLink does not inherit size HOT 7
- [Feature request] Add support for multiple `AnchorNav.Action` HOT 3
- 🐛 [BUG] - `Prose`'s unordered lists do not play well with dark mode
- [Suggestion]: Add documentation around Stack breakpoints
- 🐛 [BUG] - Regression of `leadingVisual` on `TextInput` HOT 1
- 🐛 [BUG] - Button Gap on Medium Size should be 4px (0.25rem) instead of 12px. HOT 5
- [Feature request] Allow `<Label>` in River + Bentos HOT 1
- 🐛 [BUG] - `padding-inline-start` does not set in Timeline.Item component HOT 2
- [Accessibility] `SubdomainNavBar` misses controls when narrow HOT 3
- [Accessibility] `FAQ.Item` is not getting closed using 'ESC' key
- [Contentful] Add Possibility of Content Block (Rich Text) Modules HOT 2
- 🐛 [BUG] - `Testimonial`: insufficient contrast for default quote symbol in dark mode HOT 1
- [Suggestion] Enhance the `Heading` component to support new `text-wrap` values HOT 3
- [Feature request] Allow custom icon in `UnorderedList.Item` HOT 1
- 🐛 [BUG] - `className` is missing on `<Hero.Description>`
- [Suggestion] Update the example for the `ActionMenu`
- 🐛 [BUG] - Action menu overlay for adding language dropdown HOT 1
- [Feature request] Support smaller Bento icon size HOT 1
- [Accessibility] No error state or error description in Forms HOT 1
- Increase height of snapshots
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from brand.