How to change another divs element when scrolling?

[bntratox]

Hello,

I'm trying to do something like that: https://streamable.com/vy54g5

But with a different approach, I want to have 2 sides, because my left side will change color. So the left side must be another part instead of a floating text. Other than that, I want to achieve the same thing.

 

 

Here is what I have so far.

The problems I couldn't fix yet:

 

- I want to make the left side position sticky because when the purple left div hits the top of the screen, I want the text to be there not sliding with the page.

 

- When I slide to the second div which is orange and has a text "TWO" I want to be able to fade out or use another effect to remove the "<h2>This is random content</h2>" and fade in or show the "      <h2>This is another content</h2>" text inside of the left side. 

Basically, when the top of the panel on the right hits the top of the screen, I want to be able to show the left div assosicated with it and hide the other ones.

 

- Also like in the text change, I want to be able to change the color of the left section too, for example the page starts with purple left background, but when I scroll to the next div, I want to be able to make left div's background color something different.

 

 

Thats all I think.

 

Could you help me please?

Thank you so much, 

See the Pen jOpEOWm by mertcanuslu (@mertcanuslu) on CodePen

[mvaneijgen]

Have you seen the latest video from the Greensock Youtube channel?  The gist is as follows. Just build the animation first worry about scrolling later. 

Quote

The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

For your example I would start with a timeline instead of a single GSAP tween, because then you can animate multiple elements at once. I would also make it so that before you start animating all your elements are they stacked on top of each other, so that you only have to focus on the .from() animation, because the elements will be already at the position you want them to be. 

 

Really remove ScrollTrigger and just build the animation, this will make everything so much easier. Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

On top of @mvaneijgen's advice, maybe this could be a better starting point based on what you're trying to achieve:

See the Pen OJwPPQE by GreenSock (@GreenSock) on CodePen

 

I still think is better to create the animation without ScrollTrigger and then add it to the mix.

 

Happy Tweening!

[bntratox]

15 hours ago, mvaneijgen said:

Have you seen the latest video from the Greensock Youtube channel?  The gist is as follows. Just build the animation first worry about scrolling later. 

 

For your example I would start with a timeline instead of a single GSAP tween, because then you can animate multiple elements at once. I would also make it so that before you start animating all your elements are they stacked on top of each other, so that you only have to focus on the .from() animation, because the elements will be already at the position you want them to be. 

 

Really remove ScrollTrigger and just build the animation, this will make everything so much easier. Hope it helps and happy tweening! 

Hello, thank you for your answer I really would like to understand gsap more but its really complicated, Im trying to achieve this for weeks yet I still can't figure out how. I've watched couple of tutorials but GSAP is a whole language by itself

14 hours ago, Rodrigo said:

Hi,

 

On top of @mvaneijgen's advice, maybe this could be a better starting point based on what you're trying to achieve:

 

 

 

I still think is better to create the animation without ScrollTrigger and then add it to the mix.

 

Happy Tweening!

Thank you so so much for fixing my code and making it better, I will be using this from now, if its okay can you also share the same animation without scrolltrigger please? because as long as I understand I think I have to use scrolltrigger to achieve this, I don't know how to do that without mouse trigger.

[bntratox]

See the Pen KKBwqeZ by mertcanuslu (@mertcanuslu) on CodePen

 

I am trying to trigger an effect on the headings when "Orange" div appears on the screen but it triggers without orange appearing in the screen, why would it be? @Rodrigo

 

Edit: I managed to do that, when orange comes to the screen I change the opacity of the left div, but I have 2 questions:

- When I scroll to top back to red div, opacity keeps low, how can I make it revert back? -> Fixed by adding toggleActions But doesn't work as I expected.

- How can I toggle class to the left divs?

I just can't figure out how to toggle class to left divs, I tried but couldn't work somehow

[bntratox]

See the Pen KKBwqeZ by mertcanuslu (@mertcanuslu) on CodePen

 

I've come this far but yet there is a problem, my first and second left div gets the class as like I expected but the third one gets that at the same time with the second one. Why is that happening?

@Rodrigo @mvaneijgen

[mvaneijgen]

It looks like your are making it to complicated (or I'm missing something). 

 

What's really important with GSAP is that before you start animating everything is layed out correctly. Personally I like my elements to be at there end position, so in this case I've overlapped everything on top of each other, which you can see in the pen below. 

 

See the Pen xxJbPPM?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

Next I focus on the animation, here I move the panels .from() 100 yPercent to their original position and the the content .from() -100 to their original position. This is build in a fancy .forEach() loop, but you could easily write this by hand (and I strongly recommend trying that when starting out, there is always time to optimize later), by just giving each element a class and writing the time line like .one does this .two, does this, ect.

 

I would think this would be a good learning exercise, what if you want each .panel to move from the top, then from the left, right and bottom? Up for a challenge? 

 

See the Pen yLqyPKv?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

When that is all said and done only then I enable ScrollTrigger to test my animation on scroll. If I want to tweak my  animation I disable ScrollTrigger again and only focus on the animation. You rarely need more then one ScrollTrigger (for one animation) and when starting out I would say you never want more than one ScrollTrigger!

 

See the Pen RwBNjYr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

This is a lot and there is so much more to learn, but keep it small and start out simple and build from there. You said you've watched some video's, when starting out I'd watched all the Greensock YouTube channel videos  and I still watch them, there is so much knowledge to gain from them. Also check out our own @Carl YouTube channel. Hope it helps and happy tweening! 

[bntratox]

38 minutes ago, mvaneijgen said:

It looks like your are making it to complicated (or I'm missing something). 

 

What's really important with GSAP is that before you start animating everything is layed out correctly. Personally I like my elements to be at there end position, so in this case I've overlapped everything on top of each other, which you can see in the pen below. 

 

 

 

 

Next I focus on the animation, here I move the panels .from() 100 yPercent to their original position and the the content .from() -100 to their original position. This is build in a fancy .forEach() loop, but you could easily write this by hand (and I strongly recommend trying that when starting out, there is always time to optimize later), by just giving each element a class and writing the time line like .one does this .two, does this, ect.

 

I would think this would be a good learning exercise, what if you want each .panel to move from the top, then from the left, right and bottom? Up for a challenge? 

 

 

 

 

When that is all said and done only then I enable ScrollTrigger to test my animation on scroll. If I want to tweak my  animation I disable ScrollTrigger again and only focus on the animation. You rarely need more then one ScrollTrigger (for one animation) and when starting out I would say you never want more than one ScrollTrigger!

 

 

 

 

This is a lot and there is so much more to learn, but keep it small and start out simple and build from there. You said you've watched some video's, when starting out I'd watched all the Greensock YouTube channel videos  and I still watch them, there is so much knowledge to gain from them. Also check out our own @Carl YouTube channel. Hope it helps and happy tweening! 

Thank you so much, I'll keep watching, right now Im watching The Code Creative's scrollrigger playlist on youtube bull definitely check the ones you've mentioned.

 

Im playing with the final codepen you've shared but can you help me about something, I would rather give class to left divs instead of them coming from above. Left should be fixed, and I will add "visible" class to the "contentos" and animate them and show them with css myself.

Also, In the first frame, we can see purple and green backgrounds, rather than that, can we start with first left and first right divs(first panel and first contento) visible?  I tried that by adding them custom css etc. but still couldn't make that work.

[mvaneijgen]

If you're animating with GSAP I would animate everything with GSAP, don't go mixing CSS and GSAP. You can easily change the left panels to not move up and down, just animate opacity and change the duration to 0.1 second (or use a .set() instead of a .from() to have it change instantly, that's up to you).

 

5 minutes ago, bntratox said:

Also, In the first frame, we can see purple and green backgrounds, rather than that, can we start with first left and first right divs(first panel and first contento) visible?  I tried that by adding them custom css etc. but still couldn't make that work.

 

Sure just give item 2, 3 and 4 a custom class and only animate that custom class and skip animating the first one. 

 

I would recommend experimenting now with this pen, keep forking your pen and make like 10 versions with all kinds of different solutions, to see how things work and what does what. 

[bntratox]

22 minutes ago, mvaneijgen said:

If you're animating with GSAP I would animate everything with GSAP, don't go mixing CSS and GSAP. You can easily change the left panels to not move up and down, just animate opacity and change the duration to 0.1 second (or use a .set() instead of a .from() to have it change instantly, that's up to you).

 

 

Sure just give item 2, 3 and 4 a custom class and only animate that custom class and skip animating the first one. 

 

I would recommend experimenting now with this pen, keep forking your pen and make like 10 versions with all kinds of different solutions, to see how things work and what does what. 

 

 

See the Pen LYBEeXx by mertcanuslu (@mertcanuslu) on CodePen

 

Here, I've done it thank you

But the reason I want to combine GSAP with css is because I have to achieve the same animation like this.

To achieve that, I will write a css code. So the max-height of the left contento divs contents will be 0. When they come to the viewport i will animate them with css to max-height:100px; so I will get the same animation.

[mvaneijgen]

Everything you can animate with CSS you can animate with GSAP. This just seems like a clipPath animation on the text while also moving it up. 

[bntratox]

Just now, mvaneijgen said:

Everything you can animate with CSS you can animate with GSAP. This just seems like a clipPath animation on the text while also moving it up. 

Thank you but Im not good at either css or gsap to do that in a short amount of time. So instead I prefer to use the trick I've mentioned, 

I will give 

.contento * {

max-height: 0}

 

then when the contento comes to the viewport, I will add it ".visible" class,

and visible class will give it max-height: 1000px;

 

When I do this, I get the same animation. You can check it

See the Pen KKBwqeZ by mertcanuslu (@mertcanuslu) on CodePen

.

 

So can you please tell me how can I add a feature to add custom class to the divs on the left of the screen when they became visible?

[Rodrigo]

Hi,

 

You have a critical issue here, you are nesting ScrollTrigger instances. You have the first ScrollTrigger instance that pins the entire section with both left and right panels and then you are creating another set of ScrollTrigger instances that depend on when the right side panels come into view, due to the way pinSpacing works that is creating an issue where the start and end points of that second set of ScrollTriggers are off because of the first ScrollTrigger instance you created.

 

I think a good approach could be using the call() method from the GSAP Timeline class in order to toggle the class at certain points of the timeline, something like this:

See the Pen GRBgBZK by GreenSock (@GreenSock) on CodePen

 

I once again I agree with @mvaneijgen in that you should use just GSAP for this entire thing, since with this approach you have very little control over the text animations, but we'll leave that to you. We base our suggestions on our experience and the many things we've seen around in the forums, nothing more. We don't aim to put constraints on users and the way they write and architect their sites and apps and how they approach their workflows.

 

Happy  Tweening!

[bntratox]

5 minutes ago, Rodrigo said:

Hi,

 

You have a critical issue here, you are nesting ScrollTrigger instances. You have the first ScrollTrigger instance that pins the entire section with both left and right panels and then you are creating another set of ScrollTrigger instances that depend on when the right side panels come into view, due to the way pinSpacing works that is creating an issue where the start and end points of that second set of ScrollTriggers are off because of the first ScrollTrigger instance you created.

 

I think a good approach could be using the call() method from the GSAP Timeline class in order to toggle the class at certain points of the timeline, something like this:

 

 

 

I once again I agree with @mvaneijgen in that you should use just GSAP for this entire thing, since with this approach you have very little control over the text animations, but we'll leave that to you. We base our suggestions on our experience and the many things we've seen around in the forums, nothing more. We don't aim to put constraints on users and the way they write and architect their sites and apps and how they approach their workflows.

 

Happy  Tweening!

Thank you so much Im literally so lost here and literally depend on you guys help I feel so lost like Im trying to add random stuff everywhere to fix everything, like there is 0 chance I could figure out that I need to use call method there.

 

Final question, thank you so much, this is last I suppose, can we make the left section start on top as well as right side?

I mean red div is there before we enter the section, can I also make left white content also start on top before starting?

I mean can we start like this?

[bntratox]

See the Pen YzjPjvz by mertcanuslu (@mertcanuslu) on CodePen

 

@Rodrigo this is the final version where I came, do you think any optimization could be made to this one?

[Rodrigo]

Hey!

 

Great job!, looks really good! 🥳

 

Good work using the position parameter! I think it serves your particular purpose as you expected, so I wouldn't change anything about it.

 

Happy Tweening!

[bntratox]

On 12/22/2022 at 1:13 AM, Rodrigo said:

Hey!

 

Great job!, looks really good! 🥳

 

Good work using the position parameter! I think it serves your particular purpose as you expected, so I wouldn't change anything about it.

 

Happy Tweening!

Hello again, I just needed to change something but I got confused, can you help me about it please, its the same example. I just want to change that I have to scroll couple times before the second slide comes to the screen.

How can I make that start instantly? I mean I want no stop, I want the divs keep scrolling without any delay on pin.

[Rodrigo]

Hi,

 

Just remove the +=0.25 in the timeline instance on the panels loop:

panels.forEach((panel, index) => {
  if (index) {
    tl.to(
      panel,
      {
        yPercent: 0,
        ease: "none"
      },
      // "+=0.25" // This creates the pause or wait between panels
    );
    tl.to(
      contentoEls[index],
      {
        yPercent: 0,
        ease: "none"
      },
      "<"
    );
    if (contentoEls[index] && index != 0) {
      tl.call(toggleReveal, [index], "<+=0.1");
    }
  } else if (index == 0) {
    return;
  } else {
    tl.call(toggleReveal, [index], 0.01);
  }
});

If you keep having issues please remember to include a minimal demo.

 

Happy Tweening!