Jump to content
Search Community

OnClick effect

radutrs test
Moderator Tag

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



first of all i have to say that im new to this community and i really enjoy the fact that i've found this platform. I want to create an effect similar to this website https://en.leviev-group.com/ - the transition between the sketch and the image on click, whit that on hold effect. Can you give me a hint, how should i start in order to create something similar? Thanks

Link to comment
Share on other sites

Hi @radutrs :)


Welcome to the forum.


That's a pretty neat website. They have quite a bit going on there and most of it is happening on canvas. From what I can tell, they are are using GSAP and three.js for most of the heavy lifting. three.js is what creates the displacement on the pictures. They've also got some Vray reflection maps in there to really make it shine. 


The effect that you asked about isn't too difficult. You could make it work with canvas or SVG. You might be able to do it with regular DOM elements too. I made a little demo to show one way you could do it. I've used a SVG. 


See the Pen RyKaBb by PointC (@PointC) on CodePen


However you design it, the basic mechanics will be the same. You'll probably have two images and a mask. The full color image will be hidden until the end. A mask will reveal the line art version of the picture and its size can be increased by holding down the mouse button. I just made a timeline for the mask expansion animation and play/reverse it on mousedown/mouseup. Once that timeline hits 100%, the onComplete fires which fades in the full color version of the image.


Here's some more info about three.js.



You can also take a look at Pixi for a canvas option. 



Pixi has an impressive variety of filters that can create some neat effects



Hopefully that gets you started. Happy tweening and welcome aboard.



  • Like 5
Link to comment
Share on other sites

pointc, super nice concept.


Do you have any idea how can i put another simple transition after the hold effect. If you look at the example provided https://en.leviev-group.com/ after the effect explained above there is a smooth fade to the black slider with the statue.


Also what do you recommend for the text and logo movement? Thanks a lot!

Link to comment
Share on other sites

You could do a variety of transitions, but canvas is probably the best option for displacement. SVG would probably struggle with that. I'd say just start doing some experiments to find something you like and be sure to check out the Pixi website I listed above. As you make progress and have GSAP related questions, we'd be happy to help.


As far as the text and logo movements go, you can do those with simple position and scale animations using GSAP.


Good luck with your project and happy tweening.



  • Like 1
Link to comment
Share on other sites

  • 5 years later...

Hello Community I have used the same code in my webflow site but i have added zoom in and zoom out functionality to the image on the input type=range drag.

When the whole image gets zoomed-in the cursor also gets bigger and I'm not able to keep the size of the cursor same as it was without zoom in

below i'm sharing you the previewlink of my project


Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 


Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.


Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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


If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.


Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

@GSAP Helper 


Thankyou! for the response and guidance i have follwed your instructions and forked my code into the aboce started codepen block please look and provide appropriate help

See the Pen PoxoNBN by hitendra1396 (@hitendra1396) on CodePen


I have added the input range on the top-left cormner of the demo 

when you will drag the button the image will zoom-in alongwith the image the cursor will also get scaled which i don't want


I just want to make the image scaled buigger and want the cursor to remain with the same size


Link to comment
Share on other sites



You can do this in order to keep the scale according to the value, but that creates a new issue as well:

$('#zoomSlider').on("input", function(e) {
  value = e.target.value;
  console.log("scale update", value);
  $('#demo').css('transform-origin', '0px 0px');
  $('#demo').css('transform', 'scale('+value+')');
  gsap.set(["#ring", "#dot"], {
    scale: 1 / value,
    transformOrigin: "0px 0px",

I think it's far better idea to play with the viewbox values of the SVG instead of scaling the whole DOM node. You can follow the first two examples @PointC shows in this post and the tutorial he made (link there as well):


Hopefully this helps.

Happy Tweening!


  • Like 1
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.
  • Create New...