Jump to content
Search Community

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

Gigi1303 test
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

  • Solution

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!

  • Like 1
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...