andsavu Posted February 6, 2020 Share Posted February 6, 2020 So I'm trying to recreate 2 effects that I saw on this awesome website: https://jesperlandberg.dev/ https://jesperlandberg.dev/about 1. is the 'page transition' effect when you press on profile, theres that white overlay that slides top with a warp/distortion 2. while on Profile, when you hover on a link you get that 3d text underline effect. How are these made and how are these so smooth? Anyone can offer some guidance, examples with similar effects? Thanks in advance! Really appreciate it! p.s.: I made this codepen with some basic css, its obviously not that smooth/jiggly but yeah.. See the Pen XWbWZpR by andreitmm (@andreitmm) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 6, 2020 Share Posted February 6, 2020 Hey andsavu and welcome to the GreenSock forums! This effect cannot be created in just HTML + CSS. If you hover a link and move it around you can see that the line is reactive to the mouse position. Not doable (within reason) with CSS. You should look into an SVG, Canvas, or WebGL approach. Here's a thread that's very related to your request that can help get you started: It looks like he used Canvas, presumably with WebGL. Maybe @jesper.landberg can even provide some insight himself Note to Jesper: the lines seem to get a bit off when the browser is resized. 1 Link to comment Share on other sites More sharing options...
jesper.landberg Posted February 7, 2020 Share Posted February 7, 2020 @andsavu @ZachSaucier It's indeed made with WebGL, with most of the magic happening in custom shaders. It's really a bit to much to get into without writing an article about it, but if you @andsavu want to learn creating these kind of things i'd recommend some of the following resources:https://webglfundamentals.org/ https://thebookofshaders.com/ https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html Also https://tympanus.net/codrops/ have some great tutorials on the topic. Oh and @ZachSaucier thx for the resize heads-up, will fix it:) 5 Link to comment Share on other sites More sharing options...
GeorgeErshov Posted June 28, 2020 Share Posted June 28, 2020 On 2/7/2020 at 2:51 AM, jesper.landberg said: @andsavu @ZachSaucier It's indeed made with WebGL, with most of the magic happening in custom shaders. It's really a bit to much to get into without writing an article about it, but if you @andsavu want to learn creating these kind of things i'd recommend some of the following resources:https://webglfundamentals.org/ https://thebookofshaders.com/ https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html Also https://tympanus.net/codrops/ have some great tutorials on the topic. Oh and @ZachSaucier thx for the resize heads-up, will fix it:) Dear Jesper, please tell me what you used to create the transition effect. I’ve been trying to recreate the distortion of the divble block for a long time so that it is rounded on the sides using CSS, but I still can’t make it as smooth as on your site. Recently, I have constantly come across sites where they easily use a similar script. How will I be able to change the standard divblock when I go to the page? here is another great example where this move is used when we point to projects and go through the pages https://www.martinehrlich.com/ I will be incredibly happy if you tell me how you made such a transition? Link to comment Share on other sites More sharing options...
jesper.landberg Posted July 2, 2020 Share Posted July 2, 2020 On 6/28/2020 at 9:14 AM, GeS said: Dear Jesper, please tell me what you used to create the transition effect. I’ve been trying to recreate the distortion of the divble block for a long time so that it is rounded on the sides using CSS, but I still can’t make it as smooth as on your site. Recently, I have constantly come across sites where they easily use a similar script. How will I be able to change the standard divblock when I go to the page? here is another great example where this move is used when we point to projects and go through the pages https://www.martinehrlich.com/ I will be incredibly happy if you tell me how you made such a transition? Hey, i put together a quick codepen demonstrating how to do it with WebGL. See the Pen rNxpVEd?editors=0010 by ReGGae (@ReGGae) on CodePen 3 Link to comment Share on other sites More sharing options...
GeorgeErshov Posted July 2, 2020 Share Posted July 2, 2020 Thank you very much, dear Jesper!! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now