[Play/Reverse Animation Toggle Partially on Hover, Fully on Click]

Another typo! Thanks, that did it!

 

Now just getting it to play nicely with smoothstate.js...

[Play/Reverse Animation Toggle Partially on Hover, Fully on Click]

Sorry, let me clarify. On the site this is being used for there are two pages, home and content. The #main-toggle switch on the triggers an ajax function to load the content for those pages without having to reload the header where the #main-toggle switch is located, so its animation state can be preserved. So, the book is closed on home and played through on content.  If a user comes to the homepage of the site, the function works fine. But, if they go straight to the content page, I'm going to add a conditional statement to the php template for the content page so that this #main-toggle switch already has the "open" class applied on page load. I would like it so that IF this class is already applied, the animation will play through automatically, or just default to starting in the open (end) position automatically. I suppose it doesn't necessarily need to be done with a class, it just seemed like the best way to bake it into the template.

[Play/Reverse Animation Toggle Partially on Hover, Fully on Click]

Ah that helps a lot, thanks! It solves the partial playback part, although it killed the click toggle functionality. I forked your Codepen and got the clicking to work as well: 

See the Pen XKgOGZ by bgamm (@bgamm) on CodePen

 

One follow up question. If I apply a class, "open", to the book/toggle element when it's on a particular page, how can I set the book to already be in the open state (at the end of the timeline)?

 

I added this line but it doesn't really do the trick:

if ( $trigger.hasClass( ".open" ) ) {
  this.animation.tweenTo(this.animation.duration() * 1)
};

[Play/Reverse Animation Toggle Partially on Hover, Fully on Click]

I have a timeline animation of a book opening and closing. I would like for it to partially open and close on hover (play a percentage of the timeline), and fully open or close on click/tap. Currently I can only get the hover function to play/reverse the animation in full. On the full site, this button acts as a toggle switch between the homepage and the main content page (which is loaded via ajax so the animation state is preserved). Codepen here: 

 

I was looking at this similar question here but I cannot get it to work for me. Something about the way I'm referencing the timeline variable isn't working. http://greensock.com/forums/topic/12086-play-a-percentage-of-a-timeline/

See the Pen bZRQww by bgamm (@bgamm) on CodePen