Reveal items as the user scrolls

Show effects like fading and moving elements on page scroll. 

Here you will find:

• Set up the activation
• Define the motion
• Implement the motion on other items

Set up the activation

• Choose your activation component (e.g., Project Link) and access the Interactions panel
• Click the addition symbol beside Element Trigger
• Opt for Scroll Into View from the provided options

Define the motion

• In the Action menu under When Scrolled Into View, choose Commence an Animation
• Hit the addition symbol near Timed actions
• Assign a label (e.g., Move upwards during scroll)
• Click the addition symbol near Timed Actions and pick Move from the list
• Adjust the y-axis to 50 pixels under Move
• Beside Timing, activate Set as initial state
• Hit the addition symbol near Timed Actions and select Opacity from the list
• Modify the opacity to 0%
• Beside Timing, set as initial state
• Hit the addition symbol near Timed Actions and select Move from the list
• Alter the y-axis to 0 pixels under Move
• Customize Easing and Duration
• Tap the addition symbol at 0 seconds on the timeline and select Opacity from the dropdown
• Adjust the opacity to 100%
• Customize Easing and Duration
• Beside Affect, opt for Class
• Select All elements with this class and then Only children with this class

Implement the motion on other items

• Exit the animation and navigate to the Interactions panel
• In Trigger settings, ensure this animation is applied to all elements with this class (e.g., Class: Project Link)

Preview your work.