skew on scroll

[Mlbb lan]

have a nice evening.

I can't figure out why the console gives out the gsap target skewElem bug not found. I gave a class to my element which should perform the skew action.

example effect:

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

help please

See the Pen bGeWNOE by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen

[akapowl]

Hey @GeS

 

The console actually doesn't give me anything, but as I see, that your skewing is not working, there are a couple of things to mention with regard to your demo.

 

1) You are missing a </div> closing tag in your markup, which is prone to throw things off, even if everything else were correct.

2) There are multiple sections in your markup with an atrribute of data-scroll-container and you are using that attribute as the querySelector for your loco-scroll as well as the target for your ScrollerProxy - that is probably not a good idea. Use one certain specific unique element. I changed it to '#viewport' there instead.

3) You forgot to set a scroller to the skewing-ScrollTrigger. I changed that. 

 

and

 

4) I found, that setting a specific trigger, sometimes is neccessary (here it is - in contrast to the demo you were referring to), when working with smooth-scroll-libraries - probably something related to not using the default native scroll-behaviour on the body.

 

See the Pen 182ba822acc8dad639745984516e5c4b by akapowl (@akapowl) on CodePen

 

 

 

Once more, the only thing I can add is, that the most important part always is to make sure your markup is correct, before trying to animate anything.

 

Hope this helps.

 

Cheers,

Paul

[Mlbb lan]

thank you so much, Paul! Everything works perfectly.