Jump to content
Search Community

Animating multiple split text elements on scroll

JonQuayle test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hey,

 

I'm trying to animate multiple text elements on a page using ScrollTrigger and the SplitType library (https://github.com/lukePeavey/SplitType). I have got it work when animating the full text block itself (so I know the scroll trigger part is working), but I want to animate and stagger in the individual characters in a fluid motion - I have this working for the hero sections of the website on page load, but am stuck when looping through all the text elements on a page and targeting the text characters within the forEach() loop. The initial load works, but every element after that either isn't appearing at all, or is appearing but in the final animated state. I've tried assigning variables to the element.chars that is specified in the SplitType library to insert into the gsap.from tween but still not luck. I feel I am close but missing that last 10%... any ideas where I am going wrong?

 

Simple codpen here - 

 

Thanks

See the Pen abEMKXX by JonQuayle (@JonQuayle) on CodePen

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