OnClick effect

[radutrs]

Hi,

 

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

[PointC]

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.

https://threejs.org/

 

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

http://www.pixijs.com/

 

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

http://pixijs.io/pixi-filters/tools/demo/  

 

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

 

[radutrs]

Thanks you a lot for the amazing support!

[Carl]

super fantastic demo, Craig.

[PointC]

Thanks @Carl. I thought that was a neat effect and I was having some fun with it so I made another version too.

 

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

 

[radutrs]

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!

[PointC]

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.

 

[Hitendra]

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

[Hitendra]

@CommunityPL any help will be highly appreciated

 

[GSAP Helper]

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. 

[Hitendra]

@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

 

[Rodrigo]

Hi,

 

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!

 

[Hitendra]

Thanks a lot @Rodrigo the reason i'm not playing with the viewbox of the svg is that i also have hotspot dots for showing info about the particular point. but i have figured out a way thankyou!!