Jump to content
Search Community

GSAP SplitText animation with Fullpage js

Nikhil009 test
Moderator Tag

Recommended Posts

Hi, I am looking for a solution that combines the two different text animations like on the websites below, I am also using fullpage js.

https://wirewerks.com/en/about-us/

https://21-capital.com/

 

So on each index of the page I am using if function for the animation, although without reverting the splittext it creates a duplicate each time i scroll to the specified animation page as it runs it again and again, that is why i had to revert it.

 

Sorry for not being able to replicate the code work on codepen.

 

var mainTitles = new SplitText('.strength-title h1, .free-session-title h1', {
                     type: "lines",
                   linesClass: "line line++"
                });
             $('.strength-title h1 .line , .free-session-title h1 .line, .photobio-title h1 .line').wrap('<div class="line-wrapper">');


TweenMax.staggerFrom(
                     mainTitles.lines,
                     2, {
                         yPercent: 100,
                        ease: Power4.easeOut,
                         delay: 1
                    },
                     0.25,
                     splitRevert
                 );

                 $('.strength-title h1, .free-session-title h1').css('visibility', 'visible');
        
                 var tp = gsap.timeline(),
                    mySplitText = new SplitText(".photobio-title p", {
                         type: "lines,words"
                    }),
                     chars = mySplitText.lines; 
        
                 tp.fromTo(chars, 1.5, {
                     opacity: 1,
                     y: 0,
                    ease: Power4.easeOut,
                     stagger: 0.15,
        //         }, {
        //             opacity: 0,
        //             y: 100,
        //             ease: Power4.easeOut,
        //             stagger: 0,
        //         }, "+=0");
        //
        //         function splitRevert() {
        //             $('.strength-title h1 .line , .free-session-title h1 .line , .photobio-title h1 .line').unwrap();
        //             mainTitles.revert();
                     $('.photobio-title p').css('visibility', 'hidden');
                    mySplitText.revert();
                 }

 

This formation is not currently working smoothly for me, if anyone has a possible solution please kindly do help me.

Thank You

Link to comment
Share on other sites

Hey Nikhil and welcome to the GreenSock forums! 

 

I did something similar recently. I highly suggest creating a timeline and using control methods to control that timeline instead of reverting and recreating the split text each time. 

 

What do you mean "This formation is not currently working smoothly for me"? Without a demo it's hard to know what's going wrong for you or to be able to help. 

Link to comment
Share on other sites

Hey Zach, 

 

Thank You for the welcome!

I am very new to gsap making it abit otugh for me to understand some stuff you said about the timeline controls although I have managed to replicate it on codepen

 

As you can see at first the photobio title appears first rather than the top two titles and then if scroll directly it kinda breaks the gsap and doesnt animate properly, I think it might be because of the revert, as well as invisibilty hidden.

 

See the Pen JjdZbXE by nikhil-ladhani-nl (@nikhil-ladhani-nl) on CodePen

 

Hope this helps

Link to comment
Share on other sites

There are several things going wrong here. You can see the errors by using your developer tools console (press F12 to open it).

  • gsap is not defined because you're loading TweenMax, not a GSAP 3 file. Fix it by loading GSAP 3 instead :) That also means that you should load the GSAP 3 version of SplitText.
  • There's another error The option `scrollOverflow:true` requires the file `scrolloverflow.min.js`. Please include it before fullPage.js. so make sure to load scrolloverflow.min.js as well.
  • You're attempting to use SCSS but didn't specify that in CodePen. You can click the cog next to the SCSS to specify to use SCSS.
  • There's an undefined variables $font-60, $font-44, and $font-22 in your SCSS. You should define those.
  • If you scroll, you will get a GSAP target  not found. warning because there is no .pain1 .pain-description element.
  • You should try not to put function within functions, especially when the parent function is going to be called multiple times. Function creation and execution is expensive so you wan to avoid it when it's not really helpful. You should probably have a function that runs when everything is initialized and include whatever you can in there (including the creation of the SplitText stuff). 
  • You could upgrade your v2 syntax to v3 syntax which includes changing TweenMax to gsap, moving the duration inside of the vars parameter, changing the staggerFroms to regular .from() tweens with the stagger property, and using the new condensed string form of eases. For more information, check out the GSAP 3 posts.
  • Use gsap.set() instead of jQuery's .css().

With all of that being said, the core improvement is that you should create your animations beforehand and control them using control methods (like .play(), etc.) inside of the scroll listener. If you do that, you should end up with something along the lines of this:

See the Pen NWqzdqG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You'll have to continue to modify it to get it the way you need it to be, but that's the basic approach.

  • Like 1
Link to comment
Share on other sites

Thank you, Thank You very much, I have gotten and yet learning more on the concept of how to animate but you have guided me to what I wanted,

 

I shall use the .play from now on to animate instead of the scroll listener  🙂

 

Happy and glad to use GSAP for animations as well!

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...