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 elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
