Jump to content
Search Community

GSAP timeline over element

AllenIVe test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

im try to fire timeline when a li it's hover, so i create a var with my timeline, and with event.delegateTarget to find children and not all with .CLASS

this is my code

 
$(".gb-help-list ").on('mouseover', 'li', function (e) {
	console.log('mouse');
	var tl = new TimelineLite();
		 	tl.to($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut})
			.to(".line-help", 2, {width: '100%', ease: Power4.easeOut}, "-=1");

}).on('mouseout', 'img', function (e) {
    TweenLite.to($(e.delegateTarget).find('span'), 1.5, {opacity:0});
  });

I don't see any error in console, but this : o($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut} doesn't fire....

anyone can helpme?

Thx in advance

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

It would be great if you could provide a very simple CodePen demo for us to test.

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

I'm not terribly familiar with using event.delegateTarget so it would really help to see it all in a working environment.

 

Perhaps you can get some ideas from:

http://codepen.io/GreenSock/pen/af138af51e5decd43c3c57e8d60d39a7?editors=0010

http://codepen.io/jonathan/pen/KdYqWo

  • Like 1
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...