Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Narendra Verma

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

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 post
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 post
Share on other sites

@ZachSaucier, Yes I added the      endTrigger: ".redBox_gsap", 

 

Now the only issue is with my heading p tag.

Updated my codepen.

Link to post
Share on other sites
41 minutes ago, Narendra Verma said:

the only issue is with my heading p tag.

That is what I was talking about. By the time the end position is reached for that ScrollTrigger the paragraph is well above the top of the viewport. 

Link to post
Share on other sites

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

Link to post
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 post
Share on other sites

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

Screenshot 2020-09-24 at 8.41.14 PM.png

Screenshot 2020-09-24 at 8.42.02 PM.png

Link to post
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 post
Share on other sites

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

Link to post
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 post
Share on other sites

 

Hey @Narendra Verma

 

That is because your ScrollTriggers are overlapping with tweens on the same elements.

Both your ScrollTriggers, although they start at different points, end at the same point  - thus you are creating conflicting tweens.

 

  • Like 4
Link to post
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 post
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.

×