Jump to content
GreenSock

Olav

Hover animation

Recommended Posts

Hello everyone,

 

I don't know if this is the right place for this question, but I've had really amazing help from this forum on this forum, and thought I'd shoot my shot.

I stumbled on the following 'distorted' animations on the ThinkingBox website which I'd like to recreate;

https://imgur.com/a/dknA80r

 

Is this possible using GSAP, or does anyone know how to achieve this/something similar?

Even a relevant google search term would help, I just can't seem to find something remotely correct.

The closest I've gotten is the Blotter.js library, but I think this is not what I'm looking for.

Anything helps!

 

 

I appreciate your reading, hope you can help me out with an answer.

Link to comment
Share on other sites

Hi,

 

That's a nice effect indeed!

 

If you peek behind the curtains you can see how is done:

GjM12Zr.png

 

cB2AW1h.png

 

For the inline styles being applied to the animated elements, I'm quite confident that this was made with GSAP. I can't think or remember a thread here in the forums about something like this, but I could be wrong or my memory might not be serving me well ;).

 

What you can and should check is that particular example and check the dev tools to see how every element is set up in order to create the solid text, that should be the hard part. After that is all about using a GSAP instance or timeline with the proper stagger in order to create the separation.

 

https://greensock.com/docs/v3/GSAP/Timeline

https://greensock.com/docs/v3/Staggers

 

Hopefully this is enough to get you started. If you have a GSAP related question during the process, be sure to come by and ask in this thread or start another one and remember to include a minimal demo.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

I'd drop the text into a span, make a couple clones with clip-paths and stagger the clones while the original (non-clipped) moves out of view. Maybe something like this.

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

 

Happy tweening.

  • Like 2
Link to comment
Share on other sites

Thanks for both of your suggestions! I can't really seem to figure out how to get this perfect.

https://imgur.com/a/WcRoxGm

I've slowed the gif down a bit and see that it's only using 2 clip's/layers just like Craig's example.

 

Could I maybe move this thread to the hiring section to find someone who can realise this for me?

Link to comment
Share on other sites

Hi,

 

Yeah, we don't have the time resources to create custom made solutions for our users. I believe that between my findings and @PointC's codepen should be enough to get you started. Also keep in mind that Craig's approach is different than the approach used by the site you provided. What you could try is using different elements with partial heights in order to create the effect.

 

I think Craig's solution is spot on and the browser support is good enough to be implemented:

https://caniuse.com/?search=clip-path

 

Finally if you want to create a thread in the Jobs and Freelance section go ahead.

 

Good luck with your project!

 

Happy Tweening!

Link to comment
Share on other sites

Thanks again for your reply @Rodrigo. I'm trying to solve it on my own, you talk about elements with partial heights, which is what the effect uses.

See the Pen eYKWebd by olavgit (@olavgit) on CodePen

I've edited the pen a small bit, using just 2 instances, one leaving and one entering.

Thanks again @PointC for the great example. Are there any other possibilities than using a clip path to make the span a different height? Setting the height to 50% of the span class is just making it bigger. I really appreciate the support!

Link to comment
Share on other sites

55 minutes ago, Olav said:

Are there any other possibilities than using a clip path

Maybe there is, but why would you search for some other (probably more complicated) solution instead of using the feature that is the perfect fit for it?

 

I've been using the following tool https://bennettfeely.com/clippy/ for years to visualize (create) my clipPaths and I've never come across an issue that the polygon() syntax was not supported. And even if some obscure browser doesn't support it, the site isn't broken (pun not intended), its just visually enhanced for people who do have a browser that does support it. 

  • Like 1
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.
×