Sticky column with observer on text that are in viewport

[AntonioNB4]

Hi community,

Hello community, is there a possibility to intercept the text in the second column by assigning a class to the text not in the center of the viewport, to give it a blur effect, perhaps by adding a class once intercepted?

 

See the Pen YzgbeLg by Antonio-Nocella (@Antonio-Nocella) on CodePen

[mvaneijgen]

When using GSAP I would let GSAP handle the animation you want and not try adding classes, much easier to manage. 

 

Is something like this what you're looking for? I would just create a ScrollTrigger for each piece of text and just play or reverse the animation one the different callbacks onEnter, onLeave, ect read more https://gsap.com/docs/v3/Plugins/ScrollTrigger/ be sure to tweak the start and end values so that is triggers exactly when you want. 

 

Hope it helps and happy tweening! 

 

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

[AntonioNB4]

28 minutes ago, mvaneijgen said:

When using GSAP I would let GSAP handle the animation you want and not try adding classes, much easier to manage. 

 

Is something like this what you're looking for? I would just create a ScrollTrigger for each piece of text and just play or reverse the animation one the different callbacks onEnter, onLeave, ect read more https://gsap.com/docs/v3/Plugins/ScrollTrigger/ be sure to tweak the start and end values so that is triggers exactly when you want. 

 

Hope it helps and happy tweening! 

 

 

 

I think yes :)) is there the possibility to exclude the first text from blur ?

[mvaneijgen]

Of course! Just use the CSS selector to :not select the first one 

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

[AntonioNB4]

1 hour ago, mvaneijgen said:

Of course! Just use the CSS selector to :not select the first one 

 

Great! It works.... I noticed that the blur effect on text doesn't kick in on the first scroll (on the initial page load), but it activates if you scroll back and then scroll down again. What could be the reason for this?

[mvaneijgen]

I don't know what the question is. ScrollTrigger works with the start and end markers, when the green markers touch the onEnter fires, when the red markers touch the onLeave fires. See the docs onEnter, onEnterBack, onLeave, onLeaveBack https://gsap.com/docs/v3/Plugins/ScrollTrigger/ The toggleActions are a short hand for that, so if you want things to happen in another order or you want things to happen at other triggers you have to update the toggleActions or the start  and end makers so they suite your project. 

 

If you still have questions please fork one of the demo's and show us what you've tried and explain what things are doing now and what you want them to do, that way we can help you debug. Hope it helps and happy tweening! 

[AntonioNB4]

11 minutes ago, mvaneijgen said:

I don't know what the question is. ScrollTrigger works with the start and end markers, when the green markers touch the onEnter fires, when the red markers touch the onLeave fires. See the docs onEnter, onEnterBack, onLeave, onLeaveBack https://gsap.com/docs/v3/Plugins/ScrollTrigger/ The toggleActions are a short hand for that, so if you want things to happen in another order or you want things to happen at other triggers you have to update the toggleActions or the start  and end makers so they suite your project. 

 

If you still have questions please fork one of the demo's and show us what you've tried and explain what things are doing now and what you want them to do, that way we can help you debug. Hope it helps and happy tweening! 

I know how scrollTrigger works.... In my CodePen, the texts right after the first one don't trigger unless they already have the default blur effect. This happens on the first scroll when the page is loaded. However, if you go back, activating the toggle action, this doesn't happen, and everything is perfect. Maybe there's some modification needed on the toggle action? Or do I need to set the default blur myself with .set?

See the Pen BabeVvj by Antonio-Nocella (@Antonio-Nocella) on CodePen

[mvaneijgen]

2 minutes ago, AntonioNB4 said:

Or do I need to set the default blur myself with .set?

If you want things to have the blur on page load, yes.

 

Right now the animation only triggers if the green and red markers touch. Another way of going about it would be to blur everything on page load and change animation to un-blur something if ScrollTrigger onEnter fires. But that is up to you and what is the best fit for your project. Hope it helps and happy tweening!