Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ultra Design Agency

Text Animation

Recommended Posts

Brand new to GSAP- purchased the Shockingly Green.  I am looking to do a text animation similar to this page https://www.airforce.com/ - any guidance on how this might be achieved using your text animation plugin?

 

If you scroll down to the area of the page referenced in the attached screenshot you will see the animation.

 

Thank you in advance-

Jay

 

Screen Shot 2019-09-27 at 12.42.23 PM.png

Share this post


Link to post
Share on other sites

Hello and welcome to the GreenSock forums! We really appreciate you being a GreenSock club member - we couldn't do what we do without people like you.

 

9 minutes ago, Ultra Design Agency said:

I am looking to do a text animation similar to this page https://www.airforce.com/ - any guidance on how this might be achieved using your text animation plugin?

To confirm, you're referring to the rectangle effect with the letters, right?

  • Like 1

Share this post


Link to post
Share on other sites

yes- it looks like some sort of animated computer lettering- the text says 'More than 200 career options'.

Share this post


Link to post
Share on other sites

Very interesting animation :) 

 

Inspecting the Air Force site, they seem to be toggling three different classes per letter to achieve this effect. Initially the text color of each letter is set to transparent

  • When the state-1 class is applied, a ::before element appears where the letter should be. 
  • When the state-2 class is applied, the ::before element gets a little bigger.
  • When the state-3 class is applied, the ::before element is removed and the text color is set to inherit.

You can do something like that like so:

 

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

 

I also added them to a master timeline so you can wait to play the sequence (like until that section is scrolled to) if need be.

 

I pulled the shuffle function from this similar thread:

And took the timeline inspiration from Craig's post in this thread:

Hopefully you can see how helpful these forums are! They definitely are for me as well :) 

 

Thanks for sharing that delightful site!

  • Like 2

Share this post


Link to post
Share on other sites

Wow - you did all of this for me?  I think we are going to be lifelong friends...  Thank you!

  • Like 1

Share this post


Link to post
Share on other sites
2 minutes ago, Ultra Design Agency said:

Wow - you did all of this for me?  I think we are going to be lifelong friends...  Thank you!

We're happy to help here! I can't promise we'll always create the entire demo for you, but consider this a welcome gift and a thank you for you joining the Club GreenSock family! 

 

Plus it was fun and different than most animations that I've made before.

  • Like 1

Share this post


Link to post
Share on other sites

One last question- the pen includes 13 scripts.  Which ones would I need from that list?

Screen Shot 2019-09-27 at 1.42.57 PM.png

Share this post


Link to post
Share on other sites
3 minutes ago, Ultra Design Agency said:

Which ones would I need from that list?

Sorry, I just used our default club starter pen which loads everything. I updated the demo to include only the two that you need :) 

 

Note that the demo is loading TweenMax. You could load TweenLite instead in this case since I didn't use any of the Max features.

 

Also note that you can't link directly to the club plugins like we're doing in the CodePen. You should download the club files from your account dashboard and include them in your project.

  • Like 1

Share this post


Link to post
Share on other sites

Hate to bug you again- I am really struggling with putting that simple codepen to work on my webpage.  I have called the two scripts, added the functions, and the css.  It is not animating whatsoever.  Any chance you would be able to help me troubleshoot?

 

https://ultrastarter.wpengine.com/

 

I can provide access if you need it as well.

Share this post


Link to post
Share on other sites
16 hours ago, Ultra Design Agency said:

Any chance you would be able to help me troubleshoot?

If you look at your console in your developer tools you can see the errors coming up.

 

The first is "Uncaught SyntaxError: Cannot use import statement outside a module" in your SplitText.js. This is because you're using the developer (ES5 modules) version of SplitText. You should instead use the minified (non-module) version, found in src -> minified -> utils -> SplitText.min.js of your downloaded zip file.

 

The second error about SplitText being undefined should be fixed when the first one is fixed.

 

The third error is about an invalid character / in line 256 of your index page. It looks like you accidentally added a random / and that is throwing the error.

 

I'm not sure why the fourth error is happening. See if it goes away once you get the other parts fixed. 

 

16 hours ago, Ultra Design Agency said:

I can provide access if you need it as well.

Sorry, we don't usually do that sort of thing in the forums. It's asking a lot for us to dig through a lot of a project's code to figure out what's going on if you can't reproduce the error more minimally, so we can't promise that for everyone. We do offer premium support if, for some reason, you can't show your code publicly in the forums or need help past what we're able to do here in the forums (which is rare).

Share this post


Link to post
Share on other sites

I am not sure why this is so complicated for me.  Now I get the text animation to work, however it only works when I click the 'replay' button, and not on page load.  Ultimately I need these H1 elements to load once they are in the viewport.  I am using Magic Scroll.  Any direction for a GSAP virgin?

 

http://ultrastarter.wpengine.com/

Share this post


Link to post
Share on other sites

OK  I loaded this on DOMContentLoaded and it is working. Whew!   Now, to see if I can figure out how to trigger this when in viewport with ScrollMagic.  Any help would be so loved!

Share this post


Link to post
Share on other sites
7 minutes ago, Ultra Design Agency said:

Now, to see if I can figure out how to trigger this when in viewport with ScrollMagic.  Any help would be so loved!

This is very straightforward using the Intersection Observer API. Keep in mind that you may need a polyfill if you need to support IE. 

Share this post


Link to post
Share on other sites

Very straightforward? Isn't there a simple way to say 'hey, this element is in the viewport so trigger it'?

Share this post


Link to post
Share on other sites
9 minutes ago, Ultra Design Agency said:

Very straightforward? Isn't there a simple way to say 'hey, this element is in the viewport so trigger it'?

That's what the Intersection Observer API does :) 

 

There's also a product called ScrollMagic that does similar things but I find it more confusing and more error prone.

 

The thread below is related to this subject.

 

Share this post


Link to post
Share on other sites

Can you point me to a simple example which would trigger the text animation you created for me when in viewport? I feel like this is all far more complicated than I thought it would be.

Share this post


Link to post
Share on other sites

Here's a basic usage with the demo above (make sure to scroll). Feel free to change the values.

 

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

 

If you're going to have a lot of these, you should create the timelines and attach a reference to them on the element itself. That way you can use entry.target.timeline.play(); or something like that inside of your intersection observer callback.

  • Like 2

Share this post


Link to post
Share on other sites

I dont understand this 'If you're going to have a lot of these, you should create the timelines and attach a reference to them on the element itself. That way you can use entry.timeline.play(); or something like that inside of your intersection observer callback.'

 

I promise once I get the gist I will be off and running

Share this post


Link to post
Share on other sites

I mean you would need to loop through each element that you want to apply this effect to and make sure you use SplitText on each, create a timeline for each (and attach a reference to that timeline in the element itself), and observe using the Intersection Observer.

 

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

 

It seems that you need to get a better grasp of how JavaScript and GSAP work. It would be good for you to go back and spend some time on articles like "Writing Smarter Animation Code" and other posts in our Learning section. As well as getting used to reading documentation, because that's what we have to do near daily in developer roles :) 

 

Maybe even take a crack at answering some questions in this forum to help other people in order to teach yourself more (if we don't beat you to it ;)). That's how I learned a lot when I was starting out.  Craig, another moderator on this site, expressed the same sentiment

Share this post


Link to post
Share on other sites

I really appreciate your patience. I know you have written this whole thing for me and that it is not your role.  It looks amazing, I really appreciate it.  Now I am going to see if I can tackle the 'unobserve' so it plays just once.  Wish me luck!

  • Like 1

Share this post


Link to post
Share on other sites

You don't need to unobserve, you can just change .play(0) to .play() and make sure that the timeline is paused (and prevent the intersection observer from firing on load).

 

See the Pen GRKbWEp by GreenSock (@GreenSock) on CodePen

  • Like 2

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.

×