refer to $(this) in a timeline

[raizo]

Hi there, I am integrating GSAP with fullpageJS.

for some slides, i am using the same timeline for the elements to fade in when a user gets on a new slide. This is how i set my animation

 

var workTitle = $(".title");
var workContent = $("p");
var content = [workTitle, workContent];
var tl2 = new TimelineLite({});

    tl2.staggerTo(
      content,
      0.2, {
        autoAlpha: 1,
        opacity: 1,
        ease: Power1.easeIn
      },0.2);

 

for now the animation will run for all slides when the user gets to a slide. for example if the user gets on slide 1, the content fades in. but when I swipe to slide 2, the content is already in view because the animation was played for all slides. this is how all my slides (will) look like.

 

<div id="slide2" class="slide">
  <section class="content">
    <h3 class="title">slide 2</h3>
    <p> content </p>
  </section>
</div>

 

I am using the callbacks provided by FullpageJS in combination with GSAP. I know $(this) refers to the specific element you want to target, but I can't seems to find a way to refer to $(this) in a timeline. Its working fine except the animation is triggered for all slides, which needs to be only for the loaded slide. see how i make use of the callback provided by fullpage with some gsap.

 

afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
    var workTitle = $(".title");
    var workContent = $("p");
    var content = [workTitle, workContent];

    var loadedSlide = $(this);
    var tl2 = new TimelineLite({});

    tl2.staggerTo(
      content,
      0.2,
      {
        autoAlpha: 1,
        opacity: 1,
        ease: Power1.easeIn
      },
      0.2
    );

    if (index == 2 && slideIndex == 1) {
      tl2.play();
    }
    if (index == 2 && slideIndex == 2) {
      tl2.play();
    }
}

 

 

Can someone help me and put me on the right track

please see my fiddle:  https://jsfiddle.net/jqk753m7/5/

See the Pen by jqk753m7 (@jqk753m7) on CodePen

[OSUblake]

This is selecting everything in your document that matches. That's why all your slides have played.

var workTitle = $(".title");
var workContent = $("p");

 

It's better to create your animations ahead of time for something like this. Using jQuery's .map() method is an easy way to create an array-like list of objects (timelines).

 

When a slide loads, use the index to play that animation. When a slide leaves, use the next slide index to pause the animation in its starting state so it will play all the way from the beginning when loaded.

 

See the Pen PKVLyW?editors=0010 by osublake (@osublake) on CodePen

 

 

[raizo]

so what did you do to trigger the elements in view? "slideElements" ?  I used your code, but all slides still seems to be loaded at once. Is it because of the declaration, i might did the nesting wrong.

 

 

*update i got it working

I changed the array [nextSlideIndex]

function resetAnimation(anchorLink, index, slideIndex, direction, nextSlideIndex) {
   slideAnimations[nextSlideIndex].pause(0);
}

 

to

function resetAnimation(anchorLink, index, slideIndex, direction, nextSlideIndex) {
    slideAnimations[slideIndex].pause(0);
}

 

[raizo]

Now I want the animation to run once per slide and not to repeat everytime. so I thought of removing the function resetAnimation would do the job. But it seems if I do that all the slides will load at the same time. What might be the cause of this?

[OSUblake]

You can do this. Check if animation's progress value is 0. If it is, that means it hasn't played, so play it.

 

$("#fullpage").fullpage({
  controlArrows: true,
  slidesNavigation: true,
  slidesNavPosition: "bottom",
  afterSlideLoad: playAnimation,
  //onSlideLeave: resetAnimation // not need anymore
});

function playAnimation(anchorLink, index, slideAnchor, slideIndex) {
  
  if (!slideAnimations[slideIndex].progress()) {
    slideAnimations[slideIndex].play();
  }
}

 

See the Pen VMYeZW by osublake (@osublake) on CodePen