Animation sections

[Oleh Koval]

Help me solve the problem.

 

When scrolling, the section smoothly transitions to transparent, and the bottom section overlaps it. 
But inside one of the section I need to fixed the element on scrolling. Why is it wrong https://prnt.sc/wfh63c works. 
I don't understand why it doesn't work properly. See an example.

See the Pen bGwvKBZ by oleh-koval (@oleh-koval) on CodePen

[mikel]

Hey @Oleh Koval,

 

Welcome to the GreenSock Forum.

 

I'm not sure what you're going to do.
So here's just an example to show how I interpret it.

 

See the Pen OJRvzvQ by mikeK (@mikeK) on CodePen

 

Happy fading ...

Mikel

 

 

[Oleh Koval]

26 minutes ago, mikel said:

Hey @Oleh Koval,

 

Welcome to the GreenSock Forum.

 

I'm not sure what you're going to do.
So here's just an example to show how I interpret it.

 

 

 

 

Happy fading ...

Mikel

 

 

See how this code https://prnt.sc/wfimns works in my example. This block is not fixed, but disappears first and appears at the end of the section. Although it should fixed smoothly within this section.

[mikel]

 

Hey Oleh,

 

Hmmm, so get it 'out of the blue again'

 

See the Pen rNMdqYM?editors=0110 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[Oleh Koval]

6 hours ago, mikel said:

 

Hey Oleh,

 

Hmmm, so get it 'out of the blue again'

 

 

 

 

Happy tweening ...

Mikel

 

I need something else. Watch this video to understand the problem https://drive.google.com/file/d/1dOhJJ7mWgf4y0OTZMiap3b6X-QTyoF3t/view?usp=sharing

[mikel]

 

hey @Oleh Koval,

 

There shouldn't be any problems.
Simply a logical process step by step.
Even if I can't imagine what this process is for.

 

See the Pen MWjVxLV by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Oleh Koval]

Hey @mikel
Watch this video https://drive.google.com/file/d/1XwdBkxtBxh6JTMfsJglz3y3SmMHbdhVU/view?usp=sharing
That's what it's for.
 

[mikel]

Hey @Oleh Koval,

 

There may be other solutions.
Here's a quick one. As I now interpret your planned process.

 

See the Pen poELBpQ by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Oleh Koval]

10 minutes ago, mikel said:

Hey @Oleh Koval,

 

There may be other solutions.
Here's a quick one. As I now interpret your planned process.

 

 

See the Pen

See the Pen poELBpQ by mikeK (@mikeK) on CodePen

by mikeK (@mikeK) on CodePen

 

 

Happy tweening ...

Mikel

You are moving in the wrong direction.

See how the map https://prnt.sc/wfwlqt is fixed to the text when scrolling.

[mikel]

 

 

Hmmm, you should be able to fork my pen however you want.

These are only suggestions and tips.

[Oleh Koval]

31 minutes ago, mikel said:

 

 

Hmmm, you should be able to fork my pen however you want.

These are only suggestions and tips.

Why does this code not work correctly if I add it to your code?
ScrollTrigger.create({
  trigger: ".wrap",
  start: "top top",
  end: "bottom bottom",
  pin: "#head02",
  pinSpacing: false
});
I have a problem with this and EVERYTHING !!!

[ZachSaucier]

2 hours ago, Oleh Koval said:

Why does this code not work correctly if I add it to your code?

Without you providing a demo of what you're trying it's impossible to say for sure, but my guess is because your selector string for the wrapper is wrong. You have ".wrapper" but it should be "#wrapper" because it is an ID, not a class.

 

Keep in mind that these forums are for specific questions, not general requests to get us to build things for you  Mikel has been very generous with his time but it's up to you to implement our suggestions into your site. 

[Oleh Koval]

21 minutes ago, ZachSaucier said:

Without you providing a demo of what you're trying it's impossible to say for sure, but my guess is because your selector string for the wrapper is wrong. You have ".wrapper" but it should be "#wrapper" because it is an ID, not a class.

 

Keep in mind that these forums are for specific questions, not general requests to get us to build things for you  Mikel has been very generous with his time but it's up to you to implement our suggestions into your site. 

See the Pen VwKxZZW by oleh-koval (@oleh-koval) on CodePen

Try scrolling through section 2. Look at the behavior of this element https://prnt.sc/wg1a5f

[ZachSaucier]

Your approach is a bit confusing to me. Why are you pinning the entire #container? If you just want the headings to be pinned in the background I'd try setting it up to have each heading positioned absolutely behind the content for its respective section. Then I'd pin the heading for as long as you need it to be pinned.