[how to use scrollTrigger to pin "header" instead of "overflow:scroll" to scroll elements inside "header"]

Hello.

i want to do something similar like in the codepen.

where when you start to scroll, "header" element will be pinned for 200vh then continue to scroll down.

while header is pinned "h1" and "p" can be scrolled.

 

thank you.

See the Pen xxQawEW by sj-jay (@sj-jay) on CodePen

[loop through text for each section]

@mvaneijgenThank you so much...

i`m still new to Javascript.

this is exactly what i was looking for.

 

 

[loop through text for each section]

hello everyone,

i have created this codepen to swap text in the sticky box for each sections.

and used scrollTrigger for each.

if possible i`d like to know how to use one scrollTrigger and loop though both sections and texts.

thank you.

 

See the Pen QWmRVvO by sj-jay (@sj-jay) on CodePen

[Navigate to section clicking dot Indicator]

Thanks again for your help.

finally got it working...

[Navigate to section clicking dot Indicator]

thank you for your Guidance .  your Explanation is very helpful.

 

[Navigate to section clicking dot Indicator]

hello everyone,

thanks for reading.

 

i want to navigate to section by clicking dot Indicator.

i have tried  to change the Observer code but couldn't Understand the Logic to Sync Both.

please Give Me your guidance.

thank you very much.

 

See the Pen OJvmLNE by sj-jay (@sj-jay) on CodePen

[Change Scroll Direction From BottomLeft To UpperRight Angle - ScrollTrigger]

15 minutes ago, akapowl said:

 

Welcome to the GSAP forum @s-jay!

 

@mvaneijgen is absolutely right. That website you mentioned doesn't listen to or use native browser scrolling at all, they just listen to relevant events.

 

And as he also said, GSAP's Observer Plugin can come in really handy with exactly that part, the listening for events - but all the rest of the logic for how to handle things when the events occur, would be up to you. So beyond knowing GSAP you will likely have to have a good grasp of JS in general, for creating logic to handle all possible sorts of scenarios you may run into with something like this.

 

Here is just a rather basic approach to maybe help you get started - happy tweening!

 

 

 

 

Hello @akapowl,

thanks for your time.

 

I check your pen and I think it's  the closest  to what i want.

i'll try to improve using Observer plugin in this Example.

 

I appreciate your help 

 

[Change Scroll Direction From BottomLeft To UpperRight Angle - ScrollTrigger]

15 minutes ago, mvaneijgen said:

If I look at the demo that is more looking like a slider than something that works on scroll. If I scroll and then scroll back the animation doesn't care it will just finish playing the first animation until it's done. That is something the

can do. There you can look for scroll, swipe, touch events to trigger animations. But it is certainly possible with ScrollTrigger, but will feel a lot different.

 

 

I've removed some code from your demo a now every section moves to the upper left. The issue now is that every section has it's own scroll trigger and you want them to show per 2 slides. A great way to start with ScrollTrigger is to remove ScrollTrigger and just focus on the animation and only when you are happy with the animation add ScrollTrigger back in. 

 

 

 

 

A few days ago someone had a issue that with the solution probably looking the same for your pen see here 

 

 

I would start by creating a timeline and adding all the sections to it. I think you need to stack them all on top of each other with CSS. Like in the previous thread you have to play with the position parameter to have animation start at the same time. Remove ScrollTrigger until you have a animation you are happy with and only then add it back in!

 

Hello mvaneijgen ,

 

thanks for your time.

I check your pen and suggestion.

I'll try to focus on animation first.
I appreciate your help 

[Change Scroll Direction From BottomLeft To UpperRight Angle - ScrollTrigger]

Hello Everyone,

I'm tying to get  the same effect like this:

https://brand.denso.com/en/

 

I am a beginner with GSAP as well as ScrollTrigger.  I have tried It like the codepen demo down below , I could change the angle for sliding to upperleft  but  that is not working properly.

 

Please help me to archive this effect using GSAP and ScrollTrigger.

 

Thanks,

See the Pen ExQJzrx by sj-jay (@sj-jay) on CodePen