Fadein animation not working when scroll and How to add the indicators when using ScrollTrigger?

[Narendra Verma]

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 .

 

 

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

[darkgr33n]

I assume by indicators you mean the markers;

to show the markers, just add "markers: true" to the scrollTrigger object.

 

I only started learning in the last few days so can't help with the fade though o.O

[Narendra Verma]

@darkgr33n, Yes, markers: true is working.

 

I am also stated learning and now getting issue in fadeIn.

[GreenSock]

I noticed several problems: 

1. You're animating to an autoAlpha of 1, but those elements are ALREADY at an opacity of 1 so they won't do anything. Solution: set them to opacity: 0 in your CSS or via GSAP initially. 
2. You're looping through the ".gsapfadein" elements correctly, but inside that loop you're setting up the tweens to animate ALL "h2" elements on the entire page, as well as all the "p" elements. I think you meant to only target the one(s) inside that particular looping ".gsapfadein" element, right? Solution: make sure you use element.querySelector() to only get the descendants of that element in the loop.
3. You didn't define any start or end values for the ScrollTrigger, so it's using the defaults. I suspect you want to tweak those to get a more attractive effect ion your case. 
4. Like @darkgr33n said, if you want to see the markers, just set markers: true. 

Is this more like what you wanted? 

See the Pen fe09aa4dbc81f080c6e2243f083bb082?editors=0010 by GreenSock (@GreenSock) on CodePen

[Narendra Verma]

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

[GreenSock]

24 minutes ago, Narendra Verma said:

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?

Sorry, I don't understand your question. Can you try again please? 

 

Note that you've got scrub: true which means that the overall duration will be forced to fit between the "start" and "end" positions (that's how scrub works), so if you want it to last longer you'd just move the "end" position lower. If you don't want scrubbing, you can remove the scrub: true and then directly set the duration on the animation. 

[Narendra Verma]

@GreenSock, Apologizes for late reply,

 

I mean when scroll reach the target then I have to animate H2 then p tag then next parentDiv.

[GreenSock]

I still don't really understand what you're asking, but you can definitely use a timeline to sequence animations, and add your ScrollTrigger to that timeline. 

https://greensock.com/docs/v3/GSAP/Timeline