I'm tryng with SplitText + Timeline + ScrollTrigger responsive

[PabloCA]

Im new with Gsap and i'm tryng to figure out how it works correctly.
I made this function for each .bluebox

$('.bluebox').each(function() {

    var bluebox = $(this),
        blueboxMiniTitulo = bluebox.find('.mini_titulo'),
        blueboxTitulo = bluebox.find('.titulo'),
        blueboxIntro = bluebox.find('.intro'),
        blueboxBoton = bluebox.find('.botonWrap');

    var blueboxTituloSplit= new SplitText(blueboxTitulo, { type: "lines"}); 
    var blueboxTituloLine = blueboxTituloSplit.lines;
    

     var blueboxIntroSplit= new SplitText(blueboxIntro, { type: "lines" }); 
    var blueboxIntroLine = blueboxIntroSplit.lines;
    

    
    var blueboxAni = gsap.timeline({defaults:{y:100, opacity:0, duration:1, ease: Power3.easeOut}})
        .paused(true)
        .from(blueboxMiniTitulo,{})
        .from(blueboxTituloLine,{ stagger:.1})
        .from(blueboxIntroLine,{ stagger:.1})
        .from(blueboxBoton,{opacity:0});

    ScrollTrigger.create({
        trigger:bluebox,
        start:"top 95%",
        toggleActions:"play none none none",
        animation:blueboxAni.play()
    }) 
});

the problem that i'm looking to try to fix is if the window is resize, I want the split element re split, without triggering the scrollText animation again

 

Any suggestion, please?

Thanks in advance

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[mvaneijgen]

Hi @PabloCorrea welcome to the forum!

 

Hard to say what would not work here, from just a code snippet. What I can say is that animation:blueboxAni.play() should not include .play(). SplitText on it self doesn't animate anything. If you split the text you still have to create an animation after you've split it, so these two lines don't do anything visually: .from(blueboxTituloLine,{ stagger:.1})  .from(blueboxIntroLine,{ stagger:.1})

 

Try creating a minimal demo on Codepen.io of what you're trying to do, this has two benefits. First this allows you to experiment and try out new ideas. By making it simple people usually solve 90% of their own bugs. Second, you have an easy version you can share in which anyone could edit and modify the code.

 

[PabloCA]

Thanks for the tips.
I created a demo on codepen

 

See the Pen JjeOymx by pablo-correa-alcalde (@pablo-correa-alcalde) on CodePen

 

(I hope I have embedded it correctly)

It's a project in which they work with jQuery, so I have to adapt to it. My question is how to include a split() when a window resize is performed, so you don't see cut sentences.
 

I speak Spanish, so sorry for my English. I hope you understand what I'm looking for, thank you very much for the answers

[mvaneijgen]

Something like this? Just watch for the resize event and then .revert() the split text that you've created. 

 

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

[Rodrigo]

Hi,

 

On top of @mvaneijgen's great advice I would suggest you to take a look at GSAP MatchMedia:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Hopefully this helps.

Happy Tweening!

[PabloCA]

Thanks for the reply guys!

For some reason when I add that  lines the splitText vanishes. 

I mean doesn't  makes the inital split. When I started developing this I included exactly what you put there, also tried with split()

I thought there was something wrong with that function, but it seems to be another problem, if on codepen it works correctly

 

Thanks again

[PabloCA]

Thanks a lot guys!

I fixed the issue adding a callback on the timeline animation, it seems to works

See the Pen JjeOymx by pablo-correa-alcalde (@pablo-correa-alcalde) on CodePen

 

 

[ One last question, to close the topic what should I do? Or just leave it ]

Thanks again!

[Rodrigo]

Hey Pablo!

 

Great to hear that you were able to solve it, great job!

 

No worries, just leave the thread as it is, the indication that there is a solution is good enough in case another user circles back to it.

 

Happy Tweening!

PS: Nice to see someone else from Chile in the forums from time to time  

[PabloCA]

53 minutes ago, Rodrigo said:

Hey Pablo!

 

Great to hear that you were able to solve it, great job!

 

No worries, just leave the thread as it is, the indication that there is a solution is good enough in case another user circles back to it.

 

Happy Tweening!

PS: Nice to see someone else from Chile in the forums from time to time  

Cagaste! manda teléfono y te molesto en directo mejor! ahahahha abrazo