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 >>>>>> 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 [email protected]. For more options, visit https://groups.google.com/d/optout.
