Jump to content
Search Community

Pin the section until the animation complete using a scroll trigger

Narendra Verma test
Moderator Tag

Recommended Posts

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.

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

Link to comment
Share on other sites

 

Hey @Narendra Verma

 

I'll rephrase my initial response:

 

The main problem here is, that your ScrollTrigger has its trigger set to '#onscrollAnimatetext' - but nowhere in your HTML do you have an element with the ID of onscrollAnimatetext. It appears to be pinning, but I think that is only because of its 'position: sticky'.

 

I set your trigger to '.onscrollAnimatetext', added a start and end to the ScrollTrigger and it works like a charm.

 

See the Pen bdc810c05da8df823aac22403b34321b by akapowl (@akapowl) on CodePen

 

 

 

Also, I removed the 'position: sticky' from your .verticalPanel, because I recall reading somewhere, that ScrollTrigger's pinning doesn't get along well with elements that have 'position: sticky' applied - but I am not 100% positive about that and would need confirmation from @GreenSock or @ZachSaucier on that one.

 

(Edit: after doing some digging of my own, I am not sure, this is true at all) 

 

 

 

Go ahead and adjust the start and endpoint to your liking.

 

Hope this helps.

Cheers

Paul

 

 

  • Like 4
Link to comment
Share on other sites

If you don't want to overflow the end section you also need to force the container to include the height of the floats with a clearfix, on the .innerWrap, and  .bg_red height:auto since 100vh doesn't always enclose the content and .bg_red min-height:100vh will then make sure the first panel also won't extend past it if auto height is less than 100vh.

 

See the Pen ZEWmbZL by Visual-Q (@Visual-Q) on CodePen

 

I would suggest using flex though, floats are not really necessary anymore a flex is far superior.

 

See the Pen YzqRyOj by Visual-Q (@Visual-Q) on CodePen

 

 

  • Like 4
Link to comment
Share on other sites

On 9/21/2020 at 6:13 AM, Narendra Verma said:

so Is there any another way to to animate section like mine?

 

I don't really know, what you mean? ...you could animate it any way you'd like

 

 

 

On 9/21/2020 at 2:11 PM, Narendra Verma said:

Can I start when I scroll little bit 200px?

 

Do you mean, that you want to add a bit of delay to the whole timeline, so it doesn't start right away, when the second section hits the top?

But you would have to scroll down a bit further with nothing but the background to be visible, before the fading in of your elements starts?

 

You could do this, by adding an empty tween at the very start of your timeline, maybe like so

 

t1
  .from("body", { duration: 5 })	// EMPTY TWEEN FOR YOUR DELAY

  .from("h2", {duration: 1,opacity: 0})
  .from(".one", {duration: 1,opacity: 0})
  .from(".two", {duration: 1.5,opacity: 0})
  .from(".three", {duration: 1.5,opacity: 0})
  .from(".four", {duration: 1.5,opacity: 0})
  .from(".five", {duration: 1.5,opacity: 0})
  .from(".six", {duration: 1.5,opacity: 0});

 

 

See the Pen 4422d4a63eca137932441d6e9dcabef8 by akapowl (@akapowl) on CodePen

 

 

 

Also, I'd suggest, you give this part in the docs a read.

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

Could be helpful to you, since durations do not work quite the same on ScrollTriggers with scrub applied in comparison to durations on regular timelines.

 

 

 

  • Like 1
Link to comment
Share on other sites

11 minutes ago, akapowl said:

You could do this, by adding an empty tween at the very start of your timeline, maybe like so

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.

 

 

 

Link to comment
Share on other sites

 

On 9/21/2020 at 4:01 PM, Narendra Verma said:

For example, When the second section comes in the viewport from the bottom and reaches till 200px then start the animation.

 

 

Of course, you could also do it like this.

That's, what the 'start' and 'end' are for.

 

But you might want to consider getting rid off the pinning, then.

 

In this following demo, your start and end are set to

 

 start: "top bottom-=200px",
 end: "bottom bottom",

 

so the scrub starts when your section's top is 200px above the bottom of the window and ends, when your section's bottom hits the bottom of the window.

 

 

See the Pen b9ee34f1817a1bdbdef1fd142f2f126f by akapowl (@akapowl) on CodePen

 

 

 

  • Like 3
Link to comment
Share on other sites

1 hour ago, akapowl said:

But you might want to consider getting rid off the pinning, then.

 

Yeah I'm not seeing how pinning works into what you're describing. The problem is the pinning and animation starts when the container hits the top of the viewport.

 

I think you're looking at a separate trigger for the animation, something like this. I also removed the need for the container to be at least 100vh so it can take the height of the content by putting the end section in the same parent. 

 

See the Pen bGpQLMv by Visual-Q (@Visual-Q) on CodePen

  • Like 3
Link to comment
Share on other sites

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

 

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

 

 

 

 

 

Link to comment
Share on other sites

 

Hey @Narendra Verma

 

That could be achieved, by setting up the timeline for the new ScrollTrigger you added in, like this, for example

 

t13
  .to(".content", { duration: 1.5, opacity: 0 })
  .from(".content-two p", { duration: 1.5, opacity: 0, stagger: 1.5 })
;

 

See the Pen 6ef82d403540ed22f0c4ca5b019ee5b4 by akapowl (@akapowl) on CodePen

 

 

First, fading out the .content you have, and then fading in all the paragraphs of your .content-two with a stagger.

 

Does that feel, like what you want to achieve?

 

 

 

Edit

You actually wouldn't even have to create a new ScrollTrigger for this. 

You could simply just extend your t12-timeline with the new tweens like this:

 

t12
  .from(".one", { duration: 1, opacity: 0 })
  .from(".two", { duration: 1.5, opacity: 0 })
  .from(".three", { duration: 1.5, opacity: 0 })
  .from(".four", { duration: 1.5, opacity: 0 })
  .from(".five", { duration: 1.5, opacity: 0 })
  .from(".six", { duration: 1.5, opacity: 0 })

  .to(".content", { duration: 1.5, opacity: 0 })
  .from(".content-two p", { duration: 1.5, opacity: 0, stagger: 1.5 })
;

 

 

That does do the same as the first version, just in a slightly different 'duration' than your version, as you can notice on the markers.

 

See the Pen d227e935b6d84b1a673a64bd539487ab by akapowl (@akapowl) on CodePen

 

 

 

On a sidenote:

In your demo your heading is moving all around the place when scrolling.

Removing the 'position: sticky', that you added to it, fixed that issue.

But maybe this was intended, I don't know.

 

Also I added a 'min-height: 100vh' to your .bg_red, otherwise you'd be having a little white gap below that secction at the bottom of the window on wider screen-sizes.

 

Hope this helps.

Cheers

Paul

  • Like 3
Link to comment
Share on other sites

6 hours ago, akapowl said:

.from(".two", { duration: 1.5, opacity: 0 }) .from(".three", { duration: 1.5, opacity: 0 }) .from(".four", { duration: 1.5, opacity: 0 }) .from(".five", { duration: 1.5, opacity: 0 }) .from(".six", { duration: 1.5, opacity: 0 })

Looks like a good case for using defaults :) Or staggers.

  • Like 2
  • Haha 1
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...