Maintaining a CSS translate3d position when swapping classes
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
2
I have an infinite scrolling background image in a div as you can see in the below snippet.
The idea behind this is that its a timeline that I can change the speed of, ie. Normal speed, Fast, Slow and even Reverse. Using javascript I can successfully change the "speed class" that I have on the div and the image will successfully update to the speed and direction that I wish it to go.
However my issue is that when I'm changing class, I lose the relative translate3d position of the image, so as the class changes, the background image location gets reset and then the new animation starts.
I've tried to address this a few ways purely from a css point of view, by trying a complete swap of classes, as well as running a single class full time and applying the selected animation as an additional class, however I am unable to figure out how to maintain the relative background position when the new class is applied.
How can I maintain the background images location when I swap class so that it doesn't look like the image is jumping from one position to another?
.timeline_frame {
width: 100%;
min-width: 1500px;
background-color: #444;
height: 250px;
left: 0;
right: 0;
margin: auto auto;
position: relative;
}
.timeline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto auto;
width: 1500px;
height: 200px;
}
.timeline_container {
width: 1500px;
height: 200px;
overflow: hidden;
position: relative;
}
.timeline_background {
background: url("https://www.aidanwardman.com/timeline-bg.png") repeat-x;
background-color: rgba(0, 0, 0, 0.5);
width: 3000px;
height: 200px;
vertical-align: bottom;
}
.timeline_speed_normal {
animation: slide 20s linear infinite;
}
.timeline_speed_slow {
animation: slide 40s linear infinite;
}
.timeline_speed_reverse {
animation: slide-reverse 2s linear infinite;
}
@keyframes slide {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1500px, 0, 0);
}
}
@keyframes slide-reverse {
0% {
transform: translate3d(-1500px, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
.button_frame {
left: 0;
right: 0;
margin: auto;
width: 400px;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button_frame">
<button id="forward-normal">Forward Normal</button>
<button id="forward-slow">Forward Slow</button>
<button id="reverse">Reverse</button>
</div>
<div class="timeline_frame">
<div class="timeline">
<div class="timeline_container">
<div class="timeline_background timeline_speed_normal"></div>
</div>
</div>
</div>
<script>
$("#forward-normal").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_reverse").addClass("timeline_speed_normal");
});
$("#forward-slow").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_normal timeline_speed_reverse").addClass("timeline_speed_slow");
});
$("#reverse").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_normal").addClass("timeline_speed_reverse");
});
</script>css css-animations translate3d
edited Nov 24 '18 at 0:44
Temani Afif
83k104795
asked Nov 24 '18 at 0:23
AidanAidan
524211
add a comment |
2
I have an infinite scrolling background image in a div as you can see in the below snippet.
The idea behind this is that its a timeline that I can change the speed of, ie. Normal speed, Fast, Slow and even Reverse. Using javascript I can successfully change the "speed class" that I have on the div and the image will successfully update to the speed and direction that I wish it to go.
However my issue is that when I'm changing class, I lose the relative translate3d position of the image, so as the class changes, the background image location gets reset and then the new animation starts.
I've tried to address this a few ways purely from a css point of view, by trying a complete swap of classes, as well as running a single class full time and applying the selected animation as an additional class, however I am unable to figure out how to maintain the relative background position when the new class is applied.
How can I maintain the background images location when I swap class so that it doesn't look like the image is jumping from one position to another?
.timeline_frame {
width: 100%;
min-width: 1500px;
background-color: #444;
height: 250px;
left: 0;
right: 0;
margin: auto auto;
position: relative;
}
.timeline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto auto;
width: 1500px;
height: 200px;
}
.timeline_container {
width: 1500px;
height: 200px;
overflow: hidden;
position: relative;
}
.timeline_background {
background: url("https://www.aidanwardman.com/timeline-bg.png") repeat-x;
background-color: rgba(0, 0, 0, 0.5);
width: 3000px;
height: 200px;
vertical-align: bottom;
}
.timeline_speed_normal {
animation: slide 20s linear infinite;
}
.timeline_speed_slow {
animation: slide 40s linear infinite;
}
.timeline_speed_reverse {
animation: slide-reverse 2s linear infinite;
}
@keyframes slide {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1500px, 0, 0);
}
}
@keyframes slide-reverse {
0% {
transform: translate3d(-1500px, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
.button_frame {
left: 0;
right: 0;
margin: auto;
width: 400px;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button_frame">
<button id="forward-normal">Forward Normal</button>
<button id="forward-slow">Forward Slow</button>
<button id="reverse">Reverse</button>
</div>
<div class="timeline_frame">
<div class="timeline">
<div class="timeline_container">
<div class="timeline_background timeline_speed_normal"></div>
</div>
</div>
</div>
<script>
$("#forward-normal").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_reverse").addClass("timeline_speed_normal");
});
$("#forward-slow").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_normal timeline_speed_reverse").addClass("timeline_speed_slow");
});
$("#reverse").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_normal").addClass("timeline_speed_reverse");
});
</script>css css-animations translate3d
edited Nov 24 '18 at 0:44
Temani Afif
83k104795
asked Nov 24 '18 at 0:23
AidanAidan
524211
add a comment |
2
2
2
1
I have an infinite scrolling background image in a div as you can see in the below snippet.
The idea behind this is that its a timeline that I can change the speed of, ie. Normal speed, Fast, Slow and even Reverse. Using javascript I can successfully change the "speed class" that I have on the div and the image will successfully update to the speed and direction that I wish it to go.
However my issue is that when I'm changing class, I lose the relative translate3d position of the image, so as the class changes, the background image location gets reset and then the new animation starts.
I've tried to address this a few ways purely from a css point of view, by trying a complete swap of classes, as well as running a single class full time and applying the selected animation as an additional class, however I am unable to figure out how to maintain the relative background position when the new class is applied.
How can I maintain the background images location when I swap class so that it doesn't look like the image is jumping from one position to another?
.timeline_frame {
width: 100%;
min-width: 1500px;
background-color: #444;
height: 250px;
left: 0;
right: 0;
margin: auto auto;
position: relative;
}
.timeline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto auto;
width: 1500px;
height: 200px;
}
.timeline_container {
width: 1500px;
height: 200px;
overflow: hidden;
position: relative;
}
.timeline_background {
background: url("https://www.aidanwardman.com/timeline-bg.png") repeat-x;
background-color: rgba(0, 0, 0, 0.5);
width: 3000px;
height: 200px;
vertical-align: bottom;
}
.timeline_speed_normal {
animation: slide 20s linear infinite;
}
.timeline_speed_slow {
animation: slide 40s linear infinite;
}
.timeline_speed_reverse {
animation: slide-reverse 2s linear infinite;
}
@keyframes slide {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1500px, 0, 0);
}
}
@keyframes slide-reverse {
0% {
transform: translate3d(-1500px, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
.button_frame {
left: 0;
right: 0;
margin: auto;
width: 400px;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button_frame">
<button id="forward-normal">Forward Normal</button>
<button id="forward-slow">Forward Slow</button>
<button id="reverse">Reverse</button>
</div>
<div class="timeline_frame">
<div class="timeline">
<div class="timeline_container">
<div class="timeline_background timeline_speed_normal"></div>
</div>
</div>
</div>
<script>
$("#forward-normal").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_reverse").addClass("timeline_speed_normal");
});
$("#forward-slow").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_normal timeline_speed_reverse").addClass("timeline_speed_slow");
});
$("#reverse").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_normal").addClass("timeline_speed_reverse");
});
</script>css css-animations translate3d
edited Nov 24 '18 at 0:44
Temani Afif
83k104795
asked Nov 24 '18 at 0:23
AidanAidan
524211
I have an infinite scrolling background image in a div as you can see in the below snippet.
The idea behind this is that its a timeline that I can change the speed of, ie. Normal speed, Fast, Slow and even Reverse. Using javascript I can successfully change the "speed class" that I have on the div and the image will successfully update to the speed and direction that I wish it to go.
However my issue is that when I'm changing class, I lose the relative translate3d position of the image, so as the class changes, the background image location gets reset and then the new animation starts.
I've tried to address this a few ways purely from a css point of view, by trying a complete swap of classes, as well as running a single class full time and applying the selected animation as an additional class, however I am unable to figure out how to maintain the relative background position when the new class is applied.
How can I maintain the background images location when I swap class so that it doesn't look like the image is jumping from one position to another?
.timeline_frame {
width: 100%;
min-width: 1500px;
background-color: #444;
height: 250px;
left: 0;
right: 0;
margin: auto auto;
position: relative;
}
.timeline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto auto;
width: 1500px;
height: 200px;
}
.timeline_container {
width: 1500px;
height: 200px;
overflow: hidden;
position: relative;
}
.timeline_background {
background: url("https://www.aidanwardman.com/timeline-bg.png") repeat-x;
background-color: rgba(0, 0, 0, 0.5);
width: 3000px;
height: 200px;
vertical-align: bottom;
}
.timeline_speed_normal {
animation: slide 20s linear infinite;
}
.timeline_speed_slow {
animation: slide 40s linear infinite;
}
.timeline_speed_reverse {
animation: slide-reverse 2s linear infinite;
}
@keyframes slide {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1500px, 0, 0);
}
}
@keyframes slide-reverse {
0% {
transform: translate3d(-1500px, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
.button_frame {
left: 0;
right: 0;
margin: auto;
width: 400px;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button_frame">
<button id="forward-normal">Forward Normal</button>
<button id="forward-slow">Forward Slow</button>
<button id="reverse">Reverse</button>
</div>
<div class="timeline_frame">
<div class="timeline">
<div class="timeline_container">
<div class="timeline_background timeline_speed_normal"></div>
</div>
</div>
</div>
<script>
$("#forward-normal").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_reverse").addClass("timeline_speed_normal");
});
$("#forward-slow").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_normal timeline_speed_reverse").addClass("timeline_speed_slow");
});
$("#reverse").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_normal").addClass("timeline_speed_reverse");
});
</script>.timeline_frame {
width: 100%;
min-width: 1500px;
background-color: #444;
height: 250px;
left: 0;
right: 0;
margin: auto auto;
position: relative;
}
.timeline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto auto;
width: 1500px;
height: 200px;
}
.timeline_container {
width: 1500px;
height: 200px;
overflow: hidden;
position: relative;
}
.timeline_background {
background: url("https://www.aidanwardman.com/timeline-bg.png") repeat-x;
background-color: rgba(0, 0, 0, 0.5);
width: 3000px;
height: 200px;
vertical-align: bottom;
}
.timeline_speed_normal {
animation: slide 20s linear infinite;
}
.timeline_speed_slow {
animation: slide 40s linear infinite;
}
.timeline_speed_reverse {
animation: slide-reverse 2s linear infinite;
}
@keyframes slide {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1500px, 0, 0);
}
}
@keyframes slide-reverse {
0% {
transform: translate3d(-1500px, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
.button_frame {
left: 0;
right: 0;
margin: auto;
width: 400px;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button_frame">
<button id="forward-normal">Forward Normal</button>
<button id="forward-slow">Forward Slow</button>
<button id="reverse">Reverse</button>
</div>
<div class="timeline_frame">
<div class="timeline">
<div class="timeline_container">
<div class="timeline_background timeline_speed_normal"></div>
</div>
</div>
</div>
<script>
$("#forward-normal").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_reverse").addClass("timeline_speed_normal");
});
$("#forward-slow").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_normal timeline_speed_reverse").addClass("timeline_speed_slow");
});
$("#reverse").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_normal").addClass("timeline_speed_reverse");
});
</script>.timeline_frame {
width: 100%;
min-width: 1500px;
background-color: #444;
height: 250px;
left: 0;
right: 0;
margin: auto auto;
position: relative;
}
.timeline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto auto;
width: 1500px;
height: 200px;
}
.timeline_container {
width: 1500px;
height: 200px;
overflow: hidden;
position: relative;
}
.timeline_background {
background: url("https://www.aidanwardman.com/timeline-bg.png") repeat-x;
background-color: rgba(0, 0, 0, 0.5);
width: 3000px;
height: 200px;
vertical-align: bottom;
}
.timeline_speed_normal {
animation: slide 20s linear infinite;
}
.timeline_speed_slow {
animation: slide 40s linear infinite;
}
.timeline_speed_reverse {
animation: slide-reverse 2s linear infinite;
}
@keyframes slide {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1500px, 0, 0);
}
}
@keyframes slide-reverse {
0% {
transform: translate3d(-1500px, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
.button_frame {
left: 0;
right: 0;
margin: auto;
width: 400px;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button_frame">
<button id="forward-normal">Forward Normal</button>
<button id="forward-slow">Forward Slow</button>
<button id="reverse">Reverse</button>
</div>
<div class="timeline_frame">
<div class="timeline">
<div class="timeline_container">
<div class="timeline_background timeline_speed_normal"></div>
</div>
</div>
</div>
<script>
$("#forward-normal").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_reverse").addClass("timeline_speed_normal");
});
$("#forward-slow").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_normal timeline_speed_reverse").addClass("timeline_speed_slow");
});
$("#reverse").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_normal").addClass("timeline_speed_reverse");
});
</script>css css-animations translate3d
css css-animations translate3d
edited Nov 24 '18 at 0:44
Temani Afif
83k104795
asked Nov 24 '18 at 0:23
AidanAidan
524211
edited Nov 24 '18 at 0:44
Temani Afif
83k104795
asked Nov 24 '18 at 0:23
AidanAidan
524211
edited Nov 24 '18 at 0:44
Temani Afif
83k104795
edited Nov 24 '18 at 0:44
Temani Afif
83k104795
edited Nov 24 '18 at 0:44
Temani Afif
83k104795
83k104795
asked Nov 24 '18 at 0:23
AidanAidan
524211
asked Nov 24 '18 at 0:23
AidanAidan
524211
asked Nov 24 '18 at 0:23
AidanAidan
524211
524211
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
I would simulate such thing using transition instead of animation:
.timeline_frame {
width: 100%;
min-width: 1500px;
background-color: #444;
height: 250px;
left: 0;
right: 0;
margin: auto auto;
position: relative;
}
.timeline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto auto;
width: 1500px;
height: 200px;
}
.timeline_container {
width: 1500px;
height: 200px;
overflow: hidden;
position: relative;
}
.timeline_background {
background: url("https://www.aidanwardman.com/timeline-bg.png") repeat-x;
background-color: rgba(0, 0, 0, 0.5);
width: 3000px;
height: 200px;
vertical-align: bottom;
transition:10s all;
}
.timeline_speed_normal {
transform: translate3d(-1500px, 0, 0);
}
.timeline_speed_slow {
transition:30s all;
transform: translate3d(-1501px, 0, 0);
}
.timeline_speed_reverse {
transform: translate3d(0, 0, 0);
}
.button_frame {
left: 0;
right: 0;
margin: auto;
width: 400px;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button_frame">
<button id="forward-normal">Forward Normal</button>
<button id="forward-slow">Forward Slow</button>
<button id="reverse">Reverse</button>
</div>
<div class="timeline_frame">
<div class="timeline">
<div class="timeline_container">
<div class="timeline_background"></div>
</div>
</div>
</div>
<script>
$("#forward-normal").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_reverse").addClass("timeline_speed_normal");
});
$("#forward-slow").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_normal timeline_speed_reverse").addClass("timeline_speed_slow");
});
$("#reverse").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_normal").addClass("timeline_speed_reverse");
});
</script>answered Nov 24 '18 at 0:44
Temani AfifTemani Afif
83k104795
I like it, how would I simulate such a thing "indefinitely" or on repeat so that it looks smooth regardless of which speed/direction is selected? For example: 1. Forward Normal speed - infinite (with smooth replay of transitions) 2. Swap to either Forward Slow, or Reverse Normal (maintaining infinite scroll) with smooth transition
– Aidan
Nov 26 '18 at 1:08
@Aidan yes the repeat part is a bit tricky when it comes to transition, I am thinking about a way
– Temani Afif
Nov 26 '18 at 8:32
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454162%2fmaintaining-a-css-translate3d-position-when-swapping-classes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
I would simulate such thing using transition instead of animation:
.timeline_frame {
width: 100%;
min-width: 1500px;
background-color: #444;
height: 250px;
left: 0;
right: 0;
margin: auto auto;
position: relative;
}
.timeline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto auto;
width: 1500px;
height: 200px;
}
.timeline_container {
width: 1500px;
height: 200px;
overflow: hidden;
position: relative;
}
.timeline_background {
background: url("https://www.aidanwardman.com/timeline-bg.png") repeat-x;
background-color: rgba(0, 0, 0, 0.5);
width: 3000px;
height: 200px;
vertical-align: bottom;
transition:10s all;
}
.timeline_speed_normal {
transform: translate3d(-1500px, 0, 0);
}
.timeline_speed_slow {
transition:30s all;
transform: translate3d(-1501px, 0, 0);
}
.timeline_speed_reverse {
transform: translate3d(0, 0, 0);
}
.button_frame {
left: 0;
right: 0;
margin: auto;
width: 400px;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button_frame">
<button id="forward-normal">Forward Normal</button>
<button id="forward-slow">Forward Slow</button>
<button id="reverse">Reverse</button>
</div>
<div class="timeline_frame">
<div class="timeline">
<div class="timeline_container">
<div class="timeline_background"></div>
</div>
</div>
</div>
<script>
$("#forward-normal").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_reverse").addClass("timeline_speed_normal");
});
$("#forward-slow").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_normal timeline_speed_reverse").addClass("timeline_speed_slow");
});
$("#reverse").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_normal").addClass("timeline_speed_reverse");
});
</script>answered Nov 24 '18 at 0:44
Temani AfifTemani Afif
83k104795
I like it, how would I simulate such a thing "indefinitely" or on repeat so that it looks smooth regardless of which speed/direction is selected? For example: 1. Forward Normal speed - infinite (with smooth replay of transitions) 2. Swap to either Forward Slow, or Reverse Normal (maintaining infinite scroll) with smooth transition
– Aidan
Nov 26 '18 at 1:08
@Aidan yes the repeat part is a bit tricky when it comes to transition, I am thinking about a way
– Temani Afif
Nov 26 '18 at 8:32
add a comment |
2
I would simulate such thing using transition instead of animation:
.timeline_frame {
width: 100%;
min-width: 1500px;
background-color: #444;
height: 250px;
left: 0;
right: 0;
margin: auto auto;
position: relative;
}
.timeline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto auto;
width: 1500px;
height: 200px;
}
.timeline_container {
width: 1500px;
height: 200px;
overflow: hidden;
position: relative;
}
.timeline_background {
background: url("https://www.aidanwardman.com/timeline-bg.png") repeat-x;
background-color: rgba(0, 0, 0, 0.5);
width: 3000px;
height: 200px;
vertical-align: bottom;
transition:10s all;
}
.timeline_speed_normal {
transform: translate3d(-1500px, 0, 0);
}
.timeline_speed_slow {
transition:30s all;
transform: translate3d(-1501px, 0, 0);
}
.timeline_speed_reverse {
transform: translate3d(0, 0, 0);
}
.button_frame {
left: 0;
right: 0;
margin: auto;
width: 400px;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button_frame">
<button id="forward-normal">Forward Normal</button>
<button id="forward-slow">Forward Slow</button>
<button id="reverse">Reverse</button>
</div>
<div class="timeline_frame">
<div class="timeline">
<div class="timeline_container">
<div class="timeline_background"></div>
</div>
</div>
</div>
<script>
$("#forward-normal").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_reverse").addClass("timeline_speed_normal");
});
$("#forward-slow").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_normal timeline_speed_reverse").addClass("timeline_speed_slow");
});
$("#reverse").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_normal").addClass("timeline_speed_reverse");
});
</script>answered Nov 24 '18 at 0:44
Temani AfifTemani Afif
83k104795
I like it, how would I simulate such a thing "indefinitely" or on repeat so that it looks smooth regardless of which speed/direction is selected? For example: 1. Forward Normal speed - infinite (with smooth replay of transitions) 2. Swap to either Forward Slow, or Reverse Normal (maintaining infinite scroll) with smooth transition
– Aidan
Nov 26 '18 at 1:08
@Aidan yes the repeat part is a bit tricky when it comes to transition, I am thinking about a way
– Temani Afif
Nov 26 '18 at 8:32
add a comment |
2
2
2
I would simulate such thing using transition instead of animation:
.timeline_frame {
width: 100%;
min-width: 1500px;
background-color: #444;
height: 250px;
left: 0;
right: 0;
margin: auto auto;
position: relative;
}
.timeline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto auto;
width: 1500px;
height: 200px;
}
.timeline_container {
width: 1500px;
height: 200px;
overflow: hidden;
position: relative;
}
.timeline_background {
background: url("https://www.aidanwardman.com/timeline-bg.png") repeat-x;
background-color: rgba(0, 0, 0, 0.5);
width: 3000px;
height: 200px;
vertical-align: bottom;
transition:10s all;
}
.timeline_speed_normal {
transform: translate3d(-1500px, 0, 0);
}
.timeline_speed_slow {
transition:30s all;
transform: translate3d(-1501px, 0, 0);
}
.timeline_speed_reverse {
transform: translate3d(0, 0, 0);
}
.button_frame {
left: 0;
right: 0;
margin: auto;
width: 400px;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button_frame">
<button id="forward-normal">Forward Normal</button>
<button id="forward-slow">Forward Slow</button>
<button id="reverse">Reverse</button>
</div>
<div class="timeline_frame">
<div class="timeline">
<div class="timeline_container">
<div class="timeline_background"></div>
</div>
</div>
</div>
<script>
$("#forward-normal").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_reverse").addClass("timeline_speed_normal");
});
$("#forward-slow").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_normal timeline_speed_reverse").addClass("timeline_speed_slow");
});
$("#reverse").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_normal").addClass("timeline_speed_reverse");
});
</script>answered Nov 24 '18 at 0:44
Temani AfifTemani Afif
83k104795
I would simulate such thing using transition instead of animation:
.timeline_frame {
width: 100%;
min-width: 1500px;
background-color: #444;
height: 250px;
left: 0;
right: 0;
margin: auto auto;
position: relative;
}
.timeline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto auto;
width: 1500px;
height: 200px;
}
.timeline_container {
width: 1500px;
height: 200px;
overflow: hidden;
position: relative;
}
.timeline_background {
background: url("https://www.aidanwardman.com/timeline-bg.png") repeat-x;
background-color: rgba(0, 0, 0, 0.5);
width: 3000px;
height: 200px;
vertical-align: bottom;
transition:10s all;
}
.timeline_speed_normal {
transform: translate3d(-1500px, 0, 0);
}
.timeline_speed_slow {
transition:30s all;
transform: translate3d(-1501px, 0, 0);
}
.timeline_speed_reverse {
transform: translate3d(0, 0, 0);
}
.button_frame {
left: 0;
right: 0;
margin: auto;
width: 400px;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button_frame">
<button id="forward-normal">Forward Normal</button>
<button id="forward-slow">Forward Slow</button>
<button id="reverse">Reverse</button>
</div>
<div class="timeline_frame">
<div class="timeline">
<div class="timeline_container">
<div class="timeline_background"></div>
</div>
</div>
</div>
<script>
$("#forward-normal").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_reverse").addClass("timeline_speed_normal");
});
$("#forward-slow").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_normal timeline_speed_reverse").addClass("timeline_speed_slow");
});
$("#reverse").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_normal").addClass("timeline_speed_reverse");
});
</script>.timeline_frame {
width: 100%;
min-width: 1500px;
background-color: #444;
height: 250px;
left: 0;
right: 0;
margin: auto auto;
position: relative;
}
.timeline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto auto;
width: 1500px;
height: 200px;
}
.timeline_container {
width: 1500px;
height: 200px;
overflow: hidden;
position: relative;
}
.timeline_background {
background: url("https://www.aidanwardman.com/timeline-bg.png") repeat-x;
background-color: rgba(0, 0, 0, 0.5);
width: 3000px;
height: 200px;
vertical-align: bottom;
transition:10s all;
}
.timeline_speed_normal {
transform: translate3d(-1500px, 0, 0);
}
.timeline_speed_slow {
transition:30s all;
transform: translate3d(-1501px, 0, 0);
}
.timeline_speed_reverse {
transform: translate3d(0, 0, 0);
}
.button_frame {
left: 0;
right: 0;
margin: auto;
width: 400px;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button_frame">
<button id="forward-normal">Forward Normal</button>
<button id="forward-slow">Forward Slow</button>
<button id="reverse">Reverse</button>
</div>
<div class="timeline_frame">
<div class="timeline">
<div class="timeline_container">
<div class="timeline_background"></div>
</div>
</div>
</div>
<script>
$("#forward-normal").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_reverse").addClass("timeline_speed_normal");
});
$("#forward-slow").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_normal timeline_speed_reverse").addClass("timeline_speed_slow");
});
$("#reverse").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_normal").addClass("timeline_speed_reverse");
});
</script>.timeline_frame {
width: 100%;
min-width: 1500px;
background-color: #444;
height: 250px;
left: 0;
right: 0;
margin: auto auto;
position: relative;
}
.timeline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto auto;
width: 1500px;
height: 200px;
}
.timeline_container {
width: 1500px;
height: 200px;
overflow: hidden;
position: relative;
}
.timeline_background {
background: url("https://www.aidanwardman.com/timeline-bg.png") repeat-x;
background-color: rgba(0, 0, 0, 0.5);
width: 3000px;
height: 200px;
vertical-align: bottom;
transition:10s all;
}
.timeline_speed_normal {
transform: translate3d(-1500px, 0, 0);
}
.timeline_speed_slow {
transition:30s all;
transform: translate3d(-1501px, 0, 0);
}
.timeline_speed_reverse {
transform: translate3d(0, 0, 0);
}
.button_frame {
left: 0;
right: 0;
margin: auto;
width: 400px;
padding: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button_frame">
<button id="forward-normal">Forward Normal</button>
<button id="forward-slow">Forward Slow</button>
<button id="reverse">Reverse</button>
</div>
<div class="timeline_frame">
<div class="timeline">
<div class="timeline_container">
<div class="timeline_background"></div>
</div>
</div>
</div>
<script>
$("#forward-normal").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_reverse").addClass("timeline_speed_normal");
});
$("#forward-slow").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_normal timeline_speed_reverse").addClass("timeline_speed_slow");
});
$("#reverse").click(function() {
$(".timeline_background").removeClass("timeline_speed_fast timeline_speed_slow timeline_speed_normal").addClass("timeline_speed_reverse");
});
</script>answered Nov 24 '18 at 0:44
Temani AfifTemani Afif
83k104795
answered Nov 24 '18 at 0:44
Temani AfifTemani Afif
83k104795
answered Nov 24 '18 at 0:44
Temani AfifTemani Afif
83k104795
answered Nov 24 '18 at 0:44
Temani AfifTemani Afif
83k104795
83k104795
I like it, how would I simulate such a thing "indefinitely" or on repeat so that it looks smooth regardless of which speed/direction is selected? For example: 1. Forward Normal speed - infinite (with smooth replay of transitions) 2. Swap to either Forward Slow, or Reverse Normal (maintaining infinite scroll) with smooth transition
– Aidan
Nov 26 '18 at 1:08
@Aidan yes the repeat part is a bit tricky when it comes to transition, I am thinking about a way
– Temani Afif
Nov 26 '18 at 8:32
add a comment |
I like it, how would I simulate such a thing "indefinitely" or on repeat so that it looks smooth regardless of which speed/direction is selected? For example: 1. Forward Normal speed - infinite (with smooth replay of transitions) 2. Swap to either Forward Slow, or Reverse Normal (maintaining infinite scroll) with smooth transition
– Aidan
Nov 26 '18 at 1:08
@Aidan yes the repeat part is a bit tricky when it comes to transition, I am thinking about a way
– Temani Afif
Nov 26 '18 at 8:32
I like it, how would I simulate such a thing "indefinitely" or on repeat so that it looks smooth regardless of which speed/direction is selected? For example: 1. Forward Normal speed - infinite (with smooth replay of transitions) 2. Swap to either Forward Slow, or Reverse Normal (maintaining infinite scroll) with smooth transition
– Aidan
Nov 26 '18 at 1:08
I like it, how would I simulate such a thing "indefinitely" or on repeat so that it looks smooth regardless of which speed/direction is selected? For example: 1. Forward Normal speed - infinite (with smooth replay of transitions) 2. Swap to either Forward Slow, or Reverse Normal (maintaining infinite scroll) with smooth transition
– Aidan
Nov 26 '18 at 1:08
@Aidan yes the repeat part is a bit tricky when it comes to transition, I am thinking about a way
– Temani Afif
Nov 26 '18 at 8:32
@Aidan yes the repeat part is a bit tricky when it comes to transition, I am thinking about a way
– Temani Afif
Nov 26 '18 at 8:32
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454162%2fmaintaining-a-css-translate3d-position-when-swapping-classes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
