How do you have sections be animated when scrolling down?

Ask us anything How do I?
1

Hi there!

I am trying to introduce a feature to my webapp where only certain parts of a page are displayed based on scroll position. For example (can reference link below that does a really good job), I would like to have only the top section of a page shown but then as you scroll down and the next section becomes more visible, the opacity increases to 100% when the section is completely in view. How do I do this?

I am doing some condition rendering work so I know how to give sections HTML names, and then have watch scroll position and then use the Component Position variable (y%) to change variables and so forth. Wondering if there is an easier way to do this or have to do something similar to what I have been doing.

Thank you so much!

https://rise.articulate.com/share/OD-9dEYTe5GA1f6hbb7GBX73cDupk_vP#/lessons/qWm41EQSewTTsebMftnfnbfq-O26Mcsq

2

Hey Luke!
Great question and thank you for the link as a reference.

Thank you for your question. Let me check with the team and see how we can assist you. I will get back to you as soon as possible.

1 Like