Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ceescoenen

New to GSAP, help needed with GSAP inside a SwiperJS

Recommended Posts

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/

 

 

Link to comment
Share on other sites

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
    });
});

 

 

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

Hi @Cassie,

 

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

Link to comment
Share on other sites

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

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