Narendra Verma

@akapowl, Thanks for reply, Let me watch this video.

Hello, I am learning scrolltrigger, I am trying to animate the heading and paragraph but it's not animating, sometimes when reload the page then it's already showing the inline css. This is the basic example I am trying to learn. I check this video https://greensock.com/docs/v3/Plugins/ScrollTrigger . Would you help me out how to animate the heading and paragraph without affecting on other section?

@akapowl, I hadn't known about the invisible part. Yes, it's working. Thank you so much.

Hello, I have a simple code and I have to use stragger. I have to display the each box one by one. I don't know where is the issue with my code. I checked the videos and refer this link https://greensock.com/docs/v3/Staggers . Inline css is displaying even I set the delay also to check. Would you help me out where is the issue?

I tried fullpage. I am getting some issues in mobile so I asked question on stackOverflow https://stackoverflow.com/questions/64987158/responsive-code-is-not-working-in-moible-with-fullpage-js/ I know this is not your product but in the both the case I am getting issue in mobile only.

@ZachSaucier, Yes I checked with fullPage but there are issues with fullPage. It's not working on mobile device properly. I mean there are some issues with text in mobile. That's the reason I am using above codepen code but that is also the issue

any more help in this?

Hello, I am using below code pen. https://codepen.io/GreenSock/pen/NWxNEwY There is no issue in the desktop, Even desktop mobile responsive is also working. Now I checked in my iPhone 6s Safari browser and when I swipe up the first time then it's continue scrolling till the 4th slide and wait for 1-2 sec and going up till 3rd half. It's not working in mobile device as in the desktop. Can you please check it once in mobile device?

@mikel I am using below codepen link https://codepen.io/Narendra_verma/pen/ExyBbqP It's not working on mobile device. I mean I am getting the last 3 images half.

@mikel, Is it the same code you used? I am using iPhone 6s and I checked on safari.

@ZachSaucier I am using mikel codepen link https://codepen.io/mikeK/pen/QWLJLgM First 3 images are displaying perfectly but Last and second last image is not displaying full. This is my mobile screenshot.

@mikel I am getting one issue after one year. It was working perfectly on mobile but don't know why it's not working now. My issue is in mobile, I am not getting the last 2 slide image full-screen on my mobile. Can you help me out with this?

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

@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", https://codepen.io/Narendra_verma/pen/eYZXygp

@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.

@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.

@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>

@akapowl, Yes, Thanks for the information. I added the parent class of the section. I don't know it's correct or not but it's working for me. For Second section t1.from(".blueBox_gsap .heading h2", { duration: 1, opacity: 0}) .from(".blueBox_gsap .heading p", {duration: 1,opacity: 0}); For Third section t2.from(".redBox_gsap .heading h2", { duration: 1, opacity: 0}) .from(".redBox_gsap .heading p", {duration: 1,opacity: 0});

@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.

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. https://codepen.io/GreenSock/pen/YzygYvM

@ZachSaucier, I don't know why it's not working for me. I watch the ScrollTrigger video more than 5 times but still, I am not able to understand what is the issue with my code. H2 and p tags animation not working as expected. If h2 and p tag animation is working for the second section then I am getting issue on third section. https://codepen.io/Narendra_verma/pen/YzqBbVo

@ZachSaucier, Oh! I apologies. I don't know about the fork. I'll try this next time. I watch that video 2-3 times but still, I have a questions why it's not working for me.?

@ZachSaucier, Yes, I tried end:"bottom bottom" In the second section(Blue one). When I go to the bottom then H2 and p tag animation is working but once reach at the top then h2 heading not displaying. Also in the third section(Red one) is totally blank. Is there any think I missed in my codepen?

@ZachSaucier, I am tittle bit confused. Can you help me what is the issue with p tag? I mean my p tag animation still not working properly after adding the end position. Is there anything i missed?

@ZachSaucier, Yes I added the endTrigger: ".redBox_gsap", Now the only issue is with my heading p tag. Updated my codepen.