Dear GSAP Team!
I'd like to understand how could I create the same effect with SplitText plugin.
At the moment it has a delay somehow on every slide change.
<div class="swiper-slide">
<?php if ( $title ) : ?>
<div class="swiper__title">
<h2><?= $title ?></h2>
</div>
<?php endif; ?>
</div>
<!-- Swiper -->
<script src="<?php echo get_template_directory_uri(); ?>/js/swiper.min.js"></script>
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<!-- Split Text -->
<script src="<?= get_template_directory_uri() ?>/js/SplitText.min.js"></script>
<script>
gsap.registerPlugin(SplitText)
var swiper = new Swiper('#post__slider .swiper-container', {
effect: 'fade',
speed: 1000,
watchSlidesVisibility: true,
autoplay: {
delay: 10000,
disableOnInteraction: false,
},
allowTouchMove: true,
loop: true,
runCallbacksOnInit: true,
on: {
init: function () {
splitTextFunction(this.$el);
},
slideNextTransitionStart: function () {
splitTextFunction(this.$el);
},
slidePrevTransitionStart: function () {
splitTextFunction(this.$el);
}
}
});
function splitTextFunction(sliderDOM) {
let split
let animation = gsap.timeline({})
const slideActive = sliderDOM.find('.swiper-slide-active');
const slideCaption = slideActive.find('.swiper__title');
const oldActive = sliderDOM.find('.swiper-slide-prev, .swiper-slide-prev');
const oldCaption = oldActive.find('.swiper__title');
//animation.clear().time(0);
//split.revert();
gsap.set(slideCaption, {autoAlpha:1})
split = new SplitText("h2", {type:"words, chars"})
animation.from(split.chars, {opacity:0, y:50, ease:"back", stagger:{
from:"start",
each:0.05,
}})
}
</script>
Thanks in advance for your help!
Best,
Chris