Slick web animations — Polycasts #23

Slick web animations — Polycasts #23


Comments

  1. Post
    Author
  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
    Felix Edelmann

    First of all, big thanks for your videos! I really enjoy watching Polycasts.

    But I've got a question: Can I use animations in auto-binding templates? For example, I also have a login dialog in my web application and I want to show and hide it with animations. Is it easier to create an own element for that? Or in general, should I use custom elements even when they're only used once?

    Another thing: Is there a way to connect a neon-animated-pages with paper-tabs? So, I click at the next tab and the page translates to the left and I click at the previous tab and the page translates to the right. I used click listeners on the tabs to dynamically change the animation properties of neon-animated-pages, but unfortunately my listener function is called after the page transition has already started.

  5. Post
    Author
  6. Post
    Author
    Khaled Dostzada

    The easing options suck. Even flash had better ways to add easing without having to mess around with key frames

  7. Post
    Author
    Burak Bağdatlı

    I'm new to web development and these videos are pretty much the only thing that keeps me using Polymer. Otherwise, it's too difficult for me to understand. Like that state preservation thing would have confused me for days probably. Thanks, @Rob Dodson !

  8. Post
    Author
    Aldira Putra

    Wow! That's great @Rob Dodson really inspiring!
    By the way, I have a question about the state. If the display : none should called with handler when animation goes end, why we not do it on open as well?

  9. Post
    Author
  10. Post
    Author
  11. Post
    Author
    Kumar Abhishek

    Hey…great episode @Rob Dodson!! I have one question…is there a way to animate a custom Javascript property? In particular, I want to scroll a page with animation. Thanks!

  12. Post
    Author
    Werner Swart

    Hi Rob, will you be doing an episode on using Polymer with Angular2 when Angular2 is finally production ready?

  13. Post
    Author
    HYng Hwang

    Rob Dodson……. very detailed comment, and explain…..! 

    how to use the neon-animation behaviors from the Polymer Element catalog to mixing slick animation behavior without the hassle of managing everything yourself. 

    https://github.com/Polymer/polycasts/blob/master/ep23-neon-animation/login-panel/login-panel.html#L81

  14. Post
    Author
    Sebastian Kloppe

    Hey,
    thanks for your great videos. very useful.
    Okay, to my question, is there a Codelab for Polymer 1.0 like the old ones for Polymer 0.5? The old Codelabs covered many useful things and make the start to working with Polymer way easier. 🙂
    Thanks.

  15. Post
    Author
  16. Post
    Author
  17. Post
    Author
    Oleh Zasadnyy

    Amazing episode! I was waiting for it so long!
    And I have a question.
    For instance I have blog with bunch of posts generated:
     <template is="dom-repeat" items="{{posts}}">
                        <paper-card>
                            <div class="card-content">
                                <div class="title">
                                    <div class="medium">{{item.title}}</div>
                                </div>
                            </div>
                            <div class="card-content brief">
                                <marked-element markdown="{{item.brief}}"></marked-element>
                            </div>
                            <div class="card-actions">
                                <paper-button on-tap="openPost">Read more</paper-button>
                            </div>
                        </paper-card>
                </template>

    How can I animate on entry each card separately with some delay?

  18. Post
    Author
  19. Post
    Author
  20. Post
    Author
    Chris Sipe

    Bro, sweet hacks! @Rob Dodson  Is there a community/catalog to find and post neon animations? If not, there totally should be! Also, you've got some nice cuticles.

  21. Post
    Author
    Chen Tony

    Cant wait for the next episode , excellent work !! 
    I am trying to use iron-resizable-hehavior and paper-drawer menu. The problem is that whenever size change from small screen to full screen , the iron-resizable-behavior function fired, and I tried to use d3js to capture this size and generate chart. But the size at this point is not right as the drawer starting to emerge, the size will shrink after the drawer fully appears. Is there a way to slow down the listener function? Thanks.

  22. Post
    Author
  23. Post
    Author
  24. Post
    Author
    Aaron Längert

    Is there a way to change the color of an element to an other color with keyframes? I also want to set the color at each animation call with JS.

  25. Post
    Author
    Eli Rubén Jaimes Ramos

    Thanks for the series. Today I face a problem, How can I update the '–accent-color' in order that ALL the page refresh to update the new color?, I know how to do it in one custom element, but I would like so simply apply the new color to all elements (my elements and Polymer elements) at once.

    Thanks in advanced, regards

  26. Post
    Author
    Maria Le

    Thanks for the great work as always! Can you do some soon on:
    1. CRUD apps / data tables
    2. <iron-flex-layout> (no documentation, no examples yet) 🙁

  27. Post
    Author
    Marco Canali

    Speedy Question …. What is the right manner to connect the <paper-button> Start / Stop Button in a Polymer Medium App like the App in starter kit with the NEON animation … (eg. adding the code in the app.js or somewhere and how ) ??

  28. Post
    Author
    Armaan Dhanji

    Quick question, i'm using Atom editor to try this out. Which syntax theme are you using? I presume your UI theme is "One Light"?. Awesome video!

  29. Post
    Author
    Bar Franek

    It seems like "neon-animation-finished" fires off without any useful custom data.  For example, if i have two dom-repeats in my "page" and I have different animations for each, "neon-animation-finshed" will fire off but I don't have any knowledge of which animation finished.  Is this a bug?

  30. Post
    Author
    Eli Rubén Jaimes Ramos

    Rob, can you please do an episode about 'neon-animated-pages', I really want to implement those, thanks

  31. Post
    Author
  32. Post
    Author
    Andrés Alejandro García Hurtado

    What if I want to implement the same animation on two different elements at the same time, what would be the value for the node property of animation?

  33. Post
    Author
    Tianxiang Zhang

    Hi Rob. What's your suggestions on showing data in tables in Polymer 1.0? There is no paper-table element. I think I could come up with my own element. But I don't what's the best UI design for showing table datas. How should it look like to follow material design principals? How should it be responsive on mobile device?

  34. Post
    Author
  35. Post
    Author
  36. Post
    Author
  37. Post
    Author
  38. Post
    Author
  39. Post
    Author
    Ryan Loebs

    @Rob Dodson Are there any drag'n'drop behaviors in development or already available?

    I couldn't find any on the Polymer Elements catalog and searching online is returning a lot of references to the old core-drag-drop element.

  40. Post
    Author
  41. Post
    Author
    Aaron Längert

    Is it also possible to pass an animation data (for example which color to fade to) in playAnimation(); ? For example this.playAnimation("fade-color-animation", "#AAF000"); instead of setting the color in animationConfig(); . This would result in more flexebility and save some repetitive lines of code.

  42. Post
    Author
  43. Post
    Author
  44. Post
    Author
  45. Post
    Author
    Adrian Zumbrunnen

    Can we use these animation behaviors on an autobinding ("dom-bind") template and run animations on some of its child nodes?

  46. Post
    Author
    Muhammad Fahreza

    +Rob Dodson

    Rob, that's great actually imho!

    I am wondering, how to create presentation video similiar to this? I dont know which pen to use, and how will the camera setup is..

    Thanks Rob 🙂

  47. Post
    Author
  48. Post
    Author
  49. Post
    Author
  50. Post
    Author
    Tori Tan

    wow awesome episode (and the neon page one), great discussions too! Rob please do some more about animation. Polycasts did a great job making the docs more digestible. love Polymer!

  51. Post
    Author
    Shadoweb EB

    I ran into a similar bug than you did at the end. Fortunately I remembered that problem and looked at your video again.
    Your Sweet Hack this.cancelAnimation(); fixed my bug as well!
    Thanks Rob!!

  52. Post
    Author
  53. Post
    Author
    Luis Pérez

    Great video. +Rob Dodson how can I start the animation when the element gets in the viewport, basically, to animate the content as it appears and make the website looks good. Thanks!

  54. Post
    Author
    vamsi krishna Veligatla

    Hi,
    Where are the callbacks defined in documentation?.. for example you added 'neon-animation-finish' in the listeners list.. but i was unable to find it in the documentation.

  55. Post
    Author
  56. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *