Jump to content
Search Community

problem with color changes

Sined12 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

You had a logic issue. Your original code animated the changeColors object to the very same values, so nothing happened:

var colors =  {top:"#feaf70", bottom:"#feaf70"},
    changeColors = {
        color0: '#a2e0f8',
        color1: '#0faeec'
    };
	
	
tl.to(changeColors, 0.3, {
	colorProps: {
		color0: changeColors.color0,  // #a2e0f8
		color1: changeColors.color1   // #0faeec
	},
	ease: Power1.easeOut,
	onUpdate: applyProps
})

tl.to(changeColors, 0.3, {
	colorProps: {
		color0: colors.top,  // #feaf70
		color1: colors.bottom  // #feaf70
	},
	ease: Linear.easeNone,
	onUpdate: applyProps,
	delay: -.3
})

 

 

Solution

  • changeProps should hold the initial values
  • Then you tween the changeColors to the values of originalColors
  • Then you can then you can tween back to the initial values
var colors =  {top:"#feaf70", bottom:"#fc669e"},
    changeColors = {
        color0: colors.top,
        color1: colors.bottom
    };

//....

tl.to(changeColors, 0.3, {
  colorProps: {
    color0: '#a2e0f8',
    color1: '#0faeec'
  },
  ease: Power1.easeOut,
  onUpdate: applyProps,
  delay: -.3
})

//...

tl.to(changeColors, 0.3, {
  colorProps: {
    color0: colors.top,
    color1: colors.bottom
  },
  ease: Linear.easeNone,
  onUpdate: applyProps,
  delay: -.3
});

 

 

See the Pen aPgLVE?editors=0011 by mm00 (@mm00) on CodePen

 

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