Jump to content
Search Community

Text underline & page transitions that are super smooth?

andsavu test
Moderator Tag

Recommended Posts

So I'm trying to recreate 2 effects that I saw on this awesome website:

https://jesperlandberg.dev/

https://jesperlandberg.dev/aboutjesper1.thumb.jpg.6ac617461f7a6baade5e199884a729f4.jpgjesper2.jpg.2a9043623b5c9de145b91ca83311b560.jpg

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

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. 

  • Like 1
Link to comment
Share on other sites

@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:)

 

  • Like 5
Link to comment
Share on other sites

  • 4 months later...
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

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

  • Like 3
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...