Create distortion effect when scrolling

[eli-ott]

Hello, I want to create this distortion effect when scrolling: video of the animation

 

I'm a complete beginner to GSAP like I don't have any basics, but I can learn quickly with the appropriate code, and I'm sure it's possible to do it with GSAP.

I already looked at some topics on this website, with the property skew, but it doesn't skew from the center of the image.

Furthermore, I want this animation to be vertical, not horizontal like in the video.

 

If anyone can help me with an easy-to-understand solution, that would be awesome.

[Cassie]

Hi there Eliott, I'm afraid there's not an 'eay-to-understand' solution here. That example is using shaders and they're notoriously difficult.

curtains.js is a good entry point

https://www.curtainsjs.com/

Good luck, sorry I couldn't help more.

[eli-ott]

Okay thank you I'll check curtain.js. I already saw some people talking about it, so I think it's going to be interesting.

[SteveS]

Just to chime in here, while I'm not completely familiar with curtains.js, having only used it once in the past, getting WebGL effects like this is usually an agonizing crawl down the path of ThreeJS. Yuri Artiukh has a lesson for sale on awwwards that goes over everything you need to do to get this kind of effect to work.

Basically, there is no easy solution. If you want to get started with ThreeJS I suggest Threejsjourney by Bruno Simon as the best introduction.

Best of luck.

[eli-ott]

I looked at curtain.js and managed to understand how it works but now I have another problem. I don't know how to use it with Vuejs.

 

Also I'm open to three.js animation because I already used three.js in the past. 

So if you have any webgl tutorial with vuejs that'll be incredible because I don't find any. 

 

Thanks in advance! :-) 

[Cassie]

Depends what version of Vue you're using but I usually just handle any custom js in the mounted hook

 

https://vuejs.org/api/options-lifecycle.html#mounted

Also worth noting that we're more than happy to answer GSAP-specific questions here, but if you need help with vue or three.js it may be best to head over to their forums. 

 

vue - https://discord.com/invite/HBherRA

three.js - https://discourse.threejs.org

There are some great general web animation and web development communities out there too that may be more what your looking for...

• Web animation at work discord community Animation focused, friendly, we have a channel in there!
• Front end horse discord community More focused on general web development, with a creative twist.

Good luck with your project, if you have any GSAP questions make sure to pop back in.

[eli-ott]

Okay I'll check their specific forum, thank you very much for your help Cassie. 

[eli-ott]

Hello guys, I'm doing a little come back here because I'm creating a horizontal scroll with scrollTrigger, which I managed to do well but when I implement it in my project it just stops working. 

This is the working CodePen of what I want : 

See the Pen WNMaxNj by eli-ott (@eli-ott) on CodePen.

               

And this is the CodePen of the previous CodePen implemented inside my project (not working) : 

See the Pen QWQZEjM by eli-ott (@eli-ott) on CodePen.

 

I just have no clue on what's not working. I try to only have the horizontal scroll with the right style and fonts, and it works, but as soon as I have other things before or after it just stops working.

[Cassie]

Hey there!

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting for people's personal projects and logic issues. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

You say it's working by itself, that's great, I would suggest starting there and just adding bits in slowly. Just gradually layer on until it breaks and then work out why.

Setting markers to true can be helpful for debugging.

Another useful tactic is to remove the framework dependancy and just use vanilla JS until it works.

See the Pen poaxEGv by GreenSock (@GreenSock) on CodePen.

 

[eli-ott]

I have another issue that just doesn't make sense. I set the markers to true and everything was working, but as soon as I set the markers to false is stops working, that's nonsense. 

 

Here the markers are set to true, and it works (partially though because it doesn't go to the end of every paragraph), but if you try to change this it breaks: 

See the Pen QWQZEjM by eli-ott (@eli-ott) on CodePen.

 

And also sorry for my bad previous questions, I hope this one is better

[Cassie]

Heya!

 

Usually if it's working with markers it's because you don't actually have that page height without them. Markers are additional DOM elements. If you add one 3000px down the page then page will become that long. If you remove it, then the page will be shorter again - the fix is to use CSS to set up your page correctly.

It also looks like you're setting a bunch of transforms in your CSS, that's usually a bad plan as it can conflict with GSAP.

I'm struggling a bit to help with this demo though because there's a lot going on and it's all vue. We ask for minimal demos with coloured boxes because it keeps things focused on the core issues with GSAP code.