Jump to content
Search Community

SplitText strange behavior

Creativist-Lab test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hello guys,

 

I'm following Carl Schooff his tutorials and I'm a total beginner with GSAP and Javascript, so most likely the mistake(s) are totally on me I just can't figure out what I'm doing wrong.

This is the code that I'm using:

 

gsap.registerPlugin( SplitText, ScrollTrigger );
 
 let wrappers = document.querySelectorAll('.wrapper')
 
 wrappers.forEach( ( element ) => {   
   let heading = element.querySelector('h2')
   let paragraph = element.querySelector('p')
   paragraph = new SplitText('p')
   console.log(element);
   
   let tl = gsap.timeline()
       .from(heading, {opacity: 0, yPercent:100, duration: 0.3, ease: 'back' })
    .from(paragraph.lines,{opacity: 0, yPercent: 100, stagger: 0.15, duration: 0.3, ease: 'ease.in'}, '>')
          
   ScrollTrigger.create({
     trigger:element,
     start: 'top 90%',
     toggleActions:'play none none reset',
     animation:tl,
     markers: true,
   })
 })

 

So I created divs with the class 'wrapper' and in those divs I'm targeting the h2 and p element. The h2 elements are animating in as I wanted but the 'p' elements take a long time to animate in and also the 'p' that are not having a class of 'wrapper' are being animated.

Furthermore I'm getting the following warnings: gsap.min.js:10 GSAP target null not found. https://greensock.com

and

gsap.min.js:10 GSAP target  not found. https://greensock.com

I have been trying to figure out for quite some time now what I'm doing wrong but with no success unfortunately.

 

Any help would be very much appreciated and so thanks in advance.

Link to comment
Share on other sites

  • Solution

 

Hey @Creativist-Lab

 

1 hour ago, Creativist-Lab said:

So I created divs with the class 'wrapper' and in those divs I'm targeting the h2 and p element. The h2 elements are animating in as I wanted but the 'p' elements take a long time to animate in and also the 'p' that are not having a class of 'wrapper' are being animated.

 

You are first setting up your variable paragraph to get the p in each wrap and then you are overwriting that variable, adressing all p in the document with SplitText. What you'd want to do is set up a new variable for your SplitTexts and use that variable you created beforehand to only address the p in that specific wrap. Something like this:

 

   let heading = element.querySelector('h2')
   let paragraph = element.querySelector('p')
   
   let splitParagraph =  new SplitText(paragraph, {type:"lines"})

 

See the Pen 994d67865e8885f2d7e2e784fdb82347 by akapowl (@akapowl) on CodePen

 

 

 

1 hour ago, Creativist-Lab said:

Furthermore I'm getting the following warnings: gsap.min.js:10 GSAP target null not found

 

Those are just warnings by GSAP telling you that there is no such element you are targetting in the current wrap you are looping over. So if in one of your wraps you don't have a <p>, but you are trying to tween on the p in each paragraph, GSAP will tell you that there is no such thing to find there. If I am not mistaken, those warnings are nothing to worry about too much - you can even disable them via nullTargetWarn in .config().

 

But if you want to prevent them from happening at all, you could check if that element you are targetting exists in the first place. Not sure if this is the best way to do it, but using shorthands like in this example seems to work decently. Hope that helps.

 

See the Pen 46ef8bdbaf9a371b36c474f46470373d by akapowl (@akapowl) on CodePen

 

  • Like 5
  • Thanks 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...