Jump to content
GreenSock

utopian

ScrollTrigger and SplitText together causing first character to not show when coming back to original state

Go to solution Solved by GreenSock,

Recommended Posts

Hi there!

 

I have prepared a codepen that will hopefully help find the solution to my problem. I am using both ScrollTrigger and SplitText to try to animate some text. My goal is to do the following:

 

1. Have the first h1 animate into the page when the page loads.

2. Once the user scrolls down a bit, the h1 will animate out and the h2 will then animate into the page.

 

This "works". The issue is once you scroll back up. When you scroll back up the h2 will animate out and the h1 will animate back in, however the h1's first character will not be visible.

 

I noticed that if I comment out the first part of my timeline (the from()), it then works perfectly, however I can't seem to get it to work if I animate the h1 when the page loads.

 

Here's another codepen showing what I just mentioned above (commenting from()): 

See the Pen MWEVvQE by julienkos (@julienkos) on CodePen

.

 

Please let me know if you can help! I appreciate it.

See the Pen PoJRKmo by julienkos (@julienkos) on CodePen

Link to comment
Share on other sites

  • Solution

First of all, thanks for being a Club GreenSock member @utopian!

 

I noticed several problems:

  1. You were making one of the most common ScrollTrigger mistakes - you had multiple nested ScrollTriggers inside a single Timeline. That's logically impossible to accommodate because you can't have the parent timeline controlling the playhead AND the scrollbar position also controlling the playhead simultaneously. It's one or the other. 
  2. You're using invalid start/end values on your ScrollTriggers, like start: "20%", end: "20%". Those are supposed to have TWO values - the first correlates to the trigger's position and the second correlates to the scroller's position, like start: "top 20%" would mean "when the top of the trigger hits 20% down from the top of the scroller". Please read the ScrollTrigger docs
  3. You were using a "scrub" and super tiny duration window (because you set your start and end triggers to be directly on top of each other which is quite odd), so you were forcing the entire animation duration to be whatever the scrub value was - is that what you intended? I noticed you had stagger set to 0.01 and a duration of 0.75 which for your <h2> stuff would end up making a much longer animation (which you then squeezed into 1 second due to the scrub). Again, maybe that was intentional but I have a feeling it was inadvertent :)
  4. The way you set it up would make it always play the same animation backwards/forwards, but you could use a regular ScrollTrigger with an onEnter and onLeaveBack to animate things slightly differently based on which direction the user is scrolling, like this: 

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

 

I hope that clears things up. 

 

Happy tweening!

  • Thanks 1
Link to comment
Share on other sites

Thank you for the excellent support! I see the mistake. I did not realize that with the timeline, I could have the effects happen back to back and have one ScrollTrigger to control them both (because the animations are back to back). I've figured it out and it looks great. Thanks again!

  • 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.
×