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

[Gigi1303 4 Likes (Newbie)]

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

[The Old Designer 31 Likes (Newbie)]

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

[Rodrigo 5,909 Likes (Superhero)]

Hi,

 

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!

[Gigi1303 4 Likes (Newbie)]

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

Thanks again!