jlmakes / jlmakes/scrollreveal

ScrollReveal doesn't work with react-snap on first load, but after navigating with react-router to any page and come back again, is starts working on the same page

Open
#564 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
22.5k
Forks
2.2k
PR merge metrics
No merged PRs in 30d

Description

As stated on the title, ScrollReveal doesn't work with react-snap on first load, but after navigating (with react-router) to any page and come again, is starts working on the same page. The code is like this:

```
var slideFromBottom = {
distance: "40%",
origin: "bottom",
opacity: 0,
duration: 1000,
easing: "ease-out",
reset: true,
mobile: true,
}
useEffect(()=>{
setTimeout(() => ScrollReveal().delegate(), 250)
ScrollReveal().reveal(".modalContainer", slideFromBottom)
},[])
```

Should I use a different library? Or maybe is there a way to handle this problem occuring with react-snap library(creating static html)?
### Environment

* Operating System: Windows 10 Pro
* Browser Version:
* ScrollReveal Version: 4.0.9

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the first-load behavior using the provided React useEffect snippet with react-snap and react-router, using ScrollReveal 4.0.9. The issue names no repository files or tests; done would require identifying why the animation only works after navigation and documenting or implementing a verified fix.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.