react-component / scroll-anim

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

Is it possible to avoid the "pop in" effect? #15

Closed FallingSnow closed 7 years ago

FallingSnow commented 7 years ago

Is it possible to have the elements always in the DOM just hidden? That way they don't change the height of their parent element when the animate in.

jljsj33 commented 7 years ago

use tween-one

jljsj33 commented 7 years ago
 <ScrollOverPack id="page3" hideProps={{ 1: { reverse: true } }}>
    <TweenOne
      className="demo"
      animation={{ y: 0, opacity: 1 }}
      key="1"
      style={{ transform: 'translateY(100px)', opacity: 0 }}
    />
</ScrollOverPack>
FallingSnow commented 7 years ago

Got the same result.

For example, notice how on https://react-component.github.io/tween-one/examples/group.html the black code box moves down when the page loads. I want to avoid that.

Am I doing something wrong, I'm using rc-queue-anim?

jljsj33 commented 7 years ago

Try appear: false?

FallingSnow commented 7 years ago

Same result but now there is no animations. The elements just pop in.

jljsj33 commented 7 years ago

I will add a appear to OverPack...

FallingSnow commented 7 years ago

I rolled my own component, thank you though.