Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
RobbieC

ScrollTrigger + SplitText w/toggle

Recommended Posts

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

Link to comment
Share on other sites

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"?

Link to comment
Share on other sites

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? 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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). 

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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"});
});

 

  • Like 3
  • Thanks 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.
×