Jump to content


adding controller class to control playback example

Moderator Tag
Go to solution Solved by Rodrigo,

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

Dear all, I realise this is a long shot, but I'm hoping it might work ... here's the deal.


I'm learning GSAP & Java and loving it. I have the opportunity to present an idea that i'm incubating, with heavy use of GSAP & a navigational type controller (think modern version of "The Golden Compass" ) for a education programme for under privileged kids (educate & have fun at the same time)


I've found a controller class that works great as an example, and am first trying to "merge" it with GSAP Control Playback Example (as

See the Pen sLavi by GreenSock (@GreenSock) on CodePen

), with the principle that if I can get that to work, that's good enough for me t build my animations and present the idea.


I have successfully combined both examples into a single HTML & .JS file. Both run in their own accord ... I'm now trying to bind (is that the right expression?) the GSAP buttons to the appropriate data-nav objects. The Codepen does not work, but illustrates where I have got to.


I have taken id=pauseBtn and am trying to bind it to data-nav-navitemtext='Pause' object. I'm at a point where GSAP still runs, the data-nav still works, but the pauseBtn.onclick fails.


I don't know if I'm trying to do the impossible, or if im missing something really obvious. I realise I should really go learn more before I try do this, but if I do I'll miss the opportunity to pitch, and hopefully help some people in need ... so as said ... a long shot, but I'd appreciate any help you can give.


Thanks in advance for your time



See the Pen Eypxpz by gilesht (@gilesht) on CodePen

Link to comment
Share on other sites

Hi and sorry for the late response  :oops:


There are a few things throwing errors in your codepen sample. First you didn't include the GSAP files and also is this code right here:

// navigation UI
var piemenu = new wheelnav('piemenu');
piemenu.clockwise = false;
piemenu.wheelRadius = piemenu.wheelRadius * 0.83;

The class wheelnav is not defined or included anywhere, so it throws an error.


Also the target id does exists but there's no style definition for it so is basically a div with 0px of width and height, and doesn't have a background color neither. Use this css on the codepen and you should see it:

#animlogo {
  width: 50px;
  height: 50px;
  background: blue;

Finally comment out or remove the wheelnav code and the codepen should work. Then you can add the controller code from the GreenSock collection's codepen.


Let us know if you have more questions.


Happy Tweening!!

  • Like 3
Link to comment
Share on other sites

Hey Rodrigo, thanks for your response


I had to put the first pen up in a rush, so didn't have time to set all the includes. please see my NEW CODEPEN here 

See the Pen EyZxLO by gilesht (@gilesht) on CodePen

. This one illustrates what I'm trying to achieve. I was thinking about trying WheelNav's callback functionality. It works to the extent that it will post an alert, but I'm stuck when I try substituting a tween event.


At this point however, the only way I can get both GSAP & WheelNav to appear, is to declare GSAP after WheelNav, which is obviously not going to work. I hope this makes of an easier illustration

Link to comment
Share on other sites

  • Solution

It's working for me when I declare the  GSAP instance before the wheelnav. Keep in mind that JS reads the entire code before it's executed, saving variables into memory to access them later. Perhaps the issue comes when clicking on the text element of the pie-nav?. I see that it has no effect whatsoever, perhaps the developers didn't consider event handlers in the text or tspan tags. But clicking on the green part (the path tag) always triggers the function regardless of where you declare the GSAP instances. If you remove the text you'll see that it works:

<div id='piemenu' data-wheelnav
 data-wheelnav-marker data-wheelnav-markerpath='PieLineMarker'
  <div data-wheelnav-navitemtext=' '></div>
  <div data-wheelnav-navitemtext=' '></div>
  <div data-wheelnav-navitemtext=' '></div>

Also a good way to avoid such issues is to use an immediately invoked function expression (IIFE), like that you can be completely sure that everything will be read before being executed and avoid any possible conflicts. When working with jQuery I use the following:


  var animlogo = $("#animlogo"),
      tween = TweenLite.to(animlogo, 6, {left:"90%", ease:Linear.easeNone});
  // declare wheelnav
  var piemenu = new wheelnav('piemenu');
  piemenu.clockwise = false;
  piemenu.wheelRadius = piemenu.wheelRadius * 0.83;
  piemenu.navItems[0].navSlice.mouseup(function () { 
  piemenu.navItems[1].navSlice.mouseup(function () { 
  piemenu.navItems[2].navSlice.mouseup(function () { 


That basically covers everything, avoids conflicts and has the document.ready as well.
Give that a try and  let us know.

  • Like 4
Link to comment
Share on other sites

Fantastic - works a treat

Really appreciate your help Rodrigo

  • Like 1
Link to comment
Share on other sites

No problemo.


Again, sorry it took us this long to answer.


Happy Tweening!!

  • Like 1
Link to comment
Share on other sites

Very happy Tweening Rodrigo, you fix helped me answer another question on including audio player, so now I have audio powered Tweens - In your debt sir !!!

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.