Jump to content
Search Community

Fade between array of colours

aok 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

I'm attempting to fade between an array of colours – so the element would infinite fade between all the colours.

 

var colours = ['#ca4234', '#cec6be', '#6c786e'],
	homeAnimationTLArray = [];

// eslint-disable-next-line no-undef
var homeAnimationTL = new TimelineMax({
	repeat: -1
});

colours.forEach(function(item, index) {
	var tl = new TimelineMax(); // eslint-disable-line no-undef
	tl.to('.home__splash', 1, {
		backgroundColor: item
	});
	homeAnimationTLArray.push(tl);
});

homeAnimationTL.add(homeAnimationTLArray, 0, "sequence", 0.5);

This doesn't seem to work – it seems to do some fading but it abruptly stops then starts again and doesn't seem to include all the colours?

 

Any thoughts?

Link to comment
Share on other sites

Hello aok and welcome.

 

I think you'll find .invalidate() to be useful :) 

 

var colours = ['#ca4234', '#cec6be', '#6c786e'];

// eslint-disable-next-line no-undef
var homeAnimationTL = new TimelineMax({
	repeat: -1,
  onRepeat: function() { this.invalidate(); }
});

colours.forEach(function(item, index) {
	homeAnimationTL.to('.home__splash', 1, {
		backgroundColor: item
	});
});

 

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

  • Like 3
Link to comment
Share on other sites

  • 5 months later...

Just chasing this again. Since upgrading to v3 this no longer seems to work. It appears to just do one colour transition and stop completely.

 

I've given the migration guide/forums a read but can't see where I'm going wrong?

 

let colors = ['#ffd847', '#6c804a', '#e8796b', '#0079a6', '#e0b07f', '#888891'],
	tlArray = [];

let tlHome = gsap.timeline({
	repeat: -1,
	onRepeat: function() {
		this.invalidate();
	}
});

colors.forEach(function(color, index) {
	let tl = gsap.timeline();
	tl.to('div.home__layout div.left', 5, {
		backgroundColor: color
	});
	tlArray.push(tl);
});

tlHome.add(tlArray, 0, 'sequence', 0.5);

 

Link to comment
Share on other sites

The problem is this line: 

tlHome.add(tlArray, 0, 'sequence', 0.5);

There aren't any 3rd and 4th parameters in GSAP 3's add() method. Seemed wasteful, frankly, and we almost never saw anyone use it in earlier versions. Plus it's very easy to accomplish in other ways...

 

Are you trying to sequence those with 0.5 seconds between each?  It'd probably be simpler to do this: 

let colors = ['#ffd847', '#6c804a', '#e8796b', '#0079a6', '#e0b07f', '#888891'],
	duration = 5,
	gap = 0.5;

let tlHome = gsap.timeline({
	repeat: -1,
	repeatRefresh: true
});

colors.forEach(function(color, index) {
	tlHome.to('div.home__layout div.left', {
		duration: 5,
		backgroundColor: color
	}, (duration + gap) * index);
});

There are actually a bunch of ways to do it. Does that help? 

  • Like 2
Link to comment
Share on other sites

10 minutes ago, GreenSock said:

There are actually a bunch of ways to do it. Does that help? 

Yes this helps loads!

 

If I just wanted it to continually transition between those colours (without a gap/delay) how would I achieve this? I have an issue where on repeat it quickly jumps to white (default background colour) rather than a continuous transition.

Link to comment
Share on other sites

1 minute ago, aok said:

If I just wanted it to continually transition between those colours (without a gap/delay) how would I achieve this? I have an issue where on repeat it quickly jumps to white (default background colour) rather than a continuous transition.

Do you have a minimal demo that you can show us? It makes helping you much easier.

Link to comment
Share on other sites

Yep, sorry, that's a side effect of the tweens all rendering when the playhead returns to the start (after being invalidated via the repeatRefresh), thus they lock in the first color as their starting values. That'll be fixed in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

Here's an unconventional approach that taps into the gsap.utils.interpolate() method, as you can feed it an array of values (including colors) and it'll interpolate between them all, and then we use that in a modifier: 

// notice I copied the first color and added it to the end so that there's a smooth transition when repeating.
let colors = ['#ffd847', '#6c804a', '#e8796b', '#0079a6', '#e0b07f', '#888891', '#ffd847'],
    // build an interpolator function that interpolates between all the colors. We just feed in a progress value between 0 and 1 to get the corresponding color.
    interp = gsap.utils.interpolate(colors);

gsap.to("div.home__splash", {
  duration: 5 * colors.length,
  repeat: -1,
  backgroundColor: "red", // <- this doesn't matter because we're gonna use a modifier to hijack it. We just need something here for the modifier to grab.
  modifiers: {
    backgroundColor: function(value, target, targets) {
      return interp(this.ratio);
    }
  }
});

See that here:

See the Pen 9843948bd31512ef4cccba9ce206d299 by GreenSock (@GreenSock) on CodePen

 

Here's another approach using keyframes: 

let colors = ['#ffd847', '#6c804a', '#e8796b', '#0079a6', '#e0b07f', '#888891'];

// set the initial color immediately.
gsap.set("div.home__splash", {backgroundColor:colors[0]}); 
// now move the first color to the LAST position in the Array so that when it repeats, there's a smooth transition.
colors.push(colors.shift());

gsap.to("div.home__splash", {
  keyframes: colors.map(color => ({backgroundColor: color})),
  duration: 1 * colors.length,
  repeat: -1
});

See that here: 

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

 

There are a bunch of other ways to do this too. I'm just sharing a few :)

 

  • Like 4
Link to comment
Share on other sites

15 minutes ago, GreenSock said:

There are a bunch of other ways to do this too. I'm just sharing a few :)

 

 

Whoa this is super useful. Would my original method work in an upcoming release? Or does it still require some extra work?

Thank you so much!

Link to comment
Share on other sites

1 minute ago, aok said:

Whoa this is super useful. Would my original method work in an upcoming release? Or does it still require some extra work?

Which original method? Not the very first one in this thread, no, because there's no 3rd/4th parameters in the add() method. But yeah, you can totally just sequence individual tweens in a timeline, absolutely. Feel free to test that prerelease version - that's why I provided the URL, so if you want to use the repeatRefresh trick you'll be able to. 

Link to comment
Share on other sites

1 minute ago, GreenSock said:

Which original method? Not the very first one in this thread, no, because there's no 3rd/4th parameters in the add() method. But yeah, you can totally just sequence individual tweens in a timeline, absolutely. Feel free to test that prerelease version - that's why I provided the URL, so if you want to use the repeatRefresh trick you'll be able to. 

This one, sorry: 

 

Link to comment
Share on other sites

17 hours ago, GreenSock said:

Here's another approach using keyframes: 


let colors = ['#ffd847', '#6c804a', '#e8796b', '#0079a6', '#e0b07f', '#888891'];

// set the initial color immediately.
gsap.set("div.home__splash", {backgroundColor:colors[0]}); 
// now move the first color to the LAST position in the Array so that when it repeats, there's a smooth transition.
colors.push(colors.shift());

gsap.to("div.home__splash", {
  keyframes: colors.map(color => ({backgroundColor: color})),
  duration: 1 * colors.length,
  repeat: -1
});

 

This is amazing, by the way. Thank you!

 

@Jack Yep, that's exactly what I meant. So the repeatRefresh trick would work in the latest beta but I think this keyframe approach is much better.

 

Appreciate all your help.

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