Jump to content
Search Community

SplitText in each loop (noob sanity check)

Chris Prieto test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I've made it plenty far using GreenSock with my limited js/jquery knowledge so it's been a fun and fulfilling learning experience. In my search for a solution I found a post on here that got me this far but I fear I am missing something ?

 

That said I find myself struggling with what I hope is something simple for a more knowledgable GreenSocker. The loop I am stuck on is below. My hope is to split the text on '.services-wrap li p' which i was previously adding to timeline with 'element.children[4]' but once I tried to split that text things got a lil complicated. I confirmed that SplitText works outside the loop so I am convinced I am doing something wrong even tho the variables make sense to me.

 

var $serviceWrap = $('.services-wrap li');
$serviceWrap.each(function(i, element){
    var serviceBTl = new TimelineMax({delay:i*.2}),
        servicePSplit = $(this).find('.services-wrap li p'),
        serviceSplit = new SplitText(servicePSplit, {type:"lines"}),
        serviceChars = serviceSplit.lines;

    serviceBTl
        .from(element.children[0], .2, {autoAlpha:0})
        .from(element.children[2], .2, {autoAlpha:0, y: '50%'})
        .from(element.children[3], .2, {x: '-110%'})
        .staggerFrom(serviceChars, 1, {y:'50px', autoAlpha:0, ease:Power3.easeOut}, 0.1)
    ;

    serviceTl.add(serviceBTl, 1);
});

 

 

Link to comment
Share on other sites

Hi @Chris Prieto,

 

Welcome to the forum and thanks for joining Club GreenSock.

 

I'm troubleshooting a bit blind here, but I see a couple things.

 

1. The <li> is $(this) so I think you meant to do this

 

// switch this
servicePSplit = $(this).find('.services-wrap li p')

// to this
servicePSplit = $(this).find('p')

 

The other thing I don't know is how many <p> elements (or other elements) are part of the <li> that would be the children. I'm guessing the <p> is the only one? If so, tweening children[2], [3] etc won't work since element.children[0] is the only one that exists. This is just a guess though since I can't see your DOM. 

 

If you could make a demo and describe the desired behavior, we could offer more detailed assistance. More info:

Hopefully that helps. Happy tweening and welcome aboard.

:)

 

  • Like 4
Link to comment
Share on other sites

Yes! Thank you Carl, that totally was it! My apologies as I meant to paste HTML and forgot to do it. I also tried to set up a codepen when I submitted and got the notice but I was not able to get it working. But thank you for the quick fix and I will work on trying to wrap my mind around codepen for future issues I may encounter. 

 

  • Like 1
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...