Jump to content
GreenSock

cotton

Animating SplitText elements on load then applying ScrollTrigger

Recommended Posts

Hello all

 

I've got a bit of an issue that I can't get my head around.

 

I have some text that, on page load I have animated in (y & autoAlpha). Once completed and the user scrolls I would then like this same text to animate y & autoAlpha of the screen when reaching a certain point.

 

Currently the intro works fine but then as you scroll off the elements just seem to disappear and don't reappear when you scroll back. Looking at the inspect it would seem the lines are given the initial y:300 transform. It feels like the two gsap animations are competing with each other.

 

Any ideas?

James

 

note: Try the pen on CodePen rather than the embed to see it affecting more than just the top line

 

 

See the Pen GRWZBJO by Cottonltd (@Cottonltd) on CodePen

Link to comment
Share on other sites

Hi @cottoncreative,

 

As I don't see anything related to a progress bar in your markup, I'm going to ignore that for now (I can help with that if it is an issue). Also, I'm going to show you how to hook up scrollTrigger to a timeline and how you can make use of "pin" to pull off what I think you're looking for.

 

(as you stated, reviewing in a larger CodePen window is ideal)

 

See the Pen GRWZXRP by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

 

Shaun

  • Like 1
Link to comment
Share on other sites

Hi Shaun

 

Apologies, the progress bar is probably more key than I had anticipated.

I've added it's styling etc into the original pen.

 

Essentially, the text wipes in after the progress bar has completed (on page load) so that is all part of the non-scrollTrigger part. It's only once that TL has played that the copy needs to be controlled by scrollTrigger.

 

I tried adding the scrollTrigger into the progress_tl but it didn't work.

 

Thanks

James

 

note: I've also changed the y:300 to y:100 to aid the pen being viewed directly in the embed.

Edited by cottoncreative
Added a note
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.
×