Can this mouse distortion effect be created with GSAP?

[Vipul.K 0 Likes (Newbie)]

Hey Guys, I'm new to GSAP and reading through docs to find out if a particular effect can be created with GSAP. The link below shows the animation in motion and I've created most of it except the distortion that occurs when the mouse moves from one section to another. Can this be done with GSAP, if yes, how?

 

https://www.pinterest.co.uk/pin/466755948875173685/?lp=true

 

Thanks.

[Carl 11,164 Likes (Superhero)]

Hi and welcome to the GreenSock forums. 
Do you have a direct link to the site you are referencing?

 

The link you supplied goes to pinterest and every time I click somewhere I get overlays and prompts to log in.

 

 

[Vipul.K 0 Likes (Newbie)]

Hi Carl. Unfortunately I don't think the designer did it on HTML at all. I think its a design concept created with an animation software. I too tried to find the website where it was used but I couldn't. There's just this animated picture so I have to create it from scratch. I also tried finding the website with the name on the top 'arch' but it seems this is made up name and not an actual shoe business.

[Carl 11,164 Likes (Superhero)]

Sorry, I didn't see any animation on the link you provided. are you sure that is what I should be looking at?

[Victor Work 172 Likes (Specialist)]

Hello Carl, I believe he is referring to the effect of this gif:

 

https://dribbble.com/shots/4137241-E-commerce-UI-interactions

 

 

@Vipul.K take a look at this tutorial, I believe I can help you:

 

 

Result: 
http://cssing.org.ua/jela/jela.html

[Vipul.K 0 Likes (Newbie)]

Thanks Noturnoo,

 

Close. But I can't understand russian and translated captions are not making sense. Also, this uses canvas and svg. How would I do that with DOM elements like divs and images?

[Sahil 2,655 Likes (Superhero)]

No you can't do that with DOM. It uses paths to achieve that effect, which can only be used in either svg or canvas. Following is demo by waaark, it should be good starting point.

 

 

See the Pen ENRvvq by waaark (@waaark) on CodePen

 

[Vipul.K 0 Likes (Newbie)]

Thats pretty good Sahil. Thank you very much. I'm gonna see if I can make it work for my application. Thanks again. 

[OSUblake 18,492 Likes (Superhero)]

To distort an image you will probably need to use WebGL.

 

Using a mesh in PixiJS to do the BendyBox spin twist. A mesh is like a grid of points on an image, and could easily be manipulated by mouse movement.

 

See the Pen 8785174690eabaf5ba99f785b9d3b64e by osublake (@osublake) on CodePen