Jump to content
GreenSock

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

Animated showing of data from an array

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

Hello dear community.

I have big interesting issue.

 

I need to animate string.

This string will be animated divided on chars.

I know how i'll animate it.

 

But, i cannot understand how i need to show this string.

 

This method doesn't work.

$.each(charsArr, function(i) {
            tl.to($(this).find("#section-1"), 2.5, {
            autoalpha: 1,
            fontSize: "2vw",
            color: "#eeeeee",
            opacity: 100,

Share this post


Link to post
Share on other sites

How I mostly do it is as follows:

 

Split the text using SplitText utility

 

Stagger the character elements

 

Just a quick demo

 

See the Pen jOONQrQ by kishin-karra (@kishin-karra) on CodePen

 

  • Like 3

Share this post


Link to post
Share on other sites
8 minutes ago, Kishin Karra said:

How I mostly do it is as follows:

 

Split the text using SplitText utility

 

Stagger the character elements

 

Just a quick demo

 

 

 

 

 

There is you are showing that your chars have parent's id.

I know and understand this solution.

But, if these chars are in the array (not in DOM), how will it be shown?

 

 

Share this post


Link to post
Share on other sites

Hey @Cere6ellum,

 

You can use the textPlugin if I understand your intention correctly.

 

See the Pen rNNBoOW by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 1

Share this post


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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×