Multiple Sections with SplitText not working

[MarcFN]

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

[Carl]

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 

[MarcFN]

Thank you for the super quick reply.

I will take a close look at it.

Greetings,

Marc 👍

[MarcFN]

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

[GreenSock]

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

[MarcFN]

Thank you for the correction,

I still have a lot to learn.

[MarcFN]

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

 

[Rodrigo]

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!

[MarcFN]

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

[mvaneijgen]

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

[MarcFN]

Thank you very much, exactly what I needed

[MarcFN]

Somehow I don't understand it.

I have tried here, but it does not work.

Any tips?

 

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

[mvaneijgen]

What is it you want to do? You've add an empty tween to the beginning of the timeline with is delayed by 1 second, but the tween after that starts at a fixed position on 0.1 on the timeline, they cancel each other out... 

 

You should really read through the position parameter post and see what is possible.

[MarcFN]

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

[mvaneijgen]

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! 

[MarcFN]

Hello mvaneijgen,

 

thank you very much for your answer and especially for your detailed explanation.

For a beginner this is already quite complicated.

 

Thanks again

 

Greetings from Lake Constance,

Marc

[MarcFN]

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

[mvaneijgen]

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

[MarcFN]

Hello mvaneijgen,

thank you for the tip and your super fast reply.

Marc

[MarcFN]

Hi mvaneijgen,

 

where exactly would I have to place the ScrollTrigger.refresh(); if I want to try it this way?

 

I just tried it, but it does not work.

 

Thanks for your answer,

Marc

[mvaneijgen]

Do you have a demo with the (updated) not working code? 

[MarcFN]

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

 

[Rodrigo]

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!

[MarcFN]

Hello Rodrigo,

thank you very much for your answer.

Greetings,

Marc