I'm new to GSAP and i want add a hover each item across all pages if my anchor tag or button has a class name of "primary-btn" and whenever it hovers cursor will change to view more

[mvaneijgen]

I'm not sure what the question is. My philosophy is if it works it works. Otherwise just try forking your code and try other solutions. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

But in this case everything seems to work right. You are still using the old V2 syntax and I would still rather use the scale property as per my previous example https://jsfiddle.net/hjd1g597/

 

Again if it works it works, so don't sweat it with what could have been, that is experience and will come with time. Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

This is the simplest approach I know for this:

See the Pen bGZedyZ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Louienator]

hi @mvaneijgen, Good day.. I'm trying to achieve the change text color effect when hovering on the button. Are these correct?

fundRaiserColor.to(this.querySelector('.ta-fundraiser__button'), 0.6, {
                css: {
                    background: '#1DBDC7',                
                    color: 'white'
                },
                ease: 'expo.out'
              });

Thank you so much.. apologies for not putting it to fiddle though. 

 

[mvaneijgen]

fundRaiserColor.to(this.querySelector('.ta-fundraiser__button'), 0.6, {
  css: {
    background: '#1DBDC7',                
    color: 'white'
  },
  ease: 'expo.out'
});
  
// Target CSS properties direcly 
fundRaiserColor.to(this.querySelector('.ta-fundraiser__button'), {
	duration: 0.6,
	backgroundColor: '#1DBDC7',
	color: 'white',
	ease: 'expo.out'
});

You can target CSS properties directly in GSAP you don't need the CSS object.