GSAP Version Question

[bluecube]

I found this pen as I was searching for a solution in the forums. It's using Ver. 1.18.4 and it helped me understand something I was trying to achieve but I noticed that the part for toggling the 'show' class doesn't work with newer GSAP versions specifically 2.0.2. I even changed that class toggling section to the code below but it doesn't help. Is there something I'm missing or how would I make it work with ver 2.0.2? Thanks in advance.

 

function step_1() {
	//$article.removeClass('show')
	tl.set($article, {className: '-=show'});
}
function step_2() {
	//$('.num_' + initTabNum).addClass('show')
	tl.set($('.num_' + initTabNum), {className: '+=show'});
	

 

 

 

See the Pen NrrNqM by NeedHate (@NeedHate) on CodePen

[GreenSock]

The problem is that you've got a tween that has its "onStart" callback in the wrong place. It's in the "from" vars instead of the "to" vars:

 

//BAD: 
.fromTo($('.num_' + initTabNum), 0.75, {onStart: step_2, y: -100}, {y: 0, ease: Elastic.easeOut, immediateRender:false});

//GOOD:
.fromTo($('.num_' + initTabNum), 0.75, {y: -100}, {onStart: step_2, y: 0, ease: Elastic.easeOut, immediateRender:false});

 

Does that help?

[bluecube]

Yes, that was the issue. Thank You

[PointC]

Hi @bluecube 

 

That's a neat little content slider you found. I took that design and made some modifications. My version doesn't use jQuery, callbacks or class changes. It also accommodates varying content heights. Maybe it will be helpful for your project. 

 

 

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

Happy tweening.

 

[GreenSock]

Nice work, @PointC! 

 

The only thing that kinda bugged me usability-wise was that if I clicked on another menu item before the animation completes, it basically ignored my click, so it felt unresponsive. As a user, I'd prefer this behavior: 

 

See the Pen ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Just a minor tweak, but it just "feels" more natural to me  Now you can click around as quickly as you want. 

 

[PointC]

uh-oh, I'm in a weird weekend contest with Jack. ?

 

It's so strange that you made that change as I was literally just thinking about making another version that wouldn't make the user wait and my email chimed with your post. Now I don't have to do the work. 

 

Well done. 

 

[GreenSock]

Let's just keep going back and forth enhancing it - this will be fun!  

[PointC]

7 minutes ago, GreenSock said:

Let's just keep going back and forth enhancing it - this will be fun!  

 

I would, but I have a team coming in to sweep my office for bugs. I need to find out how you were reading my mind earlier. Perhaps our Moderator badges contain a chip that monitors brainwaves? 

[PointC]

okay, the team finished their sweep but didn't find any bugs. They tell me that GreenSock probably has a spy satellite to monitor all the Moderators. They recommended I build an underground bunker for enhanced security.

 

I thought the bubble slider might look neat if it stretched over to the new target rather than just floating over to it. Here's what I added.

 

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

 

Please don't melt my brain with your addition(s).  I can only handle so much GreenShock on the weekend. 

[GreenSock]

What would we do without your sense of humor around here, Craig? 

 

By the way, we already anticipated your replies via our Neuropathway Predictive Algorithm (coming in the next major version of GSAP), so I have been enjoying those enhancements you made to the bubble slider a few hours before you actually made them. Nice work!

 

And that other project you'll be releasing in a few months turns out really well, so congrats ahead of time! Your animation skills continue to grow at breakneck speed. 

 

[OSUblake]

21 minutes ago, GreenSock said:

And that other project you'll be releasing in a few months turns out really well, so congrats ahead of time!

 

What if he does nothing for a few months? Will the project complete itself? ?

[GreenSock]

9 hours ago, OSUblake said:

What if he does nothing for a few months? Will the project complete itself? ?

 

The Neuropathway Predictive Algorithm already factored that in. Oh, it WILL be be completed. There ain't no way @PointC is gonna do nothing for a few months. He'd go crazy.  

[PointC]

Well, the Neuropathway Predictive Algorithm certainly explains a lot. Apparently the Rudimentary Phonics Engine from a couple years ago has morphed into something much more intelligent. With this new technology, GSAP will soon become the ultimate power in the universe. Resistance is futile.

 

I thought the other thing this demo needed was more cowbell (Google it if you don't get the reference), but I couldn't figure out how to add that so I added some impact bursts instead.

 

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

 

I like the way this turned out. I may tweet it at CodePen tomorrow and see if I can get it picked. Somebody may find it useful and I always enjoy promoting GSAP over there.

 

[OSUblake]

I like the stretchy animation you did. Reminds me of some stuff from Material Design.

 

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1-3y3zLHPlV3wg-v2CmlB44qg9nLmldet%2F04-elasticity-spectrum.mp4

 

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1PONTdRB2Ywa5Meme5pqbV35bRKFrqHLO%2F04-elasticity-basil.mp4

 

I like this calendar. If you click in the same row or column, then it will stretch to it, otherwise it will fade out and then fade in to where you clicked.

 

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1KL_-_R_BNLknpF2PtR-z7999Yl1d3Zwk%2F04-elasticity.mp4