Reveal items as the user scrolls

Create a trigger that fades and moves elements in as your scroll down the page.

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.

Ewan Mak
Latest posts by Ewan Mak (see all)