[Update text, on the basis of scrollable children div.]

15 minutes ago, Cassie said:

The best advice I can give for scrollTrigger is to start by creating a timeline that does what you want it to - then hook that timeline up to scrollTrigger.

It's the right approach for most use cases!
 

 

Hi @Cassie, 

Thanks for the quick response, But how to bind different text on the basis of image ?

[Update text, on the basis of scrollable children div.]

Hi, 

I want to change the text on the left, on the basis of image we are scrolling on the right side. I am able to scroll the image, but got stuck at text changing issue. 

See the Pen bGrdWKX by konnectdipit (@konnectdipit) on CodePen

[Change the Alphabet of the text on the basis of list.]

@akapowl Thanks. This is exactly what i wanted. 🥳

[Change the Alphabet of the text on the basis of list.]

Hi, 

I want to change the alphabet at the top on the basis of data, while scrolling. Assuming we are getting the list in sequential order. 

 

See the Pen GRvRxjZ by konnectdipit (@konnectdipit) on CodePen

[On scroll second section is going beneath first section]

Got it. Thanks @akapowl. 🥳

 

[On scroll second section is going beneath first section]

36 minutes ago, akapowl said:

Hi Dipit,

 

If you don't want the white-space (which is the spacing added by the pin-spacer) showing when pinning things like that, you'd want to consider wrapping all your content in a div and pinning this wrapping div instead.

 

 

 

 

 

For any subsequent ScrollTriggers on elements within that wrapping div, you will then need to set the pinnedContainer property to that pinned wrap, as they won't have any pinSpacing to consider for their positioning (because they are inside the pinSpacer of the pin you created before) and thus will not get the correct values as you might expect, otherwise.

 

Hope that helps  

Thanks @akapowl,

 

It worked perfectly.  

what does this mean,

Quote

you will then need to set the pinnedContainer property to that pinned wrap,

do i need to set a property for wrap container ?? 

[On scroll second section is going beneath first section]

Hi, 

I am trying to accomplish this animation using scrolltrigger, but there is some weird space below the first section. I added pinSpacer: false and now, weird space is gone but second section is going beneath the first section. I dont what that to happen.. 

 

thanks

See the Pen mdwKNyv by konnectdipit (@konnectdipit) on CodePen

[Overlapping Section Over Animation]

Yes, This is what i was looking for.. You guys are awesome 🥳  @Cassie @akapowl.

 

Thanks.

[Overlapping Section Over Animation]

18 hours ago, Cassie said:

Hi Dipit - I'm a little confused about the end goal.

You have position sticky on your header in your CSS which would usually have an effect of pinning and the content scrolling underneath.

Just to clarify - you want the header to shrink but the section below it to *never* scroll underneath?

You're looking for the header to shrink and also scroll along with the page?

Hi @Cassie,

Actually i don't want second section beneath until animation of  first section finished.  after that it should scroll beneath the header.

[Overlapping Section Over Animation]

Hi everyone,

I am new to GSAP. trying to create a  Shrinking header animation.  I am trying to reduce the height of 1st section (Faded yellow) using scrollTrigger . But the issue is second section(Blue section) is hiding behind the 1st section on scroll..

See the Pen ZEyeBPG by konnectdipit (@konnectdipit) on CodePen

[Scroll first half and fade 2nd half of screen..]

Hi, I would like to create a carousel. Carousel has 2 parts, if i scroll 2nd part then it should fade in/out 1st part and show its content. 

See the Pen MWoWWgj by konnectdipit (@konnectdipit) on CodePen