Narendra Verma

Hello, I have a small issue while scrolling. What I am doing is, when I scroll and reach the section then I also want to fade in my h2 and p tag. I am talking about the second section(which is in the blue). As of now, fade in working only with h2 tag. Now when my third section comes on the viewport then I have to animation my h2,p, one, two, three, and four content. Would you help me out with this issue?

@akapowl, and @Visual-Q Thank you so much for the solution. Your answer is working. I need one more help. What I am doing is, Once display all the black box on screen then if the user scroll more then I have to fadeout my all the boxes and fadein my content one by one which I added inside the same section. Please check my below codepen. https://codepen.io/Narendra_verma/pen/OJNrpZP

No, not like that. I mean When I scroll 200px from the bottom then I have to animate it. As of now, my red section reaches at the top (till the time my section is blank) and then start the animation. For example, When the second section comes in the viewport from the bottom and reaches till 200px then start the animation.

@Visual-Q. I checked your codepen. I need one small help. I means in the section second section when My start marker reach at the top then my animation start working. Can I start when I scroll little bit 200px?

@akapowl, Thanks for the answer. I fotgot to add the id in the HTML. Thanks for the notice. so Is there any another way to to animate section like mine? @Visual-Q Thanks for the answer.

Hello, I set the position sticky to each section. I have 6 boxes on my second section and each box has its number for animation purpose. I have to fade in a box using a scroll trigger. My issue is, till 3 boxes there is no issue but when I scroll for fourth then my end section is coming on the screen. I have to animate all my boxes then the end scroll should come.

@ZachSaucier, I checked the Richared1604 demo link. That link is only for vertical scroll. I am trying vertical and horizontal both. I am getting two issues which I shared in the above comment. I am trying to learn scrollTrigger. I haven't found the solution that's the reason I ping here

Would you help me out in this issue?

@Richard1604, I tried and i found the solution but it's not 100%. I mean when I reach sixth section then rows will come from right to left. Now I have two issues 1) I have to scroll multiple times then it's reach on left side.(I want in one scroll) 2) I am getting only four rows but I have five rows. Can you help me out with this issue? https://codepen.io/Narendra_verma/pen/MWyQeOd

@Richard1604, Yes, I started learning. I can understand this is not a easy requirement. I develop the vertical scroll now I am learning to the pin one of the section and then scroll horizontally.

@Richard1604, I found one example here https://codepen.io/emanboogie/pen/JjGMzdm I am trying same like this but there are lots of code in this

@Richard1604, Actually What I am doing is, I have to scroll the first 5 section from bottom to top then once the sixth section reaches on view port then I have to scroll his rows horizontally. Once complete all the rows then start again reaming section from bottom to top. I updated the codepen.

@Richard1604, When user scroll one then notice below section reach the top.

Hello, I am using scrollTrigger. What I am doing is, once the user scroll then i have to scroll the below section at the top. As of now if I half scroll then it's automatically cover the screen.

@GreenSock, Apologizes for late reply, I mean when scroll reach the target then I have to animate H2 then p tag then next parentDiv.

Thank you so much for valuable information.

@GreenSock, Yes, It's working. Thanks for the information. I have one doubt. I am on first section(red one). I have to animation first heading the p tag then parentDiv then how to set duration for this?

@darkgr33n, Yes, markers: true is working. I am also stated learning and now getting issue in fadeIn.

Hello, Todays I started learn the ScrollTrigger. My section fadein animation not working when scroll also I need to know how to add the indicators .

@ZachSaucier, Yes, You are right, I have to learn the scrollTrigger. Can you help me one example when section reach on screen then start the animation. I mean before I was using belowscript width ScrollMagic $(selectorname).each(function () { // animation code here} can we use ScrollTrigger with above function ?

@ZachSaucier, Yes ScrollTrigger is also good, I always try to use this but whenever I get any issues then i research on this but I always get the solution on scrollmagic. Check this example, I was searching this in scrollTrigger but i got in scrollmagic. https://codepen.io/Visual-Q/pen/ZdaxXQ

@Visual-Q, Yes, I checked codepen and it's working. I want to know what changes you have done. Can you explain me?

Hello, I have a menu on my website and I have to hide my menu only for first two section and then enable my menu. I tried below code but it's not working for me. Would you help me out with this issue?

@akapowl Your above code is working, I have one doubt I used below code. First I am displaying the loader and after completing the loader I have to animate my header text so I used below code. Now the issue is, when loader animating in the background my header animation is also showing complete. I want after complete the loader then start header text animate. window.onload = function () { tween.play(); var tl = gsap.timeline(); tl.from(".universalSearch", 1, { opacity: 0, y: 30 }) .from(".socialList",1,{opacity:0},1) }

@akapowl Yes, It's working as my expected. Thank you so much the information.