Jump to content
Search Community

A way around not creating a new timline on hover

ainsley_clark 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

Hi there, 

 

Something fairly basic to ask.

 

I have a timeline, which animates a card:

 

    var craftsRolloverTL = new TimelineMax({});
    craftsRolloverTL
        .to(".crafts_box img, .crafts_shadow", 0.5, {y: -10, opacity: 0, ease:Power2.easeInOut}) 
        .to(".crafts_title", 0.7, {y: -260, ease:Power2.easeOut}) 
        .staggerFrom("#crafts li", 0.5, {x: 100, opacity: 0, ease:Sine.easeOut}, 0.2) 

 

Each time the user rolls over a card, this timeline is to play, and mouse out, timeline to reverse.

 

    $(".crafts_box").hover(function(){
        console.log('over');
        
        }, function(){

    });

 

Now - the problem, I don't want to create three separate timelines (there's 3 cards) for each card. I was thinking about creating a function passing in the particular box as a parameter, but this means a timeline is created every time the user hovers over which I know isn't good practice.

 

Is there a workaround? I hope this makes sense.

 

Many thanks.

Link to comment
Share on other sites

Creating a timeline for each element is fine. You'll then play/reverse those timelines on hover. Sounds like you'd want to use a loop to create the timelines. jQuery's each() is good for that type of thing. Here's a demo from another thread, but shows you how it works.

 

See the Pen xWRLxN by PointC (@PointC) on CodePen

Make sense?

 

Happy tweening.

:)

 

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