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

[bgamm]

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

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

Yes, the post you referenced uses the same solution I would suggest.

You just need to make sure your timeline is a TimelineMax (not Lite) in order to use tweenTo() or tweenFromTo().

var tl = new TimelineMax({paused:true, reversed:true}); 

Then you can do:

function over(){ 
    this.animation.tweenTo(this.animation.duration() * 0.5)
  };
  function out(){ 
    this.animation.tweenTo(0)
  };

http://codepen.io/GreenSock/pen/jAwXRo?editors=0010

[bgamm]

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)
};

[Carl]

sorry, i'm not understanding the question. I added console.log("open"); to that condition and when I saw the message the animation played until the book was open. 

 

can you list the steps in detail that I have to follow to see the problem?

[bgamm]

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.

[Carl]

Thanks for the info. Very helpful.

 

I was looking at the hasClass logic you had onClick, not the one that was floating around loose.

 

There were a few things that needed tweaking.

 

1 - your condition was placed right after you defined the timeline, before it had any tweens in it (and thus no duration)

var tl = new TimelineMax({paused:true}); 
    
    if ( $trigger.hasClass( ".open" ) ) {
      this.animation.tweenTo(this.animation.duration() * 1)
    };

2 - hasClass(".open") should have been hasClass("open") no period

 

After moving the condition down to after the timeline is populated and fixing the syntax error it seems to work

 

http://codepen.io/GreenSock/pen/GqvkLL?editors=0010

 

Hit the "run" button a few times. The animation will play. remove the ".open" class in the html and it won't play 

[bgamm]

Another typo! Thanks, that did it!

 

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