Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Susan

GS Playback Functions

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

I was trying to experiment GS playback functions with this tutorial - https://ihatetomatoes.net/module-1/g101-controlling-timeline-playback-0747/.

 

However, this pause function doesn't pause.

 

tl.pause();

 

And this play function doesn't play.

 

$('#bPlay').on('click',function(){
  tl.play();
})

 

Please let me know the errors that I have rendered, thank you!

 

See the Pen PEqxZg by susansiow (@susansiow) on CodePen

Link to comment
Share on other sites

In your example you are trying to use methods of variable 'tl' which is not defined anywhere. If you press F12 to open developer console, you can see the error.

 

It will be great if you take my previous advice and take some steps to work on your basics of JavaScript. We always try to help anybody that posts question on this forum but it is going to be extremely difficult for us if we spend time answering all the basic JavaScript questions. It will just encourage other users to start posting similar questions. Not saying don't ask questions but we will save a lot of time if you work on the basics first. There are plenty of tutorials on YouTube and sites where you can learn things step by step.

 

You will also save a lot of time and confusions in future if you go ahead and clear up your basics and practice how to debug any errors.

  • Like 2
Link to comment
Share on other sites

I agree with Sahil in that a rudimentary foundation of JavaScript will really help you learn GSAP.

 

As for the current issue, typically people use "tl" to reference a timeline. 

In your demo you have a single TweenMax tween that isn't assigned to a variable so there is not way to reference that tween and tell it what to do.

 

The following code should fix your problem

var tl = TweenMax.from("#box1", 4, {opacity: 1, rotation:360, ease: Power0.easeNone});
tl.pause();
$('#bPlay').on('click',function(){
  tl.play();
})

 

Also, since you are using one of Petr Tichy's premium courses (which are great) I'd suggest reaching out to him if there is any confusion. He is a super smart guy and very friendly. I know he treats his customers well.

 

 

 

 

 

 

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