Gsap text animation with Swiper

[Umberto]

Hi, I would like to insert an animation of the text of my slides with Swiper. 

I tried to insert this: 

 

gsap.to (". box4", {keyframes: [ {duration: 1, x: 100}, {duration: 1, backgroundColor: "# f38630", delay: 0.5}, {duration: 1, x: 0, rotation: -360, delay: 0.5} ]}); 

 

and it works, but it doesn't reload the animation every time I browse with the slides. 

Is it possible to do something? 

Thanks

See the Pen LYRGgBV by umberto (@umberto) on CodePen

[ZachSaucier]

Hey Umberto. It'd really help if your demos were more minimal with all of the irrelevant parts (ScrollTrigger, Locomotive Scroll, etc.) stripped out.

 

As for your question, your tween is being fired on page load. You need to fire it each time the slide is reached instead so it should be in some Swiper callback. 

[Umberto]

Hi, I was able to animate the text with Gsap and Swiper, with this: 

 

var swiper = new Swiper('.swiper-container2', {
      speed: 1200,
      parallax: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
		// If we need pagination
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
		runCallbacksOnInit: true,
		on: {
    init: function () {
      zoomImage(this.$el);
      moveDownText(this.$el);
    },
    slideNextTransitionStart: function () {
      zoomImage(this.$el);
      moveDownText(this.$el);
    },
    slidePrevTransitionStart: function () {
      zoomImage(this.$el);
      moveDownText(this.$el);
    } 
	}
    });
function zoomImage(sliderDOM) {
  const slideActive = sliderDOM.find('.swiper-slide-active, .swiper-slide-duplicate-active');
  const imageSlide = slideActive.find('.slide-inner--image');
	
	
	gsap.set(imageSlide, {x: 100, y: 50, opacity: 0, skewX: 30,});
gsap.to(imageSlide, {duration: 0, x: 300, y: 0, opacity: 1});
}

function moveDownText(sliderDOM) {
  const slideActive = sliderDOM.find('.swiper-slide-active');
  const slideCaption = slideActive.find('.slide-inner--info');

  const oldActive = sliderDOM.find('.swiper-slide-prev, .swiper-slide-prev');
  const oldCaption = oldActive.find('.slide-inner--info');

  // out
  gsap.to(oldCaption, { duration: .3, ease: Power2.easeOut, startAt: { autoAlpha: 1 }, autoAlpha: 0 });


  // in
  gsap.set(slideCaption, { autoAlpha: 0 });
  gsap.to(slideCaption, { duration: 3, ease: Power4.easeOut, startAt: {autoAlpha: 0, y: "-150%" }, autoAlpha: 1, y: "4%", display: "block"});

}

I tried to animate the image too and it works but I have the same problem as before, once the animation is loaded it doesn't repeat it. 

I modified the codepen example

 

What's it like?

[akapowl]

 

Hey @Umberto

 

On 12/6/2020 at 11:18 AM, Umberto said:

but I have the same problem as before

 

Why not try a similar thing like what you did with your text then? If it gave you the solution to that, a similar procedure might work for your images.

 

I quickly added this to your zoomImage function and it seems to work decently 

 

  const otherImages = sliderDOM.find('.swiper-slide-prev, .swiper-slide-next');
  const notActiveImage = otherImages.find('.slide-inner--image');  
  
  gsap.to(notActiveImage, .3, {x: 0, y: 0, opacity: 0, skewX: 0});

 

See the Pen 85caab6c126a8a15f60d77eca7c48db9 by akapowl (@akapowl) on CodePen

 

 

Just to point this out:

This is really more a matter of how swiper works, and nothing related to GSAP per se.

 

Happy swiping  

 

[Umberto]

I hadn't thought about it, I apologize.
Unfortunately I still struggle to use Gsap, but I will learn ...

Thanks

[akapowl]

6 minutes ago, Umberto said:

I hadn't thought about it, I apologize.

 

No need to apologize. I just wanted to hint you to it and wasn't intending to point fingers or something like that.

 

 

7 minutes ago, Umberto said:

Unfortunately I still struggle to use Gsap, but I will learn ...

 

Again: the issues you are running into, really have more to do with how Swiper works, and not with GSAP per se.

 

Learning more about GSAP is always a good idea, but unless you also try and also get a better understanding on how Swiper works, knowing about GSAP alone won't help you much (in this scenario of yours).

 

Happy learning  

[Umberto]

12 minutes ago, akapowl said:

No need to apologize. I just wanted to hint you to it and wasn't intending to point fingers or something like that.

 

Absolutely, you have been very kind.

😇

Thanks

[ChrisDark86]

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

[ZachSaucier]

Hey @ChrisDark86. Please create a minimal demo and create a new thread if you'd like our help