How to animate in sections based off scroll position?

Hi there!

Named this flexbox and conditionally rendered it in when Ypercent is above 10% (same thing if 1%). However, the content is empty and doesn’t even load yPercent data (unless I force display editor = Yes), so the condition is always false. Do you know a quick way to fix this?

Also, for the text to animate in, would this be the right way of doing that?

Hey @Luke
You don’t have access to there position because they don’t exist in the page (because not rendered)!
You would need to base your condition on something else. Maybe the parent container scroll position?

To animate in the text, if you have access to the Animation feature in Beta, you could add an opacity animation there.
The Transitions property you setup is meant to indicate how the transition behaves, not actually setting is up :slight_smile:

2 Likes

Hey @jptrinh!

Thanks so much! I stopped by OH today and Flo had actually recommended that I use the display condition for this binded to a certain section name and use the “Ease In” transition. Conditional rendering wouldn’t work best for this scenario.

Wish I had the animations beta feature.

Appreciate the advice though, it means a lot! :slight_smile: