Getting mixed results with opacity with simple text stagger animation

[amit95]

I have a simple reveal animation which reveals text. I'm using a library called Splitting.js to segment out each of the characters in the element in order to stagger them. 

 

Sometimes, my animation works as intended, and in order instances, it doesn't. But it's never consistent.

 

Here is how it animates with the library active. On refresh, you can see that the titles opacity is still visible as it animates in.

 

 

Now, I'm aware that there's limited support here for queries involving third parties. As such, I've commented out all things to do with Splitting JS and ran the test again, with just the GSAP timeline, and this is how it performs:

 

 

The codepen shows how the animation should run. Title is hidden completely on load, then each character staggers in one by one. However, as mentioned, I have the exact same JS on my build and it sometimes works when you change page, sometimes it doesn't.

 

See the Pen abGpaWy by amit_rai95 (@amit_rai95) on CodePen

[Rodrigo]

Hi,

 

Yeah, sometimes it takes some time for the JS to kick in. In those cases if setting the properties in the CSS and use a regular .to() instance, then I resort to set the opacity of a parent element to 0 on the CSS and just before running the GSAP code set it back to 1.

.title {
  opacity:0;
}

gsap.set(".title", { opacity: 1 });
gsap.from(".title .char", {
  duration: 1.5,
  delay: 1,
  opacity: 0,
  stagger: 0.02,
  y: 30,
  ease:"power1.out"
});

Since your GSAP instance is simple, the time between the set() and the from() instances should be minimal and it wouldn't flash the element.

 

As for the issues with Splitting.js, yeah we can't offer support for third party stuff, but perhaps other users could chime in in order to help, so you could describe the specific issue you're having with it just in case. Also if we have some time we can take a look at it.

 

Happy Tweening!