Changing DP State on scroll

newbie-question
#1

Hello,

i have a case with an onScroll event and maybe someone can help me because atm I’m running out of ideas.

I want that a text changes after you reach a certain point when you scroll the page

So what I have:

  1. DP with 2 states (1 state for each text), pinned to browser
  2. A scroll marker to set the trigger, also pinned to browser
  3. Another (fixed) scroll marker so that the other marker knows where to change the state.

I used a case with “area of xy is over” but it doesn’t work. When both areas overlap nothing changes. I uploaded the file

TextChange_Test.rp (56.9 KB)

#2

Hi!

You can do this using a condition in the OnWindowScroll interaction. (I have Axure 8 only so I can’t open your file.) Note that you do NOT want to pin the marker that defines where to change states.

OnWindowScroll
  IF [[Window.scrollY]] is greater than or equal to [[LVAR_scrollMarker.y]]
    Set panel textPanel to State2
  ELSE
    Set panel textPanel to State1

This assumes LVAR_scrollMarker is a local variable referring to the marker that triggers the scroll.

Here’s an example in Axure 8: changeTextOnScroll.rp (56.5 KB)

#3

Ah yes! It worked!
Thank you very much! :blush:

EDIT:
Now i’m curious. When i want to have another text change (3rd panel state) what do i have to do then? Because I tested it by myself and it now starts to change the states randomly :smiley:

#4

Hi!

You can add an AND to the first condition to test if the current scrollY is between the two markers, and then add a second one to see if scrollY is below the second marker:

OnWindowScroll
  IF [[Window.scrollY]] is greater than or equal to [[LVAR_scrollMarker1.y]] AND
    [[Window.scrollY]] is less than [[LVAR_scrollMarker2.y]]
      Set panel textPanel to State2
  ELSE IF [[Window.scrollY]] is greater than or equal to  [[LVAR_scrollMarker2.y]]
      Set panel textPanel to State3
  ELSE
    Set panel textPanel to State1

Here’s an updated file:

changeTextOnScroll.rp (58.3 KB)

#5

Thanks alot again. I could recreate it in my project and it works flawless! :slight_smile:

closed #6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.