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.

Sign up for GitHub

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

Jump to bottom

Need help getting useViewportScroll to work properly #237

Closed
h-jennings opened this issue Jul 25, 2019 · 3 comments · Fixed by #239
Closed

Need help getting useViewportScroll to work properly #237

h-jennings opened this issue Jul 25, 2019 · 3 comments · Fixed by #239

Comments

@h-jennings
Copy link

h-jennings commented Jul 25, 2019 •
edited
Loading

Hi there,

Apologies in advance if this isn't to correct place to ask for help.

I'm working on adding framer-motion into a react project I'm working on and can't seem to get the useViewportScroll feature to work properly in my project.

I've created an isolated component within my app to test out this feature called DivTest
you can find the project here: https://codesandbox.io/s/github/h-jennings/portfolio-2019 and the test component is in the src/js/components/ folder in the project. Here's a public github repo link if that's easier: https://github.com/h-jennings/portfolio-2019.

Anyway, by following the docs I'm expecting the <motion.div className="divTest" style={{ scale }} /> components scale value to increase on scroll. This is the codeSandbox that I referenced: https://codesandbox.io/s/c4ww4?module=%2Fsrc%2FExample.tsx

I've been poking away at this component for an hour or 2, plus reading the docs and I'm just not sure at this point if I'm using the syntax correctly, or importing the library incorrect etc.

Any help or advice would be appreciated!
@h-jennings h-jennings changed the title Need help getting useViewportScroll to work propert Need help getting useViewportScroll to work properly Jul 25, 2019
@h-jennings
Copy link
Author

Woah! Interesting, I just located the issue.
On my <body> tag I had the following css added:

body {
width: 100%;
height: 100%;
}

Upon removing height: 100%; the useViewportScroll feature worked as expected.

Might be something you want to add to the documentation as that's a pretty common css reset.

Thanks again!

@mattgperry
Copy link
Collaborator

Yeah fair point, I'll leave this open to do so.

@mattgperry mattgperry mentioned this issue Jul 25, 2019
Merged
@Chizzah
Copy link

Chizzah commented Jul 1, 2020

Anyone have an example of fading in when scrolled into viewport or is this not an use case for useViewportScroll? Very new to not only framer but animation in a whole

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

adding note about body tag in viewportscroll framer/motion
3 participants
@mattgperry @h-jennings @Chizzah