Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Narendra Verma

How to scroll the horizontal in scrolltrigger once scroll

Recommended Posts

Hello,

 

I am using Wordpress and sharing my code in codepen.

I am trying to scroll horizontal but I am getting some issues. Like when I reach the  second section and scroll then my end section going up and then my horizontal scroll working.

 

I need, Like when I second section is on view port then scroll horizontal scroll from right to left.

 

 

I checked below example. But in below example. I don't want to scroll the first  "Horizontal snapping sections (simple)" and once scroll needed.

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

 

 

 

See the Pen qBZgejP by Narendra_verma (@Narendra_verma) on CodePen

Link to post
Share on other sites

@mikel, Thanks you for the answer.

 

Two things

1) What is the issue with my code?

2) Is it possible to end the horizontal slide when the user scrolls once. I mean once scroll then horizontal slide start from the right and end it left side. I don't want to stop it in between.

 

Link to post
Share on other sites

@mikel, How can I add another horizontal slider? I change the fromRight id to class.

 

I have only one section and inside one section i have min five horizontal slide.

 

<section>
  <h1>Section 01</h1>
</section>

<section id="sec02">
  <h1>Section 02</h1>

  <div class="fromRight">
    <h1>from Right one</h1>
  </div>
 
  <div class="fromRight">
    <h1>from Right two</h1>
  </div>
 
</section>


<section>
  <h1>End</h1>
</section>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

<script type="text/javascript">
    
gsap.set('.fromRight', {xPercent:100})

var action = gsap.timeline({
  scrollTrigger: {
    trigger: "#sec02",
    pin:true,
    scrub:0.3,
    start: "top top",
    end: "+=1500"
  }
})
.to('.fromRight', {xPercent:0, duration:2})
.to({},{duration:0.5}) // an empty tween to generate a pause at the end
</script>

 

Link to post
Share on other sites
1 hour ago, Narendra Verma said:

Is it possible to end the horizontal slide when the user scrolls once. I mean once scroll then horizontal slide start from the right and end it left side. I don't want to stop it in between.

 

1 hour ago, Narendra Verma said:

How can I add another horizontal slider?

Write your code in a loops through each instance of your slider and sets things up with properly scoped targets to that slider. I talk about how to do that in my article about animating efficiently.

 

We cannot help you with every step of your project. As I have stated in the other threads you need to take the time to understand what's going on. 

Link to post
Share on other sites

@ZachSaucier, Thanks for the help, I can understand that here are lot's of thread and you have to reply on each. I am really appreciate help and support.


About my issue,

I am already using the toArray which i added in the codepen  while asking the question. I also added the reference codepen. @mikel suggested me for horizontal slider but that is only one. So definitely i will ask how to add second one?

It's will be more helpful  if someone help me what is the issue with my code.

 

Link to post
Share on other sites

@mikel, @ZachSaucier Can you help me out how to use more then one horizontal slide?

 

I have only one section and inside that section i have min five horizontal slide.

Link to post
Share on other sites

@mikel, Thanks you so  much for the reply. Yes, I am looking for the same and I implemented your answer with my code.  My only issue is, end section is also scrolling before end the horizontal scroll.

 

I tried to add the  endtrigger but it's not working.

endTrigger:".bg_black",

 

See the Pen eYZXygp by Narendra_verma (@Narendra_verma) on CodePen

  • Like 1
Link to post
Share on other sites

@mikel, Yes, This time it's working perfectly. Thank you so much for I really appreciate your help and support.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×