Run timeline only for current element

[IslandScott]

Hi,

 

I have the following which runs an animation for certain elements but it does it for all elements instead of just the one being hovered. Any way to change it so it only applies to the current element thats being hovered, rather than all of them at once ?

 

Thanks,

 

Scott.

// Animate Image Flipper
(function($) {
  "use strict";

    var tl = gsap.timeline();
    tl.to(".top-image", {y: '-100%', duration: 0.4, ease: 'power3.inOut' });
    var tl2 = gsap.timeline();
    tl2.to(".bottom-image", {y: '-100%', duration: 0.4, ease: 'power3.inOut'});

    tl.pause();
    tl2.pause();

  $(".image-flipper").mouseenter(function(){
    tl.play();
    tl2.play();
  })

  $(".image-flipper").mouseleave(function(){
    tl.reverse();
    tl2.reverse();
  })


  })(jQuery);

 

[nico fonseca]

Hi Scott,
I recommend using encapsulated code for each image you have, so you can treat each element individually (like a component)

I have created a demo so you can see it.

I hope this helps.
 

Cheers, Nico

See the Pen 56309eaf73897ed36842da7cd99ee922?editors=1111 by nicofonseca (@nicofonseca) on CodePen.

[GreenSock]

Great advice, @nicofonseca ?

 

@IslandScott, you're creating a single timeline for everything which is why they're all animating at once. You could use a simple .forEach() loop on the elements  and create a distinct animation for each one and skip jQuery altogether: 

gsap.utils.toArray(".image-flipper").forEach(flipper => {
	let tl = gsap.timeline({paused: true, defaults: {duration: 0.4, ease: "power3.inOut"}});
	tl.to(flipper.querySelector(".top-image"), {yPercent: -100})
	  .to(flipper.querySelector(".bottom-image"), {yPercent: 100});
	flipper.addEventListener("mouseenter", () => tl.play());
	flipper.addEventListener("mouseleave", () => tl.reverse());
});

I hope that helps.

[IslandScott]

Thanks to both of you, appreciate that. Jack, your one works well but instead of the 2 animations running one after another, is there a way where i can have them running at the same time please ?

[OSUblake]

Check out the position parameter.

 

[nico fonseca]

29 minutes ago, IslandScott said:

Thanks to both of you, appreciate that. Jack, your one works well but instead of the 2 animations running one after another, is there a way where i can have them running at the same time please ?

Set position param as 0 on the last tween, and you can check the full tutorial in the @OSUblake comment ?
 

	tl.to(flipper.querySelector(".top-image"), {yPercent: -100})
	  .to(flipper.querySelector(".bottom-image"), {yPercent: 100},0);

 

[IslandScott]

Perfect. Thankyou ?

[GreenSock]

Yeah, sorry - tired brain at like 3am

 

@nicofonseca's code is exactly right - I just forgot the  0 position parameter on that 2nd animation.