Jump to content
Search Community

Text Animation

Ultra Design Agency 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

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

Link to comment
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
Link to comment
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 3
Link to comment
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 2
Link to comment
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
Link to comment
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.

Link to comment
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).

Link to comment
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/

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

 

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

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

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...