ScrollTrigger + SplitText w/toggle

[RobbieC 55 Likes (Contributor)]

If I use "toggleActions" is there a way to set a duration for "reset"?  I tried adding a default duration to the timeline and that didn't work.

 

I have also tried just using "onLeave, onEnterBack and onLeaveBack" like this:

onEnter: splitText,
onLeave: function() {
  gsap.fromTo(".split-text", {autoAlpha: 1}, {duration: 0.5, autoAlpha: 0});
},
onEnterBack: splitText,
onLeaveBack: function() {
  gsap.fromTo(".split-text", {autoAlpha: 1}, {duration: 0.5, autoAlpha: 0});
}

But that didn't work and I have a feelings its because i'm building the splittext outside the timeline. Not sure what the best solution is. My end goal is to play the animation on "onEnter and onEnterBack" and do fade out for "onLeave and onLeaveBack".

See the Pen JjYwVGm by robbiecren07 (@robbiecren07) on CodePen

[GreenSock 18,876 Likes (Superhero)]

You mean something like this?: 

See the Pen 298d63c0a3d5e36222cc282b69e225b4?editors=0010 by GreenSock (@GreenSock) on CodePen

 

The key was: 

onToggle: self => gsap.to(".split-text", {opacity: self.isActive ? 1 : 0})

 

[RobbieC 55 Likes (Contributor)]

Yes! That makes sense and it actually looks better using the pause/resume instead of playing the animation again on "scroller-end & trigger end" when scroll back up I think that's the "onEnterBack" property right?.

 

But what if I wanted it to play the animation again on "onEnterBack"?

[GreenSock 18,876 Likes (Superhero)]

25 minutes ago, RobbieC said:

But what if I wanted it to play the animation again on "onEnterBack"?

You want the animation to restart when it enters in the backwards direction? Just use the toggleActions:

// order:      onEnter onLeave onEnterBack onLeaveBack
toggleActions: "restart pause restart none",

Is that what you're looking for? 

[RobbieC 55 Likes (Contributor)]

YES! I figured that was the order of the toggleActions after I sent my last reply but I couldn't find anything under the scrollTrigger Docs that actually says thats what the order is.

[mikel 4,782 Likes (Superhero)]

Hey RobbieC,

 

It is in the running text of START toggleActions.
It would be helpful if it was listed again in the DOCs as Jack shows it here: quick, direct overview.

 

happy tweening ...

Mikel

[RobbieC 55 Likes (Contributor)]

I agree @mikel

 

Also should splittext be able to function correctly if used inside a span tag? I edited my above codepen and placed it inside a span and if you notice the toggleActions do not work correctly. I only added the span because that is how I actually had it on my localhost before I made the original codepen for this post.

 

See the Pen JjYwVGm by robbiecren07 (@robbiecren07) on CodePen

[GreenSock 18,876 Likes (Superhero)]

I just added some clarification in the toggleActions section of the docs. Let me know if you don't think it's clear enough there. 

 

16 minutes ago, mikel said:

It is in the running text of START.
It would be helpful if it was listed again in the DOCs as Jack shows it here: quick, direct overview.

 

I didn't quite understand your comment, @mikel. Are you saying it's in the "start" property in the docs or something? 

 

3 minutes ago, RobbieC said:

Also should splittext be able to function correctly if used inside a span tag? I edited my above codepen and placed it inside a span and if you notice the toggleActions do not work correctly. I only added the span because that is how I actually had it on my localhost before I made the original codepen for this post.

 

I don't think browsers allow the sub-elements in a <span> tag to be affected by its opacity. Feel free to take SplitText out of the equation and I think you'll see the same behavior (it's unrelated to SplitText). I know some browsers don't render transforms on <span> elements too (at least if they're display: inline). 

[mikel 4,782 Likes (Superhero)]

Hey Jack,

 

Sorry,  I mean this version as clear, additional help (what is what) in the toggleActions part

 

1 hour ago, GreenSock said:

 

// order:      onEnter onLeave onEnterBack onLeaveBack
toggleActions: "restart pause restart none",

 

 

Kind regards

Mikel

[GreenSock 18,876 Likes (Superhero)]

5 minutes ago, mikel said:

Sorry,  I mean this version as clear, additional help (what is what) in the toggleActions part

 

Ah! Makes sense. Thanks for clarifying. 

[RobbieC 55 Likes (Contributor)]

1 hour ago, GreenSock said:

I just added some clarification in the toggleActions section of the docs.

That looks prefect, thanks!

 

1 hour ago, GreenSock said:

I don't think browsers allow the sub-elements in a <span> tag to be affected by its opacity

I think your right, I thought there was a reason why I didn't use spans in the past.

My memory has gone down hill over the past year, I have had to relearn some pretty basic things - kind of frustrating.

[RobbieC 55 Likes (Contributor)]

So I kept tweaking the code a little bit on my original codepen and I decided to wrap it in a "gsap.utils.toArray" so that I can use it in multiple places. I want to post it here in cause anyone else needs it. Here is what I came up with.

gsap.utils.toArray(".split").forEach(function(elem) {
  const splitTimeline = gsap.timeline({scrollTrigger: {
    trigger: elem,
    start: "top 80%",
    end: "bottom 10%",
    onToggle: self => gsap.to(elem, {opacity: self.isActive ? 1 : 0}),
    toggleActions: "restart pause restart none",
    markers: true
    }
  });

  const splitTitle = new SplitText(elem);
    splitTimeline.from(splitTitle.chars, {duration: 1.5, opacity: 0, y: 100, stagger: {amount: 1}, ease: "back.out(1)", overwrite: "auto"});
});