How do you stop the effect when the element is in the middle of the view

[Barbara-Monzu]

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">

[jscottsmith]

Happy to help but I'll need more info. Not sure what you're trying to achieve based on the description.

[Barbara-Monzu]

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

[roberto-sanchez-azumo]

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

[jscottsmith]

Ok few things:

1. speed is an abstraction of translateY (or translateX if scrolling is horizontal) so don't use both. See how it works: info
2. endScroll by itself will not stop the effect. You must provide a startScroll AND endScroll which represent scrollTop 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
3. 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.

[roberto-sanchez-azumo]

@jscottsmith Thanks ! going to try that

[jscottsmith]

Comment here if you still need help. See #134

[Barbara-Monzu]

Thanks!!!! I will try too :D

[Barbara-Monzu]

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>
)
}

[beamercola]

Is there any way to use these values as relative?

[NiklasvG]

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