Jump to content
GreenSock

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

Reveal overflow content on mousemove: parent container width update

Recommended Posts

Brand new to gsap, bear with me please.

 

I'm looking to update the green container width to 100% the further in on mouse move a user gets.

Instead of every child scaling and warping I'd like it to "reveal" on mouse move and reset as it is. Hope this makes sense.

 

Inspiration: https://theendless.co

See the Pen yLbPKjg by gweatherson (@gweatherson) on CodePen

Link to comment
Share on other sites

 

Hey there gweatherson!

 

Welcome to the forums. 🥳


You'll be needing to look into masking in order to achieve this effect.

Here's a good thread to get you started
 

 

  • Like 2
Link to comment
Share on other sites

 

Hey there!

 

I was interested myself and as it is the case just so often, this is a perfect example for why GSAP's utils are so useful - they make something like this a real breeze.

 

I'm making use of a clip-path here in combination with mapRange() to get the correct percentage-value for where to set the points of the clipPath that need to be moved on mousemove.

 

Clippy is a really useful tool for visualizing clip-paths and understanding how they work.

 

I guess this can be optimized even further by making use of quickSetter() but I'm happy with it for now - and for now it should be enough to serve as a starting point to get a grasp of a possible concept for something like that. Hope that comes in helpful :) 

 

See the Pen 214c5b72c9db18cfb76893b543dd3c07 by akapowl (@akapowl) on CodePen

 

  • Like 4
Link to comment
Share on other sites

Nicely done @akapowl 🥳

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Wow @akapowl, thank you! This is massively helpful.

 

I'll dig more into quickSetter and some easing capabilities, but this is a wonderful foundation. Appreciate it!

  • Like 1
Link to comment
Share on other sites

My pleasure :) 

 

Well, I also just took a closer look at the website you linked to, and noticed that they don't even make use of clip-path.

 

On there, it actually is a slightly different markup with regard to usage of elements from the one in my demo alongside changing the 'right' property of the projects section on mousemove, with some clever CSS positioning (a fair bit different from my demo, with overflow: hidden on the different sections as a key element) to make it work properly in the first place, when changing the projects section's 'right' value. So as in most cases, there are several different ways to get things running.

 

 

 

1 hour ago, gweatherson said:

I'll dig more into quickSetter and some easing capabilities

 

If I understand correctly, what it is you mean by easing, you should be able to just change the gsap.set to a gsap.to tween and specify a duration to what feels good for you. I'm not exactly sure about performance with that, since it worked fine for me and I did not test on any other devices, but I'm sure if that is a horrible idea per se, someone will jump in.

 

Happy exploring and happy tweening.

 

  • Like 3
Link to comment
Share on other sites

Hey,

 

An attempt to achieve a dynamic per ease: "slow (0.2, 0.6)".

 

See the Pen qBmpbPw by mikeK (@mikeK) on CodePen

 

Happy easing ...

Mikel

 

  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

Figured out the easing by editing the .to properties, now I'm trying to wrap my head around converting the clip path update to use quickSetter. Any suggestions? Still very new to gsap land.
 

See the Pen zYweRGy by gweatherson (@gweatherson) on CodePen

Link to comment
Share on other sites

18 minutes ago, gweatherson said:

Figured out the easing by editing the .to properties, now I'm trying to wrap my head around converting the clip path update to use quickSetter.

 

How are you trying to use it? So it matches cursor's animation, but inversed?

Link to comment
Share on other sites

Trying to use it to better performance as it suggests, nothing is trying to change style-wise.

Link to comment
Share on other sites

quicksetter is for when you're manually updating a property, like in the cursor animation code. It's faster than using .set() if you have to keep updating the same property. Since you're doing an animation for the clipPath, you don't need to worry about that.

 

If want to optimize stuff, you should only check for innerWidth on resize, and use the function that is returned by mapRange. Parsing complex eases, like slow ease, would also help. 

 

But those are micro-optimizations. You're probably not going to notice a difference.

 

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

 

 

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

×