react-component / scroll-anim

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

Parrallax behavior differ from child to child #49

Open julesmoretti opened 4 years ago

julesmoretti commented 4 years ago

Great tool! thank you for putting this together.

Please take a look at julesmoretti.digital, you will see 3 projects, 2 of which can be opened up (view those as an iPad pro or iPhone X device).

I implemented the parallax to the highlight of the titles "VR Care" "HARMONY EXPRESS" and so on... you will see that those triggers at different positions of the screen percentage.

The first one "Harmony Express" starts around 15% of the top of the page: Screen Shot 2020-04-28 at 10 53 30 AM

And then the second one starts around here: Screen Shot 2020-04-28 at 10 53 49 AM

And this is the animation config for it:

[
{
    width: "105%",
    duration: 100,
    playScale: [0.05, 0.1],
  },
  {
    width: '10%',
    duration: 100,
    playScale: [0.85, 0.9],
  },
]

I made sure that the parent element is set to position: relative. Let me know what I am missing here :)

Thank you.