GSAP active class on click should animate the buttons

[DD77]

Is working quite ok, the only requirement is making the buttons to animate with GSAP instead than css.  On click I should make the button active with width and height 96px. By default the first element should be always active.

I put together this code (is not on the demo ) which is not working fine.
 

    $(".app-promo-img-align:first").addClass("active");
	TweenLite.to('.app-promo-img-align.active a', 0.4, {width:'96px', height:'96px'})

    var button = $('.app-promo-images').find('.app-promo-img-align')

    button.onclick = function(e) {
        e.preventDefault;
		$(this).addClass("active");
        $('.app-promo-img-align.active').removeClass("active");


        if ($(button).hasClass('active')) {
            TweenLite.to('.app-promo-img-align.active a', .5, {width:'96px', height:'96px', ease: Power3.easeOut })

        }
        else{
			TweenLite.to('.app-promo-img-align a', .5, {width:'80px', height:'80px', ease: Power3.easeOut })
        }
    }

 

See the Pen BwgLMq by davide77 (@davide77) on CodePen

[Sahil]

You have too many things going on in your pen. On line 80, which I have commented out, you were adding active class then again you were doing it on line 107.

 

You can animate classes with GSAP, by adding or removing class using className parameter. When you use

 

TweenMax.to($mainNav.find('li'), 0.5, {className: '-=active'});

 

You are telling GSAP to remove class active from this element. If you use plus sign, GSAP will add that class to the element along with already existing classes. Using className will also animate all properties that can be animated, so basically any difference that causes due to class change will get animated.

[DD77]

@Sahil thanks I created a new pen and I added a new button function that I play and reverse but doesn't work on click. could you please check?
 

See the Pen LzKxJP by davide77 (@davide77) on CodePen

 

[Sahil]

Also, you were repeating same animation on each element and adding delay manually. I have updated demo with staggerFromTo tween, which basically repeats same animation on each element with delay that we pass as 5th parameter. Same thing can be done with staggerTo and staggerFrom tweens.

 

[DD77]

Could you fork it please?

[Sahil]

19 minutes ago, DD77 said:

@Sahil thanks I created a new pen and I added a new button function that I play and reverse but doesn't work on click. could you please check?

 

Not really good approach, you can't use same timeline on each element and expect different result. Take a look at my demo and follow it.

 

Also, you are not really on right track. I would suggest to take a short break, follow few tutorials from GreenSock's YouTube channel. Otherwise you will just stay confused and miss whatever deadlines you are trying to meet.

[Sahil]

Sorry for the confusion, I did attach demo in my reply but not sure how it got stripped.

 

See the Pen VMJPKJ by Sahil89 (@Sahil89) on CodePen

 

[Carl]

@Sahil Thanks for all the wonderful advice you shared!

 

@DD77 I just want to re-iterate Sahil's request for a simple demo.  Its very difficult and time consuming to have to look through 100+ lines of code to find a problem. Even though 80% of the code probably has nothing to do with the issue, it still needs to be considered and gets in the way of focusing on the issue. The more you can reduce and isolate the problem, the quicker and more accurately we will be able to find the proper solution. Thanks!

 

Although Sahil, provided solutions that work within your requirements / setup, setting and removing classes is kind of a hold-over from css-driven animation. I prefer just creating animations (tweens or timelines) for each element that you can play() or reverse() when needed.

 

Below are 2 awesome demos from Blake that show that I file under:  "click on one thing to animate and make it active and close the current active thing".

 

Very little code and very cool.

 

 

 

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

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