Jump to content
Search Community

Loop Text Animation Like Plascticbcn website

sharik test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Dear Team,

 

I am quite new to gsap exploring things. Can someone help me out on how to create a Text Animation that replaces some part of the words from a sentence and change text also within some seconds.

 

There is a example of https://plasticbcn.com/ website first section in which text are getting animated. Help will be appreciated.

 

Our staging URL http://fcadev.surge.sh/

Link to comment
Share on other sites

Hello sharik and welcome to the forums,

 

There are a few different ways to do this. I would recommend looking at GSAP's SplitText and our timeline. 

 

The core of it is: have an array of words that you want to change out. Make sure the there are <span>s or something surrounding all words that you want to replace (and replace with). After a certain amount of time, fade out the old word, place the new one in the DOM (without being visible), get the width of the new word and adjust accordingly, then fade in and slide down the new word. Then repeat that process as needed. 

 

Does that makes sense? Let us know if you run into any issues and we can help with those.

 

Here's some more information about SplitText and TimelineMax.

 

 

P.S. Are you sure you want to make a direct copy of that group's website? It does not make your company stand out if you are just copying another company completely. I suggest that you change things up a bit more. Maybe include things from other site's designs so that the mix the sites becomes your own.

  • Like 3
Link to comment
Share on other sites

Hi Zach,

 

I have created a codepen for this can you please check and and help me to create a animation of text like https://plasticbcn.com first section it would be very helpful.

 

Codepen here -  

See the Pen oNvYOrG by sharik (@sharik) on CodePen

 

As I am new to gsap and its little urgent from client side. I have also asked the client to purchase the GSAP memebrship so that we can use additional plugins.

 

And one additional query .. sorry I am asking so much questions as I need to share the client timeline. Can you just let me know what will be a tentative timeline for a project like plasticbcn website . I mean like a newbie like me how much time it can take to develop such website.

 

I am making the website with React on frontend and GSAP for animation . We are facing problems with animation and then rendering it on react component as its a different thing to apply animation directly and use it with react website .

Link to comment
Share on other sites

Hey Sharik,

 

Unfortunately I don't have the time to build it out for you but if you follow the steps I listed above I think you should be able to create the effect that you're looking for. I recommend creating it fully outside of React and then porting it into React since it seems that you're not very comfortable with React. We have a basic guide for how to use GSAP with React which you can read about here: 

 

4 hours ago, sharik said:

Can you just let me know what will be a tentative timeline for a project like plasticbcn website . I mean like a newbie like me how much time it can take to develop such website.

I don't know you or your abilities so it is really impossible for me to make the timeline for you. I can tell you this: keep in mind Hofstadter's Law ;) 

  • Like 4
Link to comment
Share on other sites

3 hours ago, ZachSaucier said:

I recommend creating it fully outside of React and then porting it into React since it seems that you're not very comfortable with React.

 

Best framework advice ever!!! Start simple, then scale up.

 

3 hours ago, ZachSaucier said:

I don't know you or your abilities so it is really impossible for me to make the timeline for you. I can tell you this: keep in mind Hofstadter's Law

 

I haven't heard of that law before, but I love it! +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.
×
×
  • Create New...