Jump to content
Search Community

Split text menu animation in different directions

Charlyta test
Moderator Tag

Recommended Posts

Hello! It´s the first time I use Gsap, so I´m sorry if the question it´s very basic. I have seen this example in tympanus but I don´t understand how moves the text elements in differents directions. I have tried in css and jquery without result: https://tympanus.net/codrops/2021/06/23/inline-to-menu-link-animation/ Any aproach would be really apreciate.

The question, if you don ´t want to see the link, is how to move the words of a text in differents directions. Thanks for your help! 

 

 

Link to comment
Share on other sites

Welcome to the forums, @Charlyta

 

I'm a bit confused - doesn't that link you provided include all the source code so that you can see exactly how they did it? There's a big "download source" button. 

 

You can use SplitText to bust the text apart into characters/lines/words and then do whatever animation you want to it. Maybe you could take a shot at creating the effect in a CodePen and if you get stuck, post back here with a minimal demo and we'd be happy to take a peek. Here's a starter pen that loads ALL of the bonus plugins and the core so you can just click "fork" (bottom right) and start coding: 

See the Pen aYYOdN?editors=0010 by GreenSock (@GreenSock) on CodePen

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