Jump to content
Search Community

abernal96

Members
  • Posts

    5
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

abernal96's Achievements

  1. Howdy, Its me again Thank you for all your help. I had a question regarding this same topic. Is there any Property on GSAP scroll trigger that would help me make sure that user does not just scroll through all of the content? For example, is there a way for snap to finish before the user continues to scroll down Here is a sample I made based on a demo I found in your forums I used Observers for this one: https://codepen.io/Alejandro-Bernal-the-builder/pen/JjVEEXr However speaking to my designer we need the horizontal scroll to follow this flow https://codepen.io/Alejandro-Bernal-the-builder/pen/KKYzwKE What I have tried so far includes Setting a quick setTimeOut function that disables scrolling on snap complete, however the user can still speed through the content Any feedback you can give me would be appreciated it!
  2. Hey @mvaneijgen, Thank you so much for your help this is exactly what I wanted to achieve. I wanted to clarify that my understanding is correct, I am still stump on the fact that the last section does not require a end trigger. Is this happening because we already set a scroll end on the intitial header snap?
  3. Hello @mvaneijgen, Thank you for your prompt response! I will also use the codepen you shared for my works thank you. Your explanation helped me understand Scroll Trigger better. I have reviewed the codepen example thank you for the comments it made it easier to understand. Using your explanation, I have added some code to get the last section to snap the same when user scrolls down to it, as well if they scroll back up it should snap to div 3 inside of the horizontal container. Here is the updated codepen https://codepen.io/Alejandro-Bernal-the-builder/pen/KKYzwKE My Approach to get the Last section to work as the header section and div 1 Now what I tried to do is using a scrolltrigger that starts at the bottom of the last section, since this is where I want to snap to at the end. I tried: Setting start at bottom bottom for Trigger as last-section div Now I set end trigger as "horizontal_container" set it to top top since I want it to snap to the 3rd div as the user scrolls up However, this approach does not seem to work. I am seeing that I may not be placing my end trigger on the right section. I also reviewed the docs to see if I can use the relative prefix to get my end trigger to be set on my 3rd div. Would there be an eaiser way to set my end trigger at the end of the horizontal conatainer? Thank you I hope I shared the codepen correctly.
  4. Hello World! I am new user member of gsap so I am learning as I code! I have use one of the gsap horizontal scroll examples to produce the code pen I have shared, my program consists of a header div that as you scroll down you will be taken to a horizontal scroller with 3 div sections. I have written gsap code that allows the horizontal scroller to work with 3 sections, as the user scrolls down the div is snap at 100% and 100vh. My problem: Might be a quick fix but I have been stuck on this for a bit. I would like to some help implementing as the user reaches the horizontal scroller, the first div should snap right away. As of now on my codepen, the first div gets ignore if you scroll too fast and it snaps to the second div. I would like to ensure the each div gets snapped to viewport as the user scrolls. Vice versa, I would like this to have as the user scrolls back up it should snap to div 3 before moving back up. I have attached a simple layout for you to see what I am trying to achieve! Any guidance will be appreciated! Thank you in advance.
×
×
  • Create New...