Jump to content
GreenSock

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

Loop Text Animation Like Plascticbcn website

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/

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hi Thanks for so prompt reply sir. Will check it and get back to you if I face any problems. No I am not copying there website just taking there reference will tweak my animations once I am used to this.

Share this post


Link to post
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 .

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×