How to create a Flip Card in Storyline 360 (with WCAG Accessibility tips)

Поделиться
HTML-код
  • Опубликовано: 22 дек 2024

Комментарии • 21

  • @markspermon-articulatestor6280
    @markspermon-articulatestor6280 Год назад +2

    Great video! Love the way you set up the flipcard animation, and how you have thought about accessibility in this interaction.

    • @elearningjourney
      @elearningjourney  Год назад

      Thanks so much, Mark :) - very kind of you to say and glad you enjoyed the video!

  • @CD_AFI
    @CD_AFI Год назад

    Great video, thanks! I'm pretty new to Storyline so was good to see a solution for the flip interaction - I'm also beginning focus more on accessibility so the tips there were great, too! I'm literally going to go through the rest of your videos now!

    • @elearningjourney
      @elearningjourney  Год назад

      Thanks so much and we'll be aiming to have some more tips and tricks up soon!

  • @HeyitsLalalyka
    @HeyitsLalalyka Год назад +3

    Hello! Thank you for sharing this. Do you have any tips on what to do to flip it back to the front? I've been playing around with the triggers but I can't seem to get it right.

    • @tuboto9
      @tuboto9 20 дней назад

      Same here

  • @amdavisdesign
    @amdavisdesign 8 месяцев назад

    Hello, awesome tutorial. Is there a way to keep the flipped card flipped while the other flip? Right now, I can only flip one at a time. I want the user to be able to see all 4 "revealed" if that makes sense.

  • @tuboto9
    @tuboto9 20 дней назад

    The option skip animations ... why that option ?

  • @RababaInc
    @RababaInc Год назад

    thank you, this was helpful!
    how did you add that color palette on the left side of the slide? and how did you make that color palette? currently struggling with the desing aspect of storyline 😅

    • @elearningjourney
      @elearningjourney  Год назад +1

      Sorry, I thought I'd replied to this! All I've done with that palette is added a few rectangles off canvas on the master slide - I just sometimes find this an easy method of quickly eye dropping a colour I need.

  • @shaneYTeditor
    @shaneYTeditor Год назад +1

    Like it but it is a very long winded way of doing this. I just put the reveal card on top of the button with the intial state of hidden, when the button is clicked trigger the button to hidden and the reveal card changes state to nornal with an entrance swivel animation..

    • @elearningjourney
      @elearningjourney  Год назад +1

      Yeah, that's a really good solution as well and one we will sometimes use!
      The thing that brought us to make this longer version, and wanting to share it, was a client not liking the fact that swivel always had a few swivels so it didn't look like a genuine flip. This was able to capture that single flip a little better.
      Thanks for adding your thoughts, we love to hear input!

  • @balajiperumal8357
    @balajiperumal8357 4 месяца назад

    I tried but did not get the same output. please share the sample file

  • @slytherinsheir1308
    @slytherinsheir1308 Год назад

    Hi, I'm using Storyline 3 and it doesn't have the jump to time feature that you use on the back card - is there any workaround for this? I'll even take a javascript option if there is one, please - many thanks!

    • @wormholeinteractive
      @wormholeinteractive Год назад

      Have you tried GSAP animation with Javascript?

    • @slytherinsheir1308
      @slytherinsheir1308 Год назад

      @@wormholeinteractive No, I haven't! Do you have a link to a tutorial please? Thank you so much!

    • @elearningjourney
      @elearningjourney  Год назад

      Hi! It's been a while since I've used an older version so I can try have a look, but off the top of my head could you use more layers than we do? And use show layer at the cue point to cut the animation and just display the back?

    • @slytherinsheir1308
      @slytherinsheir1308 Год назад

      @@elearningjourney Sounds like this could work! I'll give it a try and let you know, thank you so much 👍

    • @slytherinsheir1308
      @slytherinsheir1308 Год назад

      @@elearningjourney I tried this but couldn't make it work (unless I'm doing something wrong??) - the back of the card wants to swivel at least twice - aaaaargh! Never mind, at least I know how to do it when I upgrade to the newest Storyline - thanks anyway!

  • @WillBachmaneducation
    @WillBachmaneducation 11 месяцев назад

    Thank you!