[elm-discuss] Re: Simple Fade In/Out effect?
On Tuesday, October 4, 2016 at 2:46:50 PM UTC-4, Joaquín Oltra wrote: > > Here's a mini-example for posterity > http://jsbin.com/hipeba/edit?html,css,js,output > Thanks Joaquín, I just had an opportunity to use your code snippet and it was extremely handy! -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[elm-discuss] Re: Simple Fade In/Out effect?
Here's a mini-example for posterity
http://jsbin.com/hipeba/edit?html,css,js,output
On Tuesday, October 4, 2016 at 8:37:57 PM UTC+2, Joaquín Oltra wrote:
>
> elm-style-animation is great, but if you want simple fade-in fade-out
> effects the best way is to toggle classes in the html and use css
> animations, or transitions.
>
>
> https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
> https://css-tricks.com/snippets/css/keyframe-animation-syntax/
>
> You'll avoid having animation state and a lot of animation related code
> and they can be very efficient when used with transforms or opacity.
>
> That said if you need advanced animation techniques like interrupting,
> staggering, queueing, or spring systems, then go with elm-style-animation,
> it is great.
>
> On Tuesday, October 4, 2016 at 7:04:15 PM UTC+2, Rex van der Spuy wrote:
>>
>> It works!!! :)
>> Thanks so much for walking me through it (and thanks again for a
>> fantastic library!)
>>
>> I do a *lot* of these sorts of these simple transitions so it's
>> definitely been worth the effort to get this up and running.
>>
>> On Tuesday, October 4, 2016 at 10:30:37 AM UTC-4, Matthew Griffith wrote:
>>>
>>> Oh! You need to add the animation subscription as well.
>>>
>>> Sub.batch this with your current subscriptions
>>>
>>> subscriptions : Model -> Sub Msgsubscriptions model =
>>> Animation.subscription Animate [ model.storyTextStyle ]
>>>
>>>
>>> On Tuesday, October 4, 2016 at 9:28:25 AM UTC-4, Rex van der Spuy wrote:
Thanks Mathew!!
I've added your code suggestion, but so far no luck yet (FadeInOut is
called, but not SendStoryComponents)
If anyone wants to take a look at the current Main.elm file where all
this code is running, it's here:
https://gist.github.com/kittykatattack/f05b42efc6ecf09ddf244bbafd18edb3
On Monday, October 3, 2016 at 5:24:43 PM UTC-4, Matthew Griffith wrote:
>
> In your `Animate animMsg` area, you're not returning the cmds, which
> is how the msg is fired :).
>
> Change your code to this:
>
> Animate animMsg ->
> let
> (newStyle, cmds) =
> Animation.Messenger.update
> animMsg
> model.storyTextStyle
> in
> ( { model
> | storyTextStyle = newStyle
>}
> , cmds
> )
>
>
>
> On Monday, October 3, 2016 at 2:09:57 PM UTC-4, Rex van der Spuy wrote:
>>
>> Thanks everyone, I like these ideas!
>>
>> Here's what I've got so far - but it's not working... yet! :)
>> Could any of you with more experience with elm-style-animation let me
>> know what I'm doing wrong?
>>
>> I've imported Animation and Animation.Messener, exposing State:
>>
>> ```
>> import Animation
>> import Animation.Messenger exposing (State)
>> ```
>>
>> I created a style for my text called `storyTextStyle`
>>
>> ```
>> , storyTextStyle : Animation.Messenger.State Msg
>>
>> , storyTextStyle =
>> Animation.style
>> [ Animation.opacity 1.0
>> ]
>>
>> ```
>> I added it to the view, which displays my story output text
>>
>> ```
>> div [ storyCardStyle ]
>> [ p ( Animation.render model.storyTextStyle ++ [
>> storyParagraphStyle ]) [ text model.storyOutput ] ]
>> ```
>>
>> I have an MDL button that triggers a `FadeInOut` update message:
>>
>> ```
>> , Button.onClick FadeInOut
>> ```
>>
>> The `FadeInOut` message and `Animate` message are in the `update`
>> function:
>>
>> ```
>> Animate animMsg ->
>> let
>> (newStyle, cmds) =
>> Animation.Messenger.update
>> animMsg
>> model.storyTextStyle
>> in
>> { model
>> | storyTextStyle = newStyle
>> }
>> ! [ ]
>>
>> FadeInOut ->
>> let
>> newStyle =
>> Animation.interrupt
>> [ Animation.to [Animation.opacity 0]
>> , Animation.Messenger.send SendStoryComponents
>> , Animation.to [Animation.opacity 1]
>> ]
>> model.storyTextStyle
>> in
>> { model
>> | storyTextStyle = newStyle
>> }
>> ! [ ]
>> ```
>>
>> ... all this compiles and I've tested `FadeInOut` with Debug.crash to
>> make sure it's called - and it is definitely being called when I click
>> the
>> button.
>> But, my `SendStoryComponents`, which generates the new text to fade
>> is, is never called.
>> Here's `SendStoryComponents` (it uses a port that does some fun stuff
>> with nlp-compromise.js to generate a random story based on user input
>> and
>>
[elm-discuss] Re: Simple Fade In/Out effect?
elm-style-animation is great, but if you want simple fade-in fade-out
effects the best way is to toggle classes in the html and use css
animations, or transitions.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
https://css-tricks.com/snippets/css/keyframe-animation-syntax/
You'll avoid having animation state and a lot of animation related code and
they can be very efficient when used with transforms or opacity.
That said if you need advanced animation techniques like interrupting,
staggering, queueing, or spring systems, then go with elm-style-animation,
it is great.
On Tuesday, October 4, 2016 at 7:04:15 PM UTC+2, Rex van der Spuy wrote:
>
> It works!!! :)
> Thanks so much for walking me through it (and thanks again for a fantastic
> library!)
>
> I do a *lot* of these sorts of these simple transitions so it's definitely
> been worth the effort to get this up and running.
>
> On Tuesday, October 4, 2016 at 10:30:37 AM UTC-4, Matthew Griffith wrote:
>>
>> Oh! You need to add the animation subscription as well.
>>
>> Sub.batch this with your current subscriptions
>>
>> subscriptions : Model -> Sub Msgsubscriptions model =
>> Animation.subscription Animate [ model.storyTextStyle ]
>>
>>
>> On Tuesday, October 4, 2016 at 9:28:25 AM UTC-4, Rex van der Spuy wrote:
>>>
>>> Thanks Mathew!!
>>> I've added your code suggestion, but so far no luck yet (FadeInOut is
>>> called, but not SendStoryComponents)
>>>
>>> If anyone wants to take a look at the current Main.elm file where all
>>> this code is running, it's here:
>>>
>>> https://gist.github.com/kittykatattack/f05b42efc6ecf09ddf244bbafd18edb3
>>>
>>>
>>> On Monday, October 3, 2016 at 5:24:43 PM UTC-4, Matthew Griffith wrote:
In your `Animate animMsg` area, you're not returning the cmds, which is
how the msg is fired :).
Change your code to this:
Animate animMsg ->
let
(newStyle, cmds) =
Animation.Messenger.update
animMsg
model.storyTextStyle
in
( { model
| storyTextStyle = newStyle
}
, cmds
)
On Monday, October 3, 2016 at 2:09:57 PM UTC-4, Rex van der Spuy wrote:
>
> Thanks everyone, I like these ideas!
>
> Here's what I've got so far - but it's not working... yet! :)
> Could any of you with more experience with elm-style-animation let me
> know what I'm doing wrong?
>
> I've imported Animation and Animation.Messener, exposing State:
>
> ```
> import Animation
> import Animation.Messenger exposing (State)
> ```
>
> I created a style for my text called `storyTextStyle`
>
> ```
> , storyTextStyle : Animation.Messenger.State Msg
>
> , storyTextStyle =
> Animation.style
> [ Animation.opacity 1.0
> ]
>
> ```
> I added it to the view, which displays my story output text
>
> ```
> div [ storyCardStyle ]
> [ p ( Animation.render model.storyTextStyle ++ [
> storyParagraphStyle ]) [ text model.storyOutput ] ]
> ```
>
> I have an MDL button that triggers a `FadeInOut` update message:
>
> ```
> , Button.onClick FadeInOut
> ```
>
> The `FadeInOut` message and `Animate` message are in the `update`
> function:
>
> ```
> Animate animMsg ->
> let
> (newStyle, cmds) =
> Animation.Messenger.update
> animMsg
> model.storyTextStyle
> in
> { model
> | storyTextStyle = newStyle
> }
> ! [ ]
>
> FadeInOut ->
> let
> newStyle =
> Animation.interrupt
> [ Animation.to [Animation.opacity 0]
> , Animation.Messenger.send SendStoryComponents
> , Animation.to [Animation.opacity 1]
> ]
> model.storyTextStyle
> in
> { model
> | storyTextStyle = newStyle
> }
> ! [ ]
> ```
>
> ... all this compiles and I've tested `FadeInOut` with Debug.crash to
> make sure it's called - and it is definitely being called when I click
> the
> button.
> But, my `SendStoryComponents`, which generates the new text to fade
> is, is never called.
> Here's `SendStoryComponents` (it uses a port that does some fun stuff
> with nlp-compromise.js to generate a random story based on user input and
> story templates)
>
> ```
> SendStoryComponents ->
> let
> words =
> model.words
>
> toList string =
> String.Extra.clean string
> |> String.split " "
>
>
> words' =
> { places = toList model.plac
[elm-discuss] Re: Simple Fade In/Out effect?
It works!!! :)
Thanks so much for walking me through it (and thanks again for a fantastic
library!)
I do a *lot* of these sorts of these simple transitions so it's definitely
been worth the effort to get this up and running.
On Tuesday, October 4, 2016 at 10:30:37 AM UTC-4, Matthew Griffith wrote:
>
> Oh! You need to add the animation subscription as well.
>
> Sub.batch this with your current subscriptions
>
> subscriptions : Model -> Sub Msgsubscriptions model =
> Animation.subscription Animate [ model.storyTextStyle ]
>
>
> On Tuesday, October 4, 2016 at 9:28:25 AM UTC-4, Rex van der Spuy wrote:
>>
>> Thanks Mathew!!
>> I've added your code suggestion, but so far no luck yet (FadeInOut is
>> called, but not SendStoryComponents)
>>
>> If anyone wants to take a look at the current Main.elm file where all
>> this code is running, it's here:
>>
>> https://gist.github.com/kittykatattack/f05b42efc6ecf09ddf244bbafd18edb3
>>
>>
>> On Monday, October 3, 2016 at 5:24:43 PM UTC-4, Matthew Griffith wrote:
>>>
>>> In your `Animate animMsg` area, you're not returning the cmds, which is
>>> how the msg is fired :).
>>>
>>> Change your code to this:
>>>
>>> Animate animMsg ->
>>> let
>>> (newStyle, cmds) =
>>> Animation.Messenger.update
>>> animMsg
>>> model.storyTextStyle
>>> in
>>> ( { model
>>> | storyTextStyle = newStyle
>>>}
>>> , cmds
>>> )
>>>
>>>
>>>
>>> On Monday, October 3, 2016 at 2:09:57 PM UTC-4, Rex van der Spuy wrote:
Thanks everyone, I like these ideas!
Here's what I've got so far - but it's not working... yet! :)
Could any of you with more experience with elm-style-animation let me
know what I'm doing wrong?
I've imported Animation and Animation.Messener, exposing State:
```
import Animation
import Animation.Messenger exposing (State)
```
I created a style for my text called `storyTextStyle`
```
, storyTextStyle : Animation.Messenger.State Msg
, storyTextStyle =
Animation.style
[ Animation.opacity 1.0
]
```
I added it to the view, which displays my story output text
```
div [ storyCardStyle ]
[ p ( Animation.render model.storyTextStyle ++ [
storyParagraphStyle ]) [ text model.storyOutput ] ]
```
I have an MDL button that triggers a `FadeInOut` update message:
```
, Button.onClick FadeInOut
```
The `FadeInOut` message and `Animate` message are in the `update`
function:
```
Animate animMsg ->
let
(newStyle, cmds) =
Animation.Messenger.update
animMsg
model.storyTextStyle
in
{ model
| storyTextStyle = newStyle
}
! [ ]
FadeInOut ->
let
newStyle =
Animation.interrupt
[ Animation.to [Animation.opacity 0]
, Animation.Messenger.send SendStoryComponents
, Animation.to [Animation.opacity 1]
]
model.storyTextStyle
in
{ model
| storyTextStyle = newStyle
}
! [ ]
```
... all this compiles and I've tested `FadeInOut` with Debug.crash to
make sure it's called - and it is definitely being called when I click the
button.
But, my `SendStoryComponents`, which generates the new text to fade is,
is never called.
Here's `SendStoryComponents` (it uses a port that does some fun stuff
with nlp-compromise.js to generate a random story based on user input and
story templates)
```
SendStoryComponents ->
let
words =
model.words
toList string =
String.Extra.clean string
|> String.split " "
words' =
{ places = toList model.places
, livingThings = toList model.livingThings
, objects = toList model.objects
, actions = toList model.actions
, moods = toList model.moods
}
model' =
{ model
| words = words'
}
in
(model', sendStoryComponents(model'.words,
StoryTemplates.stories))
```
(`SendStoryComponents` does work, if I don't call it through the
`FadeInOut` message.)
Can anyone tell by looking at that why `Animation.Messenger.send` might
not be calling `SendStoryComponents` ?
>>>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to elm-
[elm-discuss] Re: Simple Fade In/Out effect?
Oh! You need to add the animation subscription as well.
Sub.batch this with your current subscriptions
subscriptions : Model -> Sub Msgsubscriptions model =
Animation.subscription Animate [ model.storyTextStyle ]
On Tuesday, October 4, 2016 at 9:28:25 AM UTC-4, Rex van der Spuy wrote:
>
> Thanks Mathew!!
> I've added your code suggestion, but so far no luck yet (FadeInOut is
> called, but not SendStoryComponents)
>
> If anyone wants to take a look at the current Main.elm file where all this
> code is running, it's here:
>
> https://gist.github.com/kittykatattack/f05b42efc6ecf09ddf244bbafd18edb3
>
>
> On Monday, October 3, 2016 at 5:24:43 PM UTC-4, Matthew Griffith wrote:
>>
>> In your `Animate animMsg` area, you're not returning the cmds, which is
>> how the msg is fired :).
>>
>> Change your code to this:
>>
>> Animate animMsg ->
>> let
>> (newStyle, cmds) =
>> Animation.Messenger.update
>> animMsg
>> model.storyTextStyle
>> in
>> ( { model
>> | storyTextStyle = newStyle
>>}
>> , cmds
>> )
>>
>>
>>
>> On Monday, October 3, 2016 at 2:09:57 PM UTC-4, Rex van der Spuy wrote:
>>>
>>> Thanks everyone, I like these ideas!
>>>
>>> Here's what I've got so far - but it's not working... yet! :)
>>> Could any of you with more experience with elm-style-animation let me
>>> know what I'm doing wrong?
>>>
>>> I've imported Animation and Animation.Messener, exposing State:
>>>
>>> ```
>>> import Animation
>>> import Animation.Messenger exposing (State)
>>> ```
>>>
>>> I created a style for my text called `storyTextStyle`
>>>
>>> ```
>>> , storyTextStyle : Animation.Messenger.State Msg
>>>
>>> , storyTextStyle =
>>> Animation.style
>>> [ Animation.opacity 1.0
>>> ]
>>>
>>> ```
>>> I added it to the view, which displays my story output text
>>>
>>> ```
>>> div [ storyCardStyle ]
>>> [ p ( Animation.render model.storyTextStyle ++ [
>>> storyParagraphStyle ]) [ text model.storyOutput ] ]
>>> ```
>>>
>>> I have an MDL button that triggers a `FadeInOut` update message:
>>>
>>> ```
>>> , Button.onClick FadeInOut
>>> ```
>>>
>>> The `FadeInOut` message and `Animate` message are in the `update`
>>> function:
>>>
>>> ```
>>> Animate animMsg ->
>>> let
>>> (newStyle, cmds) =
>>> Animation.Messenger.update
>>> animMsg
>>> model.storyTextStyle
>>> in
>>> { model
>>> | storyTextStyle = newStyle
>>> }
>>> ! [ ]
>>>
>>> FadeInOut ->
>>> let
>>> newStyle =
>>> Animation.interrupt
>>> [ Animation.to [Animation.opacity 0]
>>> , Animation.Messenger.send SendStoryComponents
>>> , Animation.to [Animation.opacity 1]
>>> ]
>>> model.storyTextStyle
>>> in
>>> { model
>>> | storyTextStyle = newStyle
>>> }
>>> ! [ ]
>>> ```
>>>
>>> ... all this compiles and I've tested `FadeInOut` with Debug.crash to
>>> make sure it's called - and it is definitely being called when I click the
>>> button.
>>> But, my `SendStoryComponents`, which generates the new text to fade is,
>>> is never called.
>>> Here's `SendStoryComponents` (it uses a port that does some fun stuff
>>> with nlp-compromise.js to generate a random story based on user input and
>>> story templates)
>>>
>>> ```
>>> SendStoryComponents ->
>>> let
>>> words =
>>> model.words
>>>
>>> toList string =
>>> String.Extra.clean string
>>> |> String.split " "
>>>
>>>
>>> words' =
>>> { places = toList model.places
>>> , livingThings = toList model.livingThings
>>> , objects = toList model.objects
>>> , actions = toList model.actions
>>> , moods = toList model.moods
>>> }
>>>
>>> model' =
>>> { model
>>> | words = words'
>>> }
>>> in
>>> (model', sendStoryComponents(model'.words, StoryTemplates.stories))
>>> ```
>>> (`SendStoryComponents` does work, if I don't call it through the
>>> `FadeInOut` message.)
>>>
>>> Can anyone tell by looking at that why `Animation.Messenger.send` might
>>> not be calling `SendStoryComponents` ?
>>>
>>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[elm-discuss] Re: Simple Fade In/Out effect?
Thanks Mathew!!
I've added your code suggestion, but so far no luck yet (FadeInOut is
called, but not SendStoryComponents)
If anyone wants to take a look at the current Main.elm file where all this
code is running, it's here:
https://gist.github.com/kittykatattack/f05b42efc6ecf09ddf244bbafd18edb3
On Monday, October 3, 2016 at 5:24:43 PM UTC-4, Matthew Griffith wrote:
>
> In your `Animate animMsg` area, you're not returning the cmds, which is
> how the msg is fired :).
>
> Change your code to this:
>
> Animate animMsg ->
> let
> (newStyle, cmds) =
> Animation.Messenger.update
> animMsg
> model.storyTextStyle
> in
> ( { model
> | storyTextStyle = newStyle
>}
> , cmds
> )
>
>
>
> On Monday, October 3, 2016 at 2:09:57 PM UTC-4, Rex van der Spuy wrote:
>>
>> Thanks everyone, I like these ideas!
>>
>> Here's what I've got so far - but it's not working... yet! :)
>> Could any of you with more experience with elm-style-animation let me
>> know what I'm doing wrong?
>>
>> I've imported Animation and Animation.Messener, exposing State:
>>
>> ```
>> import Animation
>> import Animation.Messenger exposing (State)
>> ```
>>
>> I created a style for my text called `storyTextStyle`
>>
>> ```
>> , storyTextStyle : Animation.Messenger.State Msg
>>
>> , storyTextStyle =
>> Animation.style
>> [ Animation.opacity 1.0
>> ]
>>
>> ```
>> I added it to the view, which displays my story output text
>>
>> ```
>> div [ storyCardStyle ]
>> [ p ( Animation.render model.storyTextStyle ++ [
>> storyParagraphStyle ]) [ text model.storyOutput ] ]
>> ```
>>
>> I have an MDL button that triggers a `FadeInOut` update message:
>>
>> ```
>> , Button.onClick FadeInOut
>> ```
>>
>> The `FadeInOut` message and `Animate` message are in the `update`
>> function:
>>
>> ```
>> Animate animMsg ->
>> let
>> (newStyle, cmds) =
>> Animation.Messenger.update
>> animMsg
>> model.storyTextStyle
>> in
>> { model
>> | storyTextStyle = newStyle
>> }
>> ! [ ]
>>
>> FadeInOut ->
>> let
>> newStyle =
>> Animation.interrupt
>> [ Animation.to [Animation.opacity 0]
>> , Animation.Messenger.send SendStoryComponents
>> , Animation.to [Animation.opacity 1]
>> ]
>> model.storyTextStyle
>> in
>> { model
>> | storyTextStyle = newStyle
>> }
>> ! [ ]
>> ```
>>
>> ... all this compiles and I've tested `FadeInOut` with Debug.crash to
>> make sure it's called - and it is definitely being called when I click the
>> button.
>> But, my `SendStoryComponents`, which generates the new text to fade is,
>> is never called.
>> Here's `SendStoryComponents` (it uses a port that does some fun stuff
>> with nlp-compromise.js to generate a random story based on user input and
>> story templates)
>>
>> ```
>> SendStoryComponents ->
>> let
>> words =
>> model.words
>>
>> toList string =
>> String.Extra.clean string
>> |> String.split " "
>>
>>
>> words' =
>> { places = toList model.places
>> , livingThings = toList model.livingThings
>> , objects = toList model.objects
>> , actions = toList model.actions
>> , moods = toList model.moods
>> }
>>
>> model' =
>> { model
>> | words = words'
>> }
>> in
>> (model', sendStoryComponents(model'.words, StoryTemplates.stories))
>> ```
>> (`SendStoryComponents` does work, if I don't call it through the
>> `FadeInOut` message.)
>>
>> Can anyone tell by looking at that why `Animation.Messenger.send` might
>> not be calling `SendStoryComponents` ?
>>
>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[elm-discuss] Re: Simple Fade In/Out effect?
In your `Animate animMsg` area, you're not returning the cmds, which is how
the msg is fired :).
Change your code to this:
Animate animMsg ->
let
(newStyle, cmds) =
Animation.Messenger.update
animMsg
model.storyTextStyle
in
( { model
| storyTextStyle = newStyle
}
, cmds
)
On Monday, October 3, 2016 at 2:09:57 PM UTC-4, Rex van der Spuy wrote:
>
> Thanks everyone, I like these ideas!
>
> Here's what I've got so far - but it's not working... yet! :)
> Could any of you with more experience with elm-style-animation let me know
> what I'm doing wrong?
>
> I've imported Animation and Animation.Messener, exposing State:
>
> ```
> import Animation
> import Animation.Messenger exposing (State)
> ```
>
> I created a style for my text called `storyTextStyle`
>
> ```
> , storyTextStyle : Animation.Messenger.State Msg
>
> , storyTextStyle =
> Animation.style
> [ Animation.opacity 1.0
> ]
>
> ```
> I added it to the view, which displays my story output text
>
> ```
> div [ storyCardStyle ]
> [ p ( Animation.render model.storyTextStyle ++ [
> storyParagraphStyle ]) [ text model.storyOutput ] ]
> ```
>
> I have an MDL button that triggers a `FadeInOut` update message:
>
> ```
> , Button.onClick FadeInOut
> ```
>
> The `FadeInOut` message and `Animate` message are in the `update` function:
>
> ```
> Animate animMsg ->
> let
> (newStyle, cmds) =
> Animation.Messenger.update
> animMsg
> model.storyTextStyle
> in
> { model
> | storyTextStyle = newStyle
> }
> ! [ ]
>
> FadeInOut ->
> let
> newStyle =
> Animation.interrupt
> [ Animation.to [Animation.opacity 0]
> , Animation.Messenger.send SendStoryComponents
> , Animation.to [Animation.opacity 1]
> ]
> model.storyTextStyle
> in
> { model
> | storyTextStyle = newStyle
> }
> ! [ ]
> ```
>
> ... all this compiles and I've tested `FadeInOut` with Debug.crash to make
> sure it's called - and it is definitely being called when I click the
> button.
> But, my `SendStoryComponents`, which generates the new text to fade is, is
> never called.
> Here's `SendStoryComponents` (it uses a port that does some fun stuff with
> nlp-compromise.js to generate a random story based on user input and story
> templates)
>
> ```
> SendStoryComponents ->
> let
> words =
> model.words
>
> toList string =
> String.Extra.clean string
> |> String.split " "
>
>
> words' =
> { places = toList model.places
> , livingThings = toList model.livingThings
> , objects = toList model.objects
> , actions = toList model.actions
> , moods = toList model.moods
> }
>
> model' =
> { model
> | words = words'
> }
> in
> (model', sendStoryComponents(model'.words, StoryTemplates.stories))
> ```
> (`SendStoryComponents` does work, if I don't call it through the
> `FadeInOut` message.)
>
> Can anyone tell by looking at that why `Animation.Messenger.send` might
> not be calling `SendStoryComponents` ?
>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[elm-discuss] Re: Simple Fade In/Out effect?
Thanks everyone, I like these ideas!
Here's what I've got so far - but it's not working... yet! :)
Could any of you with more experience with elm-style-animation let me know
what I'm doing wrong?
I've imported Animation and Animation.Messener, exposing State:
```
import Animation
import Animation.Messenger exposing (State)
```
I created a style for my text called `storyTextStyle`
```
, storyTextStyle : Animation.Messenger.State Msg
, storyTextStyle =
Animation.style
[ Animation.opacity 1.0
]
```
I added it to the view, which displays my story output text
```
div [ storyCardStyle ]
[ p ( Animation.render model.storyTextStyle ++ [
storyParagraphStyle ]) [ text model.storyOutput ] ]
```
I have an MDL button that triggers a `FadeInOut` update message:
```
, Button.onClick FadeInOut
```
The `FadeInOut` message and `Animate` message are in the `update` function:
```
Animate animMsg ->
let
(newStyle, cmds) =
Animation.Messenger.update
animMsg
model.storyTextStyle
in
{ model
| storyTextStyle = newStyle
}
! [ ]
FadeInOut ->
let
newStyle =
Animation.interrupt
[ Animation.to [Animation.opacity 0]
, Animation.Messenger.send SendStoryComponents
, Animation.to [Animation.opacity 1]
]
model.storyTextStyle
in
{ model
| storyTextStyle = newStyle
}
! [ ]
```
... all this compiles and I've tested `FadeInOut` with Debug.crash to make
sure it's called - and it is definitely being called when I click the
button.
But, my `SendStoryComponents`, which generates the new text to fade is, is
never called.
Here's `SendStoryComponents` (it uses a port that does some fun stuff with
nlp-compromise.js to generate a random story based on user input and story
templates)
```
SendStoryComponents ->
let
words =
model.words
toList string =
String.Extra.clean string
|> String.split " "
words' =
{ places = toList model.places
, livingThings = toList model.livingThings
, objects = toList model.objects
, actions = toList model.actions
, moods = toList model.moods
}
model' =
{ model
| words = words'
}
in
(model', sendStoryComponents(model'.words, StoryTemplates.stories))
```
(`SendStoryComponents` does work, if I don't call it through the
`FadeInOut` message.)
Can anyone tell by looking at that why `Animation.Messenger.send` might not
be calling `SendStoryComponents` ?
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[elm-discuss] Re: Simple Fade In/Out effect?
You can also do it via pure CSS via the 'transition' property, just have the old fade out at like 1s time and the new fade in starting at the 1s time (or 1.001s to prevent a flicker in some browsers) while flipping display:none at the 1s mark (or just deleting it then entirely). A method I like is one where the height is shrunk on the old and grown on the new so they seem to flip between each other, which makes it easy to remove the old one later without any flickering oddities too. On Sunday, October 2, 2016 at 6:24:56 AM UTC-6, Oliver Searle-Barnes wrote: > > Another option, which avoids having to add anything to your model, would be > > ``` > crossFadeTextTo text = > Animation.interrupt > [ Animation.to [Animation.opacity 0] > , Animation.send (DoneFadingOutOldTextPleaseSwitchModelToNewText text) > , Animation.to [Animation.opacity 1] > ] > ``` > > > On Friday, 30 September 2016 21:01:37 UTC+2, Matthew Griffith wrote: >> >> >> That's a pretty reasonable way to do it. Another option could be could >> be to use one div and use `Animation.send`. Basically you could do >> something like this. >> >> >> ``` >> Animation.interrupt >> [ Animation.to [Animation.opacity 0] >> , Animation.send DoneFadingOutOldTextPleaseSwitchModelToNewText >> , Animation.to [Animation.opacity 1] >> ] >> ``` >> >> In this case you'd have to keep new text in a 'staging area' in your >> model and then switch it in >> when DoneFadingOutOldTextPleaseSwitchModelToNewText fires. >> >> >> On Friday, September 30, 2016 at 2:30:53 PM UTC-4, Rex van der Spuy wrote: >>> >>> Hi Everyone! >>> >>> Just a quick question: Can anyone suggest a simple way to fade out some >>> old text and fade in some new text when a `model.text` value changes? >>> >>> I did this once a few apps ago where I created 2 `div` layers: >>> `currentText` and `previousText` >>> Then, when the text value changed, I moved the text to the previousText >>> layer and faded it out, and then displayed the updated text on the >>> currentText layer and faded it in. >>> (I used `elm-html-animation` for the fade effect.) >>> >>> Does this seem reasonable or is there a better, easier way? >>> >> -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[elm-discuss] Re: Simple Fade In/Out effect?
Another option, which avoids having to add anything to your model, would be ``` crossFadeTextTo text = Animation.interrupt [ Animation.to [Animation.opacity 0] , Animation.send (DoneFadingOutOldTextPleaseSwitchModelToNewText text) , Animation.to [Animation.opacity 1] ] ``` On Friday, 30 September 2016 21:01:37 UTC+2, Matthew Griffith wrote: > > > That's a pretty reasonable way to do it. Another option could be could be > to use one div and use `Animation.send`. Basically you could do something > like this. > > > ``` > Animation.interrupt > [ Animation.to [Animation.opacity 0] > , Animation.send DoneFadingOutOldTextPleaseSwitchModelToNewText > , Animation.to [Animation.opacity 1] > ] > ``` > > In this case you'd have to keep new text in a 'staging area' in your model > and then switch it in when DoneFadingOutOldTextPleaseSwitchModelToNewText > fires. > > > On Friday, September 30, 2016 at 2:30:53 PM UTC-4, Rex van der Spuy wrote: >> >> Hi Everyone! >> >> Just a quick question: Can anyone suggest a simple way to fade out some >> old text and fade in some new text when a `model.text` value changes? >> >> I did this once a few apps ago where I created 2 `div` layers: >> `currentText` and `previousText` >> Then, when the text value changed, I moved the text to the previousText >> layer and faded it out, and then displayed the updated text on the >> currentText layer and faded it in. >> (I used `elm-html-animation` for the fade effect.) >> >> Does this seem reasonable or is there a better, easier way? >> > -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[elm-discuss] Re: Simple Fade In/Out effect?
That's a pretty reasonable way to do it. Another option could be could be to use one div and use `Animation.send`. Basically you could do something like this. ``` Animation.interrupt [ Animation.to [Animation.opacity 0] , Animation.send DoneFadingOutOldTextPleaseSwitchModelToNewText , Animation.to [Animation.opacity 1] ] ``` In this case you'd have to keep new text in a 'staging area' in your model and then switch it in when DoneFadingOutOldTextPleaseSwitchModelToNewText fires. On Friday, September 30, 2016 at 2:30:53 PM UTC-4, Rex van der Spuy wrote: > > Hi Everyone! > > Just a quick question: Can anyone suggest a simple way to fade out some > old text and fade in some new text when a `model.text` value changes? > > I did this once a few apps ago where I created 2 `div` layers: > `currentText` and `previousText` > Then, when the text value changed, I moved the text to the previousText > layer and faded it out, and then displayed the updated text on the > currentText layer and faded it in. > (I used `elm-html-animation` for the fade effect.) > > Does this seem reasonable or is there a better, easier way? > -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
