search

react-component / scroll-anim

Animate Scroll React Component
http://react-component.github.io/scroll-anim/
MIT License
305 stars 43 forks source link

OverPack animation doesn't render if the object is at the bottom of the page #42

Closed zipang closed 5 years ago

zipang commented 5 years ago

I have an issue with the (badly named) <OverPack> component which, if i understand, triggers an animation when the element is scrolled upon. However, i have an animation to trigger but it's on the last section of my page, so it will never reach the middle of the viewport, but rather stay at the bottom of the page. So, i don't want to trigger the animation as soon as the element comes into view (when it is fully visible in the viewport) How should i do that ? Is there a parameter that i missed ? There should be one to giving us the percentage of the viewport to consider to trigger an animation. In my case, it would be the full viewport's height : 0..100%

<Col className="call_to_action" span={24} lg={10}>
    <OverPack inViewport={[0, 100]}>
        <TweenOne animation={ type: 'from', x: 200, opacity: 0 } >
            <Link className="button" to={link}>{call_to_action}</Link>
        </TweenOne>
    </OverPack>
</Col>
jljsj33 commented 5 years ago

You can set playScale = "0.1" and col minHeight

jljsj33 commented 5 years ago

https://github.com/ant-motion/ant-motion-dva-cli-example/blob/2.0/src/routes/Home/Footer.jsx#L16

zipang commented 5 years ago

@jljsj33 Thhxx you really much ! :) What is the meaning and values of playScale ? It seems to be defined on [0, 1] ? Could you point me to the documentation of this component ? I've only found this previous example : https://github.com/ant-design/ant-motion/blob/master/components/scroll-anim/demo/overPack.md

zipang commented 5 years ago

OK. I found it : https://motion.ant.design/api/scroll-anim#Element