How to scrollTrigger Opacity From Left to Right

[Guest]

Hello,

 

You can see in the codepen that the scrollTrigger hit it from the top to the bottom but I want the opacity start from the left and go to the right (first char to last char).

 

Is it possible or I need to use another method?

 

Thank you!

 

See the Pen jOXbjyz by karfield (@karfield) on CodePen

[mvaneijgen]

Hi @aestic welcome to the forum!

 

It seems like you were building your own SplitText plugin https://greensock.com/docs/v3/Plugins/SplitText instead of doing that, why not use the real deal, saves you a lot of time of debugging!

 

I've also updated your tween, I've created a timeline. I find it easier to have my ScrollTrigger logic separate from my tween, makes the code easier to read. And instead of a .fromTo() tween I used a .from() tween, because opacity: 1; is the browsers default.

 

So what I do in the blow pen is split the text in lines and then for each line I again split it in chars. Then I have a timeline with ScrollTrigger that controls one tween that animates each character from an opacity of 0 with a stagger of 0.1 second for each character, this is the magic that will make it they will come in one after each other. 

 

Hope it helps and happy tweening! 

 

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

[Guest]

Hello @mvaneijgen,

 

The solution on codepen works, but I don't have 120$ per year to pay these plugins. I hope I will in the future.

 

So I don't know if without this plugin the timeline still works with my handmade split method.

 

Thank you for your time!

[alig01]

Hey,

 

as long as splitting the word into chars works, you could do something like this 

See the Pen OJryKWo?editors=0110 by alig01 (@alig01) on CodePen

 

I also helped someone in a other thread with a similar effect and he split the words differently, maybe that could help too.

 

Good luck with your project

[mvaneijgen]

I was about to say 1200$ seems a bit excessive, but I see you've updated your post to 120$.

 

If you build websites for a living the tools pay for them self if you ask me. If you have bought a licence and you don't renew for the new year you can keep using the older versions of the Club Greensock bonus plugins*, the scripts you load on your site don't have any phone home scripts in them, so the scrips you've loaded will keep working! (* Read For how long must I maintain my membership? for the asterisk) 

 

The issue with your own version is that you don't split by lines, but you just split in chars and because all the chars are on the same line the ScrollTriggers will start all at the same time. So as per my example you'll first need to split by lines and then split by chars, to get the same effect. If you want to build such a function you will probably encounter a lot of gotchas, that is why Greensock build a plugin for it, to save you the time an headache. Still great practice dough, if you want to build something similar.

 

Happy to help and hopefully we'll see you join the club in the future! Happy tweening!

 

 

[Guest]

6 minutes ago, alig01 said:

Hey,

 

as long as splitting the word into chars works, you could do something like this 

 

 

 

I also helped someone in a other thread split the words differently, maybe that could help too.

 

Good luck with your project

 

It work's perfectly. Thank you!

 

5 minutes ago, mvaneijgen said:

I was about to say 1200$ seems a bit excessive, but I see you've updated your post to 120$.

 

If you build websites for a living the tools pay for them self if you ask me. If you have bought a licence and you don't renew for the new year you can keep using the older versions of the Club Greensock bonus plugins*, the scripts you load on your site don't have any phone home scripts in them, so the scrips you've loaded will keep working! (* Read For how long must I maintain my membership? for the asterisk) 

 

The issue with your own version is that you don't split by lines, but you just split in chars and because all the chars are on the same line the ScrollTriggers will start all at the same time. So as per my example you'll first need to split by lines and then split by chars, to get the same effect. If you want to build such a function you will probably encounter a lot of gotchas, that is why Greensock build a plugin for it, to save you the time an headache. Still great practice dough, if you want to build something similar.

 

Happy to help and hopefully we'll see you join the club in the future! Happy tweening!

 

 

 

Yeah, 120$*

 

"If you build websites for a living the tools pay for them self if you ask me."

 

That's my goal, yes, to make a living out of it, I started dev on JS 1 year ago and on React 6 months ago and for GSAP a few days ago, so I'm still tattooing (by the way this lib is incredible you can do so many things with it).

 

Thank you again for the explanation, that's what I was thinking, I just realized it.