React-Spring: Trail inside UseTransition map not workingHow do JavaScript closures work?How does JavaScript .prototype work?JavaScript closure inside loops – simple practical exampleHow does the “this” keyword work?How does data binding work in AngularJS?How to access the correct `this` inside a callback?Loop inside React JSXWhat do these three dots in React do?Programmatically navigate using react routerWhat is the difference between React Native and React?
How to make money from a browser who sees 5 seconds into the future of any web page?
C++ check if statement can be evaluated constexpr
What does Apple's new App Store requirement mean
A variation to the phrase "hanging over my shoulders"
What's the name of the logical fallacy where a debater extends a statement far beyond the original statement to make it true?
Why does Carol not get rid of the Kree symbol on her suit when she changes its colours?
Why do Radio Buttons not fill the entire outer circle?
Delete multiple columns using awk or sed
How to get directions in deep space?
Can I say "fingers" when referring to toes?
How much theory knowledge is actually used while playing?
Does the Linux kernel need a file system to run?
Doesn't the system of the Supreme Court oppose justice?
Why can't the Brexit deadlock in the UK parliament be solved with a plurality vote?
Has the laser at Magurele, Romania reached a tenth of the Sun's power?
What (the heck) is a Super Worm Equinox Moon?
Why do ¬, ∀ and ∃ have the same precedence?
Is this part of the description of the Archfey warlock's Misty Escape feature redundant?
Quoting Keynes in a lecture
Why is the Sun approximated as a black body at ~ 5800 K?
When were female captains banned from Starfleet?
Multiplicative persistence
Which was the first story featuring espers?
Did the UK lift the requirement for registering SIM cards?
React-Spring: Trail inside UseTransition map not working
How do JavaScript closures work?How does JavaScript .prototype work?JavaScript closure inside loops – simple practical exampleHow does the “this” keyword work?How does data binding work in AngularJS?How to access the correct `this` inside a callback?Loop inside React JSXWhat do these three dots in React do?Programmatically navigate using react routerWhat is the difference between React Native and React?
I'm a newbie trying to use React Spring in my React (16.8) project. I made a little carousel which works, but I want to add a credit at the bottom of each slide which should stagger in. A credit consist of two items and the second should animate in a tad slower than the first.
For this I want to use Trail but while the contents of the Trail renders, the animation does not fire.
This is my code so far:
const slides = [
id: 0,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
,
id: 1,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
,
id: 2,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
];
const [slideIndex, set] = useState(0);
useEffect(
() =>
void setInterval(() => set(state => (state + 1) % slides.length), 4000),
[]
);
const transitions = useTransition(slides[slideIndex], item => item.id,
from: opacity: 0, left: -10 ,
enter: opacity: 1, left: -100 ,
leave: opacity: 1, left: -100 ,
config: friction: 25, duration: 4000
);
return (
<div className="header">
transitions.map(( item, props, key ) =>
let bgImg = item.desktopImage;
const creditArray = [item.title, item.studio];
return (
<div key=key>
<animated.div
className="bg"
style= ...props, backgroundImage: `url($bgImg)`
/>
<div className="imageCredit">
<Trail
key=key
items=creditArray
keys=key
from= opacity: 0, transform: "translate3d(-100, 0, 0)"
to= opacity: 1, transform: "translate3d(0, 0, 0)"
>
item => props => <div className="h4">item</div>
</Trail>
</div>
</div>
);
)
</div>
);javascript reactjs react-spring
asked Mar 7 at 23:39
jansmolders86jansmolders86
2,51742644
add a comment |
I'm a newbie trying to use React Spring in my React (16.8) project. I made a little carousel which works, but I want to add a credit at the bottom of each slide which should stagger in. A credit consist of two items and the second should animate in a tad slower than the first.
For this I want to use Trail but while the contents of the Trail renders, the animation does not fire.
This is my code so far:
const slides = [
id: 0,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
,
id: 1,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
,
id: 2,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
];
const [slideIndex, set] = useState(0);
useEffect(
() =>
void setInterval(() => set(state => (state + 1) % slides.length), 4000),
[]
);
const transitions = useTransition(slides[slideIndex], item => item.id,
from: opacity: 0, left: -10 ,
enter: opacity: 1, left: -100 ,
leave: opacity: 1, left: -100 ,
config: friction: 25, duration: 4000
);
return (
<div className="header">
transitions.map(( item, props, key ) =>
let bgImg = item.desktopImage;
const creditArray = [item.title, item.studio];
return (
<div key=key>
<animated.div
className="bg"
style= ...props, backgroundImage: `url($bgImg)`
/>
<div className="imageCredit">
<Trail
key=key
items=creditArray
keys=key
from= opacity: 0, transform: "translate3d(-100, 0, 0)"
to= opacity: 1, transform: "translate3d(0, 0, 0)"
>
item => props => <div className="h4">item</div>
</Trail>
</div>
</div>
);
)
</div>
);javascript reactjs react-spring
asked Mar 7 at 23:39
jansmolders86jansmolders86
2,51742644
add a comment |
I'm a newbie trying to use React Spring in my React (16.8) project. I made a little carousel which works, but I want to add a credit at the bottom of each slide which should stagger in. A credit consist of two items and the second should animate in a tad slower than the first.
For this I want to use Trail but while the contents of the Trail renders, the animation does not fire.
This is my code so far:
const slides = [
id: 0,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
,
id: 1,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
,
id: 2,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
];
const [slideIndex, set] = useState(0);
useEffect(
() =>
void setInterval(() => set(state => (state + 1) % slides.length), 4000),
[]
);
const transitions = useTransition(slides[slideIndex], item => item.id,
from: opacity: 0, left: -10 ,
enter: opacity: 1, left: -100 ,
leave: opacity: 1, left: -100 ,
config: friction: 25, duration: 4000
);
return (
<div className="header">
transitions.map(( item, props, key ) =>
let bgImg = item.desktopImage;
const creditArray = [item.title, item.studio];
return (
<div key=key>
<animated.div
className="bg"
style= ...props, backgroundImage: `url($bgImg)`
/>
<div className="imageCredit">
<Trail
key=key
items=creditArray
keys=key
from= opacity: 0, transform: "translate3d(-100, 0, 0)"
to= opacity: 1, transform: "translate3d(0, 0, 0)"
>
item => props => <div className="h4">item</div>
</Trail>
</div>
</div>
);
)
</div>
);javascript reactjs react-spring
asked Mar 7 at 23:39
jansmolders86jansmolders86
2,51742644
I'm a newbie trying to use React Spring in my React (16.8) project. I made a little carousel which works, but I want to add a credit at the bottom of each slide which should stagger in. A credit consist of two items and the second should animate in a tad slower than the first.
For this I want to use Trail but while the contents of the Trail renders, the animation does not fire.
This is my code so far:
const slides = [
id: 0,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
,
id: 1,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
,
id: 2,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
];
const [slideIndex, set] = useState(0);
useEffect(
() =>
void setInterval(() => set(state => (state + 1) % slides.length), 4000),
[]
);
const transitions = useTransition(slides[slideIndex], item => item.id,
from: opacity: 0, left: -10 ,
enter: opacity: 1, left: -100 ,
leave: opacity: 1, left: -100 ,
config: friction: 25, duration: 4000
);
return (
<div className="header">
transitions.map(( item, props, key ) =>
let bgImg = item.desktopImage;
const creditArray = [item.title, item.studio];
return (
<div key=key>
<animated.div
className="bg"
style= ...props, backgroundImage: `url($bgImg)`
/>
<div className="imageCredit">
<Trail
key=key
items=creditArray
keys=key
from= opacity: 0, transform: "translate3d(-100, 0, 0)"
to= opacity: 1, transform: "translate3d(0, 0, 0)"
>
item => props => <div className="h4">item</div>
</Trail>
</div>
</div>
);
)
</div>
);const slides = [
id: 0,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
,
id: 1,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
,
id: 2,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
];
const [slideIndex, set] = useState(0);
useEffect(
() =>
void setInterval(() => set(state => (state + 1) % slides.length), 4000),
[]
);
const transitions = useTransition(slides[slideIndex], item => item.id,
from: opacity: 0, left: -10 ,
enter: opacity: 1, left: -100 ,
leave: opacity: 1, left: -100 ,
config: friction: 25, duration: 4000
);
return (
<div className="header">
transitions.map(( item, props, key ) =>
let bgImg = item.desktopImage;
const creditArray = [item.title, item.studio];
return (
<div key=key>
<animated.div
className="bg"
style= ...props, backgroundImage: `url($bgImg)`
/>
<div className="imageCredit">
<Trail
key=key
items=creditArray
keys=key
from= opacity: 0, transform: "translate3d(-100, 0, 0)"
to= opacity: 1, transform: "translate3d(0, 0, 0)"
>
item => props => <div className="h4">item</div>
</Trail>
</div>
</div>
);
)
</div>
);const slides = [
id: 0,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
,
id: 1,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
,
id: 2,
desktopImage: "http://lorempixel.com/400/200/",
title: "foo",
studio: "bar"
];
const [slideIndex, set] = useState(0);
useEffect(
() =>
void setInterval(() => set(state => (state + 1) % slides.length), 4000),
[]
);
const transitions = useTransition(slides[slideIndex], item => item.id,
from: opacity: 0, left: -10 ,
enter: opacity: 1, left: -100 ,
leave: opacity: 1, left: -100 ,
config: friction: 25, duration: 4000
);
return (
<div className="header">
transitions.map(( item, props, key ) =>
let bgImg = item.desktopImage;
const creditArray = [item.title, item.studio];
return (
<div key=key>
<animated.div
className="bg"
style= ...props, backgroundImage: `url($bgImg)`
/>
<div className="imageCredit">
<Trail
key=key
items=creditArray
keys=key
from= opacity: 0, transform: "translate3d(-100, 0, 0)"
to= opacity: 1, transform: "translate3d(0, 0, 0)"
>
item => props => <div className="h4">item</div>
</Trail>
</div>
</div>
);
)
</div>
);javascript reactjs react-spring
javascript reactjs react-spring
asked Mar 7 at 23:39
jansmolders86jansmolders86
2,51742644
asked Mar 7 at 23:39
jansmolders86jansmolders86
2,51742644
edited Mar 8 at 0:20
jansmolders86
asked Mar 7 at 23:39
jansmolders86jansmolders86
2,51742644
asked Mar 7 at 23:39
jansmolders86jansmolders86
2,51742644
asked Mar 7 at 23:39
jansmolders86jansmolders86
2,51742644
2,51742644
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Figured it out, I forgot to pass downn the actual style down to the rendered element.
so instead of :
<Trail
key=key
items=creditArray
keys=key
from= opacity: 0, transform: "translate3d(-100, 0, 0)"
to= opacity: 1, transform: "translate3d(0, 0, 0)" >
item => props => <div className="h4">item</div>
</Trail>
I needed to do:
<Trail
items=creditArray
keys=item => item + key
from=opacity: 0, transform: 'translateX(100px)'
to=opacity: 1, transform: 'translateX(0)'>
item => style => (
<animated.div style= ...style className="h4">
item
</animated.div>
)
</Trail>
answered Mar 8 at 11:31
jansmolders86jansmolders86
2,51742644
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
);
);
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%2f55054561%2freact-spring-trail-inside-usetransition-map-not-working%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
Figured it out, I forgot to pass downn the actual style down to the rendered element.
so instead of :
<Trail
key=key
items=creditArray
keys=key
from= opacity: 0, transform: "translate3d(-100, 0, 0)"
to= opacity: 1, transform: "translate3d(0, 0, 0)" >
item => props => <div className="h4">item</div>
</Trail>
I needed to do:
<Trail
items=creditArray
keys=item => item + key
from=opacity: 0, transform: 'translateX(100px)'
to=opacity: 1, transform: 'translateX(0)'>
item => style => (
<animated.div style= ...style className="h4">
item
</animated.div>
)
</Trail>
answered Mar 8 at 11:31
jansmolders86jansmolders86
2,51742644
add a comment |
Figured it out, I forgot to pass downn the actual style down to the rendered element.
so instead of :
<Trail
key=key
items=creditArray
keys=key
from= opacity: 0, transform: "translate3d(-100, 0, 0)"
to= opacity: 1, transform: "translate3d(0, 0, 0)" >
item => props => <div className="h4">item</div>
</Trail>
I needed to do:
<Trail
items=creditArray
keys=item => item + key
from=opacity: 0, transform: 'translateX(100px)'
to=opacity: 1, transform: 'translateX(0)'>
item => style => (
<animated.div style= ...style className="h4">
item
</animated.div>
)
</Trail>
answered Mar 8 at 11:31
jansmolders86jansmolders86
2,51742644
add a comment |
Figured it out, I forgot to pass downn the actual style down to the rendered element.
so instead of :
<Trail
key=key
items=creditArray
keys=key
from= opacity: 0, transform: "translate3d(-100, 0, 0)"
to= opacity: 1, transform: "translate3d(0, 0, 0)" >
item => props => <div className="h4">item</div>
</Trail>
I needed to do:
<Trail
items=creditArray
keys=item => item + key
from=opacity: 0, transform: 'translateX(100px)'
to=opacity: 1, transform: 'translateX(0)'>
item => style => (
<animated.div style= ...style className="h4">
item
</animated.div>
)
</Trail>
answered Mar 8 at 11:31
jansmolders86jansmolders86
2,51742644
Figured it out, I forgot to pass downn the actual style down to the rendered element.
so instead of :
<Trail
key=key
items=creditArray
keys=key
from= opacity: 0, transform: "translate3d(-100, 0, 0)"
to= opacity: 1, transform: "translate3d(0, 0, 0)" >
item => props => <div className="h4">item</div>
</Trail>
I needed to do:
<Trail
items=creditArray
keys=item => item + key
from=opacity: 0, transform: 'translateX(100px)'
to=opacity: 1, transform: 'translateX(0)'>
item => style => (
<animated.div style= ...style className="h4">
item
</animated.div>
)
</Trail>
answered Mar 8 at 11:31
jansmolders86jansmolders86
2,51742644
answered Mar 8 at 11:31
jansmolders86jansmolders86
2,51742644
answered Mar 8 at 11:31
jansmolders86jansmolders86
2,51742644
answered Mar 8 at 11:31
jansmolders86jansmolders86
2,51742644
2,51742644
add a comment |
add a comment |
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.
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%2f55054561%2freact-spring-trail-inside-usetransition-map-not-working%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
