Jump to content


How to efficiently use the same transition on all pages images and headings

Moderator Tag
Go to solution Solved by Rodrigo,

Recommended Posts

Hello, I'm trying to set up a website like this:

- A scale back transition is applied to all images in the page (basically it scales back when it reaches the user view)

- A text reveal effect to all headings (could be h1, h2, basically I'd like to trigger this animation by using a class and I'd like it to work regardless on text dimensions etc.). To achieve that I'm using the split type js plugin to split the selected headings in the page into multiple chars and applying the effect by staggering each chars with gsap.

- With scrolltrigger I activate the two transitions when it reaches the user's view.

As you can see in my pen example, it's not working that great. Basically I don't understand why the two interactions start with so much delay and are not behaving properly.

Hope I explained it all clearly to you.

Thanks in advance for your help.


See the Pen KKGdbvN by luigi-basile (@luigi-basile) on CodePen

Link to comment
Share on other sites

Not going to be specific because my coding skills leave a lot to be desired by you only need to define the animation once. This may server as a good starting point.. and part of an excellent course I would thoroughly recommend BTW.


See the Pen ZEWzNxr by snorkltv (@snorkltv) on CodePen

Link to comment
Share on other sites

  • Solution



The issue is basically here:

const splittedTextChar = $(this).find(".char");

Inside the loop you're running to create the letters animation you're selecting all the elements with a class .char in the entire document, so each animation is animating all the letters generated by SplitType.


If you change it to this it seems to work the way you expect:

const splittedTextChar = $(text).find(".char");


Although is worth mentioning that this has a chars array that you can use as well:

const splittedText = new SplitType(text);

So you can do this as well:

headingText.forEach((text) => {
  const splittedText = new SplitType(text);

  let textTl = gsap.timeline({
    scrollTrigger: {
      trigger: text,
      toggleActions: "restart none none reset",
      markers: true

  textTl.to(splittedText.chars, {
    y: 0,
    stagger: 0.05,
    //delay: 0.2,
    duration: 0.1


Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Rodrigo, great work as usual. Your solution works great,  I didn't think that the issue could be the chars target.

Thanks again!


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.