Jump to content
Search Community

animation to start when slide is active in slider

deanpien test
Moderator Tag

Go to solution Solved by deanpien,

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

New to GSAP and Jquery.  Very excited about the possibilities. I have been trying for days to make an animation work inside a slider without success. The animation works once when I use the window.onload method but this method needs window reload to work again. Sofar I have been working on giving the active slide (as in "visible slide") the css class of "show" by tying it to the previous and next button of the slider. Either the code is incorrect there or at the point of the function call (function dog) or the whole idea is just a no go.  Any help is much appreciated!

 

note: the 3rd slide is the one that is supposed to animate. 

post-32690-0-90393600-1417731954_thumb.png

See the Pen WbreMw by anon (@anon) on CodePen

Link to comment
Share on other sites

In the console there is an error about one of your selectors "#slider. slideshow .show". Looks like the period needs moving

 

The "show" class isn't applying unless you have one set to show at the start. The next/prev selector looks for a show element, removes the show class then selects the sibling of that element. If there is no show element to begin with, then there is no sibling to select.

 

This bit of code

if ( $("li").eq(2).css("show")=== true) {
  function dog(){
    var dog = document.getElementById('dog_2');
    TweenMax.to(dog, 2, {left:"325px", repeat:2, yoyo:true});
  }
}
is just inside your document ready function. I would imagine you want this to trigger when your page changes. And even if this resolves as true, it just creates a dog() function, and doesn't execute it.
  • Like 2
Link to comment
Share on other sites

  • Solution

I've added the class "show" to the first li element. 

Corrected this:  "#slider .slideshow .show"

 

How do I trigger the dog()function on page change? I am guessing I have to move it elsewhere?..

 

Thanks for your help. Really appreciated!

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...