Jump to content
Search Community

if else not working without .reverse

smallio 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 Guys,

 

So I'm making a little homepage mockup in webflow for a client. I had the menu (the plus symbol) opening and closing perfectly with a timeline and the classic play & reverse method. I wanted to fine tune the easing on the reverse and found it was just easier to make another timeline to do so. That's worked great, my problem is now my if, else loop only works the first time (or for 2 clicks).

 

Here's the actual site - http://miledigital2.webflow.io/

 

I've pulled everything out and put it in a codepen, minus the assets to make it easier to see the problem.

 

Can anyone spy any issues?

 

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

tl.fromTo($("#leftSide92Percent"), 1, {width:"92%"}, {width:"50%", ease: Expo.easeOut}, 0)

tl2.fromTo($("#leftSide92Percent"), 1, {width:"50%"}, {width:"92%", ease: Expo.easeOut}, 0)

var timesClicked = 0;

$("#oneThird").click(function() {
timesClicked++;
  
if (timesClicked%2==0) {
  
tl2.play() 
} else { 
tl.play()}
  
})

 

Cheers,

Will

See the Pen Nyyemp by smallio (@smallio) on CodePen

Link to comment
Share on other sites

Hi @smallio

 

That click doesn't work a second time because the timelines have already played. You can solve it by playing the appropriate timeline from the beginning like this:

 

if (timesClicked%2==0) {
	tl2.play(0) 
} else { 
	tl.play(0)}
})

 

That will make a harsh jump if you click too rapidly though. My recommendation would be one timeline and simply play/reverse on click.

 

Hopefully that helps a bit. Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

31 minutes ago, PointC said:

That will make a harsh jump if you click too rapidly though. My recommendation would be one timeline and simply play/reverse on click.

 

 

Thank you! :) What would you recommend doing if I wanted to do this method but change the easing on the reverse? Is that possible?

 

Cheers,

Will

Link to comment
Share on other sites

There would be a few ways to go about using a different ease for play and reverse. Here are a few threads that have good information.

 

https://greensock.com/forums/topic/9229-how-to-apply-different-easing-of-animation-normal-and-reverse/

https://greensock.com/forums/topic/8040-change-easing-for-timeline-reverse/

https://greensock.com/forums/topic/11702-reverse-elastic-ease-in-no-ease-reverse/

 

If it were me, I'd probably  just change the tween ease to Linear and then tween the timeline back and forth on click with the .tweenFromTo() method. You can then use a different ease for each direction. Here's a fork of your pen with that possibility. I just used a Bounce ease so it's really obvious what's happening.

 

See the Pen VQQJzM by PointC (@PointC) on CodePen

 

Hopefully that helps a bit. Happy tweening.

:)

 

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

1 hour ago, PointC said:

If it were me, I'd probably  just change the tween ease to Linear and then tween the timeline back and forth on click with the .tweenFromTo() method. You can then use a different ease for each direction. Here's a fork of your pen with that possibility. I just used a Bounce ease so it's really obvious what's happening.

 

This is so sick!!! How did I not think of this lol...

 

Thank's again, you're a legend.

 

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