Jump to content
Search Community

Swiper + SplitText animation

ChrisDark86 test
Moderator Tag

Recommended Posts

Dear GSAP Team!

The target would be a proper running animation right after when the slide change.
( you could swipe with your mouse now if you wouldn't like to wait 10s for each of them )
I've the following problems because lack of my knowledge with GSAP yet.
 

  1. Don't know how to hide the first slide text on init function
  2. It seems there are delays on each slide ++
  3. Bonus task: before slide change it to the prev/next slide the text would collapse with similar but opposite animation.

 

I'm newbie here, any help would really appreciate it! ; )

// Swiper API Events
https://swiperjs.com/swiper-api#events

Best,
Chris

See the Pen VwmZerV by ChrisDark (@ChrisDark) on CodePen

Link to comment
Share on other sites

Hey Chris.

 

1 hour ago, ChrisDark86 said:

Don't know how to hide the first slide text on init function

We have a post focused on that :) 

 

1 hour ago, ChrisDark86 said:

It seems there are delays on each slide ++

You're making one of the most common GSAP mistakes: You're using a general selector when you should use a more specific one. You're selecting and splitting all of your h2s every time that you're going to a different slide. That's no good. Instead you should only target, split, and animate the elements relevant to the new section (or the old section for the leave animation). 

slideActive[0].querySelector("h2")

 

You're also continuing to split each text every time it get transitioned to again. You should make sure to revert the SplitText when your animation is done.

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

 

1 hour ago, ChrisDark86 said:

Bonus task: before slide change it to the prev/next slide the text would collapse with similar but opposite animation.

You'd do the same sort of thing that you're currently doing but using some Swiper event that lets you replace their default leave animation. I'm confident Swiper has something that lets you return a promise or something to let it know your leave transition is complete but I don't know Swiper or what that event would be.

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