Jump to content
Search Community

Multiple Sections with SplitText not working

MarcFN test
Moderator Tag

Recommended Posts

Hello Greensocks team,

 

I am just trying to get into the animations of GSAP.

 

I'm a member of creativecodingclub and have already looked at a few things there.

 

I would like to use the SplitText plugin in several sections, but it doesn't work.

 

When the animation runs in the first section, it runs in the second section at the same time.

 

Would be great if you could help me further.

 

Greetings from Lake Constance,

 

Marc

See the Pen f55b7d02d604c63be6f7dfcbe88e6b3f??editors=1111 by MarcFN (@MarcFN) on CodePen

Link to comment
Share on other sites

Great to have you as a student in Creative Coding Club!

 

Definitely check out the lesson ScrollTriggers for Multiple Sections in ScrollTrigger Express.

The video goes into great detail on how to loop through multiple elements, find child elements to animate, and control each section's animation with ScrollTrigger.

 

I modified that lesson's demo to include a basic SplitText animation on the <h1> in each section

 

See the Pen gOjZPEY?editors=1010 by snorkltv (@snorkltv) on CodePen

 

Side Note: if anyone around here is into 90's imports, a 1994 Supra just sold for $150,000 on BringATrailer.com :shock:

  • Like 3
Link to comment
Share on other sites

Hello Greensocks Team,

this has worked wonderfully.

 

Now I have developed the animation a little further.

 

What I don't understand now is why the text color of the second section (Headline 2) only changes when the scroller end is already at 50% of the view height.

 

Do you have a tip?

 

Greetings,

Marc

 

See the Pen BaPvEvB by MarcFN (@MarcFN) on CodePen

Link to comment
Share on other sites

That's because you set up your .set() calls to do ALL elements with the ".hidden .char" class. So when you're in the 2nd section, it's actually starting to animate the ones in the first section and eventually it catches up and does the ones from the second section. 

 

You want to just have it animate the ones in that particular section...

// bad
.set(".hidden .char", {...
                       
// good
.set(element.querySelectorAll(".hidden .char"), {...

 

See the Pen LYBqOYP?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi Greensock Team,

 

now I have the next problem. If I give an animation a class with the property "display: none", and then remove the class with a function, the animation is not displayed correctly.

 

What am I doing wrong, what to look for here?

 

Thanks for your answer in advance,

 

Marc

 

See the Pen OJwYEJE by MarcFN (@MarcFN) on CodePen

 

Link to comment
Share on other sites

Hi,

 

A few things. First in the function you're using to show the element you should call ScrollTrigger.refresh() so ScrollTrigger calculates the start and end points again. Also I wouldn't recommend display none since it's really messing up the position of the elements after SplitText does it work.

 

I think this is a better approach:

See the Pen xxJNQmm by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Hello Greensock Team,

in the following example the screen stops as soon as the Start trigger element arrives at the top.

Now the animation runs until the trigger element end arrives at the top of the screen.

Now the animation is over and the lower area becomes visible.

Is there somehow a possibility that I can still scroll for example 200px further and the lower area is not yet visible.

I hope I have expressed myself reasonably understandable.

Greetings from Lake Constance,

Marc

 

See the Pen zYJxvBY by MarcFN (@MarcFN) on CodePen

Link to comment
Share on other sites

In your ScrollTrigger you define over what distance your animation should play. You had set it to end: "+=100%", which is the same a "bottom top". now you're asking you want to extent that with an extra 200px, than I would suggest changing your end trigger to be end: "bottom+=200px top", which will put the end trigger 200px below the bottom of the element. With this the animation will just take longer to complete and this is not what you want, if I understand you correctly you want the animation to play and then do nothing for 200px.

 

I'm not going to do the calculations what exactly would be 200px, but if you add an empty tween to your timeline with a duration tl.add(() => {}, "+=1") and set the duration of your first tween to 1, the animation will play over the first half of the distance of your ScrollTrigger and then over the next half it will do nothing. You can increase or decrease these values, but keep in mind ScrollTrigger will map the total duration of the timeline to the distance of the total ScrollTrigger area. Hope it helps and happy tweening! 

 

See the Pen BaOyjYB?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 2
Link to comment
Share on other sites

I just want that after the end of the animation the visible area stays a bit when you scroll further. Because so it looks like the area is already pushed further up although the animation is not yet over.

 

Sorry that I still have so little experience

Link to comment
Share on other sites

No problem at all, but I had giving you a demo and you picked something from that demo, but you placed it in the wrong place.

 

With GSAP you build a timeline and every tween on that timeline plays in sequence, so the first one place at first and the second one right after that. To me it seems like you want te animation to do nothing after it has finished. Right now you've put it in the beginning of the timeline and that is not correct, because you want the pause to happen after the animation right?

 

In this scenario we should start with the text animation  and after that do nothing for x amount of seconds. Below a fork of your pen with the correct logic, only with one problem. Your text animation has a duration of 25 seconds (252 letters each taking 0.1 seconds = 25.2 seconds) and the pausing animation takes just 1 second, so that doesn't have the effect you're after right? If you want to pause to be as long as the text animation it should also take 25.2 seconds. To me that seems like a bit of a hassle to calculate and the text could change in the future, so we have to be smart about it. See another solution further down.

 

See the Pen GRXpZge?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

Here is another fork of your pen with a few fixes I would suggest. Create a .to() tween instead of .set() and instead of changing a class, just animate the values directly with GSAP. Then create a variable fixedAnimationTime = 2; which, and then instead of having a stagger with the default stagger each property use the amount property to set a time the total animation should take regardless of the amount of letters that are being animated.  

 

See the Pen MWqayyJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

All the durations are a bit random at the moment, because GSAP normally animaties based on time, but right now we are using ScrollTrigger (with a scrub: value) and it doesn't care about durations, it uses the scroll position to time it's animations, but it still uses the durations relative to each other based on the total scroll duration. So in my last example the total animation time is 4 seconds, each tween takes 2 seconds which means the text animation animates over 50% of the total scroll distance and the pause the other 50%. I hope this clears things up for you, happy tweening! 

  • Like 3
Link to comment
Share on other sites

Hello Greensock Team,

and already I have the next question.

I think once I understand this, then I'm a good step further.

I have extremely reduced the script, but I can't figure out why it doesn't work.

There are 3 wrappers. As soon as wrapper 1 is in the ViewPort, I want to run an animation over the whole screen height. 

So far this is all understandable for me.

But when wrapper 2 comes into the ViewPort and arrives at the top of the screen, the animation should run, then wrapper 3 already starts at the bottom.

And I don't understand that. Why does wrapper 3 come before and not when the animation in wrapper 2 is finished.

I hope I was able to explain this in a reasonably understandable way.

Greetings,

Marc

 

See the Pen gOdPpJb by MarcFN (@MarcFN) on CodePen

Link to comment
Share on other sites

That is because you first initiate all the olive sections, so ScrollTrigger renders its logic based on all the positions of all elements on the page, but then you do the orange sections and the olive section does not know something has updated on the page. You could look in to ScrollTrigger.refresh(); or just create all the ScrollTrigger instances for all wrappers and just change the animation based on the class if you want something different to happen.

 

See the Pen eYLJZdB?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

Hi mvaneijgen,

 

I have taken the original version and have set the refresh according to the instructions

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh()

 

But nothing happens.

 

Then I even tried to call the function via onclick function when I click on "Wrapper 2".

 

Also there nothing happened.

 

Here now the updated code

 

See the Pen gOdPpJb by MarcFN (@MarcFN) on CodePen

 

Link to comment
Share on other sites

Hi,

 

The problem here is not exactly when you call the refresh method, but the fact that you're not creating the ScrollTrigger instances in the order they happen in the screen, so no matter when, where or how many times you run the refresh method, you'll get the same issue.

 

You have to tinker with each section's refresh priority in order to get things correctly, which can be a bit trickier when creating independent loops (like you're doing right now). From the ScrollTrigger Docs:

 

refreshPriority

number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

So in this case you have the following order: OliveOne - Orange - OliveTwo and you're running your loops like this: OliveOne - OliveTwo - Orange, so ScrollTrigger makes it's calculations and adds the pin spacing based on the loops order.

 

This seems to work the way you expect:

See the Pen wvEZwyq by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

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