How do you stop the effect when the element is in the middle of the view
Barbara-Monzu opened this issue · comments
I need to stop scrolling when an image lands inside a card, but endScroll doesn't work for me. Any suggestion?
I don't know how to stop it.
Thanks!
const { ref } = useParallax({
speed: 20,
translateY: [0, 400, 'easeInOut'],
translateX: [0, -3, 'easeInOut'],
rotateY: [0, 0],
scale: [1.2, 0.85, 'easeOutBack'],
});
<Parallax>
<div
ref={ref as React.RefObject<HTMLDivElement>}>
<Image src="/nft-2.jpeg" width={350} height={350} />
</div>
</Parallax>
<img width="1128" alt="issue 2" src="https://user-images.githubusercontent.com/91007055/152975017-280c1776-8688-4a95-ae54-5058bd72fd3b.png">
<img width="1135" alt="issue" src="https://user-images.githubusercontent.com/91007055/152974939-73c161ad-b8f3-4ced-8818-2a28b38156fa.png">
Happy to help but I'll need more info. Not sure what you're trying to achieve based on the description.
Mi code is the next (forgot the perspective).
I need the image stop in the card.
Thanks!!! :D
import Image from 'next/image';
import { useParallax, Parallax } from 'react-scroll-parallax';
import {
ParagraphMaxWidth,
Section,
Title,
LandingMinted,
FlexColContainer,
ImgMinted,
} from './styles';
export default function Landing4() {
const { ref } = useParallax({
speed: 100,
translateY: [0, 290, 'easeInOut'],
translateX: [0, -3, 'easeInOut'],
rotateY: [0, 0],
scale: [1.2, 0.85, 'easeOutBack'],
});
return (
<Section>
<LandingMinted>
<FlexColContainer>
<Title>
Minted to the <br /> metaverse
</Title>
<ParagraphMaxWidth>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis,
eaque! Omnis accusantium, sapiente dolore sit obcaecati impedit
ratione officia quo voluptatem asperiores delectus eaque magnam quae
consequatur vero vitae mollitia. Lorem ipsum, dolor sit amet
consectetur adipisicing elit.
</ParagraphMaxWidth>
</FlexColContainer>
<ImgMinted>
<Parallax>
<div
ref={ref as React.RefObject<HTMLDivElement>}
className="lg:perspective-5
">
<div
className="lg:rotate-x-20
lg:rotate-y-30
lg:-rotate-z-6
translate-z-16">
<Image src="/nft-2.jpeg" width={350} height={350} />
</div>
</div>
</Parallax>
</ImgMinted>
</LandingMinted>
</Section>
);
}
Screen.Recording.2022-02-09.at.10.50.44.1.mov
Hi! I think I'm also facing the same issue, what I'm trying to do, is end the animation faster, so that for example where it would be at 50% progress it stops the effect. I thought that using endScroll would help with this, I tried using endScroll: 50
and endScroll: 0.5
in the useParallax hook
Ok few things:
speed
is an abstraction oftranslateY
(ortranslateX
if scrolling is horizontal) so don't use both. See how it works: infoendScroll
by itself will not stop the effect. You must provide astartScroll
ANDendScroll
which representscrollTop
values to disable the typical relative to the viewport scroll behavior. You will need to calculate these values on your own. See the storybook for a demo- The other way to approach such an effect is to provide a
targetElement
that leaves the top of the view when you want the effect to stop. See the storybook for a demo
There is currently no other way to stop an effect mid viewport aside from the points 2 and 3 above.
@jscottsmith Thanks ! going to try that
Comment here if you still need help. See #134
Thanks!!!! I will try too :D
thank you! I got it,
I leave the code here in case it helps someone.
There are more components above the parallax, that's why the startScroll is so high
export default function Landing5() {
const animationMd = useParallax({
startScroll: 3200,
endScroll: 4300,
translateY: [-100, 0, 'easeInOut'],
scale: [0, 1, 'easeInOut'],
opacity: [0, 1, 'easeInOut'],
}).ref;
return (
<Parallax>
<div
ref={animationMd as React.RefObject<HTMLDivElement>}
className="hidden md:block lg:hidden">
<NftCard showText />
</div>
</Parallax>
)
}
Is there any way to use these values as relative?
I found a good solution for me that is responsive.
You will need to create a targetElement as helper. An example how you can define a targetElement can be found here.
This is my code for the refs:
const target = useRef(null) //pseudo targetElement
const { ref } = useParallax({
scale: [0.75, 1],
opacity: [0.1, 1],
targetElement: target.current,
})
then I used the targetElement on an absolute <div>
like this:
<section className="relative">
<div ref={ref}>
// Your code
</div>
<div ref={target} className="absolute left-0 -top-[70vh] h-[30vh]"></div>
</section>
Now you can change the value of top
and the height
for your personal preference.
I am using Tailwind. ClassNames in css:
- -top-[70vh] ⇾ top: -70vh
- h-[30vh] ⇾ height: 30vh