Jump to content
GreenSock

Narendra Verma

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

Recommended Posts

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

  • Like 3
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

@GreenSock, Apologizes for late reply,

 

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

Link to comment
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.
×