Jump to content
Search Community

Expected animation on working when section comes on the viewport while scrolling

Narendra Verma test
Moderator Tag

Recommended Posts

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?

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

Link to comment
Share on other sites

11 minutes ago, Narendra Verma said:

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.

It's actually working with both. But your end point for the ScrollTrigger is well above the viewport's top so you just don't see the animation of the p tag. Just change the end point of the ScrollTrigger to one like the top of the viewport to see it working.

 

I highly recommend going through the ScrollTrigger documentation and video again because it's clear that you're not understanding how things work yet :) 

Link to comment
Share on other sites

You end position is way down the page so the paragraph is well out of view by the time it's done animating. Something like this is likely what you want:

const t1 = gsap.timeline({
  scrollTrigger: {
    trigger: ".blueBox_gsap",
    end: "bottom bottom",
    scrub: true
  }
});

But like I said, I highly encourage you to go through the documentation and video again because I think you would understand that if you took some time to understand what's going on.

Link to comment
Share on other sites

It's not blank for me right now. But you keep changing your CodePen so it's hard to help. Please use the "fork" button on CodePen each time that you make a new version of your project. That way context is retained in the forums and we can look at the same version of the project without you switching things out from under us. 

 

But the issue is logical on your side. Again, I highly recommend going through the ScrollTrigger documentation again and understanding how it works. We can't help you with every single step of your project. 

Link to comment
Share on other sites

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

 

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

Link to comment
Share on other sites

@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});

 

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.
×
×
  • Create New...