Improve Animation Performance with FLIP and the Ionic Animations API

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

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

  • @tylerpashigian7706
    @tylerpashigian7706 3 года назад

    Is there a way to combine this idea with navigation (for example Angular Router) to give an effect of expanding "into" a detail page where its smoke and mirrors where the navigation is just delayed until the animation is complete?

    • @JoshuaMorony
      @JoshuaMorony  3 года назад

      You might be interested in checkout out shared element transitions: www.joshmorony.com/creating-a-shared-element-transition-animation-in-ionic/

    • @tylerpashigian7706
      @tylerpashigian7706 3 года назад

      @@JoshuaMorony Haha I knew I remember you had a tutorial about that but couldn't find it after 30 min of looking. Thank you!

  •  4 года назад +1

    Simply amazing, Josh!

  • @gusgonnet
    @gusgonnet 4 года назад

    very cool animation and video, thanks Joshua!

  • @김한호-w2k
    @김한호-w2k 3 года назад

    Nice concept! What if ".expanded-card" class has "transform" property? If I want to animate element size or position using 'scale' or 'transitionX', can I use flip method?

  • @marcelocch
    @marcelocch 4 года назад +1

    Nice video! What If want to get data when expanded from an API o maybe open a Modal component from that clicked card event.
    Just wondering
    Thanks for the video!

  • @bboyBoomgaarden
    @bboyBoomgaarden 4 года назад

    A really noob question but I've been struggling with this for awhile now. I'm following your video and when i updated my scss file, it shows the style change in the inspector, but it isn't applying the change. I see that you're using a .css file instead of a scss file, am I doing something wrong?

  • @ahmedaouari6586
    @ahmedaouari6586 4 года назад

    Hello
    please help me to program an introl page to display underline for new users

  • @devef
    @devef 4 года назад

    Great video!

  • @everydaystoriesanimated2318
    @everydaystoriesanimated2318 4 года назад

    *Top Content. *you deserve more subscribers 😎

  • @mrmoody8247
    @mrmoody8247 4 года назад

    didnt find it in ur website ?

  • @mrmoody8247
    @mrmoody8247 4 года назад

    but it in ur website i cant wait man , u are smart to be anust

  • @mrmoody8247
    @mrmoody8247 4 года назад

    morony dose it work if was a picture tabing ?

  •  4 года назад +1

    Why are you wearing purple during the video? :(

  • @dinaiswatching
    @dinaiswatching 4 года назад

    Although a nice cantrip, the example is useless. Removing a positioned class jitters the element ruining the reverse animation.

    • @JoshuaMorony
      @JoshuaMorony  4 года назад

      I have an example with the reverse animation working here: www.joshmorony.com/advanced-card-transition-with-the-ionic-animations-api/ - you can't just reverse the existing animation, you have to create a new animation using the same concept in reverse