Jump to content
Search Community

Tweening back to original value

ainsley_clark 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 all,

 

Im creating a navigation bar that pops out from the right hand side, within it are dots (.circle) that's basically a vertical nav. 

When the user hovers over the navigation bar the dots expand and change their background colour. 

 

var navTL = new TimelineMax({paused: true});
navTL
  .to(".circle", navTime, {scale: 4.2, borderRadius: 3, backgroundColor: "#232021"})

 

$('nav').hover(function() {
  navTL.play();
}, function(){
  navTL.reverse();
});

 

Once the user is in the navigation bar, The dots (.circle) background colour should change again upon hover. 

 

$('.circle').hover(function() {
  TweenLite.to($(this), 0.2, {backgroundColor: "#f15a29", ease:Power2.easeOut});
}, function(){
  TweenLite.to($(this), 0.2, {backgroundColor: "#232021", ease:Power2.easeOut});
});

 

It changes, which is fine but when the user closes the navigation bar, the dots always go back to the darker-colour (#232021) instead of their original colour when loaded in the DOM (#958f8f).

 

Many thanks in advance,

 

Ainsley. 

 

 

Link to comment
Share on other sites

Hi Ainsley,

 

It's always preferable to have a reduced case demo as it helps us tinker with your setup and spot any relevant code that might be causing an issue.

 

Here, I think I can guess what's going on. Bear in mind I have no experience with jQuery, this is all guesswork on what's going on.

 

You see where you wrote the code for the hover on the individual dots? There you are creating new tweens, and GSAP will record those values in the DOM element. So, when you over out of the button you're telling it to have a background color of (#232021) but at no point when closing the whole navigation bar, you tell it to clear those transformations. The easiest way that I can think of to solve your issue is to clear all of your buttons of any inline styles created by GSAP from your elements with ClearProps (look close to the bottom of the page).

Link to comment
Share on other sites

Hi Dipscom,

 

Many thanks for your reply and the indication of using clearProps.

I have tried setting the navTL to clear props on reverse like so:

 

$('nav').hover(function() {
     navTL.play();
}, function(){
     navTL.set(".circle", {clearProps:"backgroundColor"});
     navTL.reverse();
});

 

This works reversing, but has some unexpected results going back in.

 

You can see the animation here: http://www.ainsleyclark.com/test/index.html with the code I showed above. 

 

Thanks once again.

Link to comment
Share on other sites

You will want to clear the props after the animation is reversed. Not before.

 

Try something like:

// wherever you create your timeline
var navTL = new TimelineMax({onReverseComplete:clear});

function clear() {
	TweenMax.set('.circles', {clearProps:'backgroundColor');
}

 

  • Like 1
Link to comment
Share on other sites

Hi Dipscom,

 

Thanks for your reply again. Upon rolling over the link, the .circle(s) still dont go back to their original colour.

I have updated the link I gave you with the code below.

 

 var navTL = new TimelineMax({paused: true, onComplete:clear});

    $('.circle').hover(function() {
        TweenLite.to($(this), 0.2, {backgroundColor: "#f15a29", ease:Power2.easeOut});
    }, function(){
        TweenLite.to($(this), 0.2, {backgroundColor: "#232021", ease:Power2.easeOut});
    });

function clear() {
  TweenMax.set('.circles', {clearProps:'backgroundColor'});
}

 

Thanks again.

  • Like 1
Link to comment
Share on other sites

Ohhh so close!

 

We're getting there Ainsley. Didn't you say you wanted the colours to revert when the nav bar closed? As in, the timeline has finished its animation in reverse?

 

// You wrote:
var navTL = new TimelineMax({paused: true, onComplete:clear});

// The gotcha is that you want to 'clear' onReverseComplete
var navTL = new TimelineMax({paused: true, onReverseComplete:clear});

 

That should do the trick. :)

 

Link to comment
Share on other sites

Wow thank you for both of your replies.

 

@Dipscom - surprisingly, even the class change it didn't work!

@Mikel - you have actually solved one issue that I was having and I didn't even mention it! Legend.

 

What happens if we change the background colour of the buttons though? How do we revert back to the original colour?

 

Thanks again.

 

See the Pen QZXWbB by ainsleyclark (@ainsleyclark) on CodePen

 

Link to comment
Share on other sites

You could tween it back to the original color when you hover out or use clearProps. 

 

$("button").each(function() {
  $(this).hover(
    function() {
      TweenMax.to(this, 0, { backgroundColor: "red", ease: Power1.easeOut });
    },
    function() {
      TweenMax.to(this, 0, { color: "black", ease: Power1.easeOut });
      TweenMax.set(this, { clearProps: "backgroundColor" });
    }
  );
});

 

Happy tweening.

:)

  • Like 3
  • Thanks 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...