New to GSAP, help needed with GSAP inside a SwiperJS

[ceescoenen 1 Likes (Newbie)]

Hi, 

 

I will learn GSAP. I have a SwiperJS that loads 3 divs with images as a fade (first image, second image, third image).

Inside each DIV I have add three other divs with the class .homepage-intro . 

 

 

jQuery(document).ready(function($) {
   gsap.from(".homepage-intro",{
       y: "+=100",
       opacity: 0,
       duration: 1,
       stagger: 0.5
   })
});

 

The first time the slide loads with the animation. When the loop is round and the first slide loads again the animation doesn't work. What is wrong?

Again, I have to learn GSAP and this is the first animation I try. You can see the slide here:

 

https://staging.e-chopperleusden.nl/

 

 

[OSUblake 18,364 Likes (Superhero)]

Hi ceescoenen,

 

It's hard to say without a minimal demo, but if it's going to call the animation again, you should probably use .fromTo() animation.

 

https://greensock.com/docs/v3/GSAP/gsap.fromTo()

 

[ceescoenen 1 Likes (Newbie)]

Hi @OSUblake,

 

I have searched and found the solution. The only thing I don't know: is Stagger possible? Or maybe there is a better solution: 

I have three elements that has to appear after each other. Maybe the first after 500ms, the second after 900ms and the third after 1500ms.

Is it possible that you give me some hints?

 

swiper.on("slideChangeTransitionStart", function() {
    gsap.fromTo(".homepage-intro", {
        y: 400,
        autoAlpha: 0
    }, {
        duration: 1,
        ease: "power4.out",
        y: 0,
        autoAlpha: 1
    });
});

 

 

[OSUblake 18,364 Likes (Superhero)]

A Timeline will let you coordinate all of that with the position parameter.

 

https://greensock.com/docs/v3/GSAP/Timeline

 

 

 

[ceescoenen 1 Likes (Newbie)]

Hi @OSUblake

 

First thanks for the fast answer. A last question: the animation works. But only on pageload on the first slide it is there without animation. All others slides and loops works. Do you understand what is happen? Is the animation to fast there? 

[Cassie 3,980 Likes (Superhero)]

Hey @ceescoenen,

 

Please add a minimal demo if you need any more help.

 

Thanks!

[ceescoenen 1 Likes (Newbie)]

Hi @Cassie,

 

Yes I understand. I have to learn how I can do this samples on Codepen. For now it works. 

[_Greg _ 123 Likes (Specialist)]

4 hours ago, ceescoenen said:

But only on pageload on the first slide it is there without animation

You use event slideChangeTransitionStart so it works only on slide changed (next, prev) 

Check Swiper documentation Events

You need to use Events like init or afterInit or beforeInit, (if you create minimal example it was more clear) for animate first slide