How to Reverse Direction of Moving Background Gradient (Harlowe 2.3.16)

Authoring Twine
1

Howdy,

I stumbled upon a neat effect I’ve been working on implementing into my game. Using the Javascript from this forum post (How to create a *moving* color gradient in the background. - Twine Q&A), I can make a gradient background that moves up and down on repeat in a passage. I copy and pasted the code and it just straight-up worked. Awesome. I’ve been messing around with it though to get it to fit my needs, and that’s where I’m a little stuck. I want a gradient that basically moves ‘up’ the passage, going from white to sky blue and then stopping (as if you’re rising into the sky). I know how to change the colors and I got rid of the infinite so the animation doesn’t loop, but I can’t figure out how to 1) change the “direction” of the animation, and 2) make it so it only goes up and then stops), not down and then back up (essentially, I want to get rid of the “bounce”). I’ve tried changing a few things and can’t find a solution, entirely because I don’t really understand most of the code used in the first place.

Anyway, here’s what I have currently in my Stylesheet (the passage tag is NextNext), which produces a gradient with a down-up-stop effect:

@-webkit-keyframes NextNext {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}

}
@-moz-keyframes NextNext {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@keyframes NextNext { 
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}


}

tw-story[tags~="NextNext"] {
	background: linear-gradient(180deg, skyblue, white);
	background-size: 400% 400%;

	-webkit-animation: NextNext 7s ease;
	-moz-animation: NextNext 7s ease;
	animation: NextNext 7s ease;
}

I have a feeling the solution is very simple, but I am unfortunately a dummy. Thanks!

2

Just for clarification: The code in the linked forum post, and that you included in your question, is CSS (Cascading Style Sheet) not JavaScript.

You can remove that CSS code from your project’s Story Stylesheet area, and replace it with the following…

tw-story[tags~="NextNext"] {
	background: linear-gradient(skyblue, white);
}

…which uses the linear-gradient() CSS function to paint the background from skyblue to white.

3

Ah, thanks for the clarification. I’m primarily a writer so most code looks the same to me, whoops.

Thanks for your response! Perhaps I’m not understanding correctly and if so my apologies, but the code you provided just creates a background gradient, correct? Newbie as I am, I do know how to do that haha. I tried replacing the current code with yours just to make sure (I tried replacing all of it, as your post seems to suggest, and then just replacing the gradient section), and it does do just that: create a motionless gradient, whereas I’m looking to create a gradient that literally scrolls upward, similar to the linked forum post. The code I have does that currently, it just moves in the wrong direction (and bounces back).

4

Sorry, I misunderstood what you wanted the effect to do.

The two CSS properties that are mostly controlling how the base effect works are:

1: The background-size property.

This is used to define how large the background area is in relation to the foreground area of the HTML element its the background for. By making that background area 4 times (400%) the width & height of the foreground area it allows you to move that foreground area around like a “window” being used to see 1/16 of that background at any time.

2: The background-position property.

This is used to move the background area around, so that the HTML element’s foreground area acts like a “window”.

So the steps to create the effect you want are:

1: Create the gradient background image you want using the linear-gradient() function.

tw-story[tags~="NextNext"] {
	background-image: linear-gradient(skyblue, white);
}

2: Resize that background image so it has a height multiplier that allows the colour change gradient you’re looking for. In this example I will make the height of the background 4 times that of the HTML element itself, so by default you will only see the top 1/4 of the background image.

tw-story[tags~="NextNext"] {
	background-image: linear-gradient(skyblue, white);
	background-size: 100% 400%;
}

3: Reposition the background image so that you are seeing the bottom 1/4 of it, which should be the “whiter” area.

tw-story[tags~="NextNext"] {
	background-image: linear-gradient(skyblue, white);
	background-size: 100% 400%;
	background-position: bottom;
}

4: Now come the part where you use CSS animation to move the background image so that the “window” of the HTML element appears to move “up” the background image.

You use a @keyframes at-rule to define what is being animated and how it’s being changed, in this case it is the background-position property and its being changed from bottom to top.

@-webkit-keyframes NextNext {
	from { background-position: bottom; }
	to   { background-position: top; }
}
@-moz-keyframes NextNext {
	from { background-position: bottom; }
	to   { background-position: top; }
}
@keyframes NextNext { 
	from { background-position: bottom; }
	to   { background-position: top; }
}

5: You now need use an animation property to apply the NextNext keyframes to the element, making sure to assign:

5a. The animation-duration that controls how long it take to move from the bottom of background image to its top.

5b: The animation-timing-function that controls how an animation progresses through that duration.

5c: The animation-fill-mode that controls what happens once the animation duration finishes.

So the final CSS would look something like…

@-webkit-keyframes NextNext {
	from { background-position: bottom; }
	to   { background-position: top; }
}
@-moz-keyframes NextNext {
	from { background-position: bottom; }
	to   { background-position: top; }
}
@keyframes NextNext { 
	from { background-position: bottom; }
	to   { background-position: top; }
}

tw-story[tags~="NextNext"] {
	background-image: linear-gradient(skyblue, white);
	background-size: 100% 400%;
	background-position: bottom;

	-webkit-animation: NextNext 7s ease forwards;
	-moz-animation: NextNext 7s ease forwards;
	animation: NextNext 7s ease forwards;
}

You will likely need to play around with the values being assigned to each property to achieve the exact outcome you want. But hopefully I have supplied enough information so you understand how the above effect works.

1 Like
5

This works perfectly! Thanks for taking your time to explain everything. Your continued responses on forums past and present are greatly appreciated!