Olav Posted November 10, 2022 Share Posted November 10, 2022 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 More sharing options...
Rodrigo Posted November 10, 2022 Share Posted November 10, 2022 Hi, That's a nice effect indeed! If you peek behind the curtains you can see how is done: 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! 1 Link to comment Share on other sites More sharing options...
PointC Posted November 10, 2022 Share Posted November 10, 2022 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. 2 Link to comment Share on other sites More sharing options...
Olav Posted November 11, 2022 Author Share Posted November 11, 2022 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 More sharing options...
Rodrigo Posted November 11, 2022 Share Posted November 11, 2022 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 More sharing options...
Olav Posted November 12, 2022 Author Share Posted November 12, 2022 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 More sharing options...
mvaneijgen Posted November 12, 2022 Share Posted November 12, 2022 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. 1 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