Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vipul.K

Can this mouse distortion effect be created with GSAP?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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.

 

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

 

  • Like 5
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×