Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
andsavu

Text underline & page transitions that are super smooth?

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

Share this post


Link to post
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

Share this post


Link to post
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 4

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×