Jump to content
Search Community

Run timeline only for current element

IslandScott test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

 

Link to comment
Share on other sites

  • Solution

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.

  • Like 2
Link to comment
Share on other sites

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

 

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