kbatchu

Nevermind, I figured that I needed to add a 'target' to the Observer. It works fine now.

Hello, When I use the ScrollToPlugin to scroll, on a Button (Navigation buttons) click event, to a section (Section3) past another section (Section2) that uses an Observer , it scrolls to Section3 as expected but then jumps back to Section2. How do I make sure that when the Navigation button is clicked, it scrolls to the correct panel but still activate the Observer actions on Section2, when using the mouse wheel or touch. The Observer is used to loop through the text elements i.e. txt1, txt2....txt4. PS: The Navigation button events are at the bottom of the JS code. Thanks,

I fixed the code in my minimal demo (link in my first post above). It works as expected now.

@mvaneijgen So I tried to use the mixed observer and scrolling method to my use case. I am running into a couple of issues 1) When I mouse-wheel scroll down, the tween jumps from 'txt1' to 'txt4' directly. I don't see 'txt2' and 'txt3' 2) When I mouse-wheel scroll up (reverse direction), the tween is stuck at 'txt4' and does not display the text elements in the reverse order. I think I am going wrong in the 'function tweenToLabel(direction)' but cannot figure out what. Do you mind taking a look? I updated my original codepen sample. Thank you.

Got it. Thank you.

I am still wrapping my head around 'Observer' so I apologize for this question. In your third example (with my use case), I see "onDown: (self) => tweenToLabel(tl.previousLabel())". I would expect that when I am scrolling the mouse wheel 'down', it should go the 'next' label and the opposite in "onUp". How does this work? Thanks,

Thank you so much for the examples. I think I need what you created in the second example where normal scroll is mixed with Observer plugin. There is a lot to unpack here for me. Your third example (with my use case) helped me understand how Observer by itself works. GSAP is a wonderful bag of tricks.

Hello, I am trying to show/hide different text as the user scrolls. However, I noticed that when I scroll using the mouse scroll wheel, the entire text (e.g. txt2 in the codepen example) is not displayed. It shows partial text depending upon the amount of scroll. I understand this is how ScrollTrigger works, but how do I make sure that when the user scrolls, the entire text of 'txt2' or 'txt3' or 'txt4' is displayed at a time, not partial text. Ideally, I want to create the 'fade-in', 'fade-out' effect for each text variable i.e. txt2, txt3 etc. Thanks, Kiran

Thank you both.

Hello, I am missing something very obvious but unable to find what it is. Can someone please tell me why 'loadPara2()' is not being executed ? Thanks