Jump to content
Search Community

Dynamic play function $variable.play();

timmen22 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 all,

 

I am trying to make some sort of a dynamic play function. But.. I am have some difficulties to make it work!

 

My timeline:

 var slide1 = new TimelineMax({paused: true, onComplete:slide1DoneFunc}) ;        
    var homeIntro = $(".verticalHelper");
    var text1 = $(".homeText1");
    var text2 = $(".homeText2");
    var text3 = $(".homeText3");
    var text4 = $(".homeText4");
    var clickExplore = $("#centerBottom");
    slide1.set(homeIntro,{display:"block"})
    .set(clickExplore,{display:"block"})
    .to(text1,0.5,{opacity: 1, ease:Power1.easeIn})
    .to(text2,0.5,{opacity: 1, ease:Power1.easeIn})
    .to(text3,0.5,{opacity: 1, ease:Power1.easeIn})
    .to(text4,0.5,{opacity: 1, ease:Power1.easeIn})
 
function slide1DoneFunc() {
        console.log("done!")
    } 
 

 

 

 
 

 

 
   

 

To play the timeline I am using this code: (which works, but not dynamically)

$(".play").click(function() {
    
slide1.play();
    
});    

In order to retrieve the value "slide1" I made a variable. The variable is updating once a vistor is visiting the next slide.  I want to pass the value of the variable into the play(); function. Please take a look at the code below.

$(".play").click(function() {

   $currentSlidePlay = $currentSlide.attr("id");
   $currentSlidePlay.play();  

}); 

In other words, I would like to achieve this: $variable.play();

 

It would be great if someone can help me.

 

Thanks in regards!

 

Tim

Link to comment
Share on other sites

Hi timmen22  :)

 

I'm not 100% clear on what you're trying to do here. I'm assuming from the name of the elements that this is some sort of forward/backward slider? If that's the case, wouldn't there need to be some sort of 'next' and 'back' button rather than a single play button?

 

In any case, there are multiple ways to go about creating a slider. You can create a timeline for each one, clear() the existing timeline, create a master timeline and play between labels etc. If you use the search feature up top, you can find lots of threads about sliders and plenty of CodePen demos too.

 

To give you the best advice, we'd need to see your live code so we can see exactly what you're trying to do. Could you please create a simple CodePen demo for us? Here's some info about that.

 

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

 

Happy tweening.

:)

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