Robert Wildling

Members
  • Content Count

    64
  • Joined

  • Last visited

Community Reputation

11 Newbie

About Robert Wildling

  • Rank
    Advanced Member
  • Birthday 12/11/1972

Profile Information

  • Gender
    Male
  • Location
    Vienna
  • Interests
    PHP, JavaSrcipt

Recent Profile Visitors

879 profile views
  1. Robert Wildling

    Troubles with SVG animation and masterTimeline

    @OSUblake Thanks a billion times! I actually knew that - no idea, why I did it nevertheless... stupid me! (Pen is updated with comments.)
  2. Robert Wildling

    Troubles with SVG animation and masterTimeline

    The above pen is a reduced one. The complete logo with additional animations is here: https://codepen.io/rowild/pen/ZqRdzw It shows that other timelines animate quite all right, but the parenthesis is a troublemaker...
  3. Robert Wildling

    Troubles with SVG animation and masterTimeline

    Hi to all! I would need your advise on the given pen, which does not animate. The idea of this little exercise is to learn SVG animation and also to follow along the coding practices outlined in the famous "Star Wars" pen presented in this article: https://css-tricks.com/writing-smarter-animation-code/ I am having trouble to understand, why my code is not working: This function function def_animateParenthesisRight() { console.log("animate parens right") let tl = new TimelineMax() tl.to(pt, .35, { scaleX: 1 }, 0) tl.to(pm, .35, { y: 0, scaleX: 1, scaleY: 1 }, 0) tl.to(pb, .35, { y: 0, scaleX: 1 }, 0) return tl; } encapsulates a timeline. It is then assigned to a masterTimeline: let masterTL = new TimelineMax({ paused: true }) masterTL.add(def_animateParenthesisRight(), 0) And 2 buttons call the `masterTL.play()` or `masterTL.reverse()` function, which should shrink, respectively enlarge the right parenthesis. But nothing happens... Why? Thanks for your feedback!
  4. Robert Wildling

    Animate path of SVG symbol?

    @elegantseagulls Nice!!! Thanks for sharing!
  5. Robert Wildling

    Animate path of SVG symbol?

    @Carl Thank you for clearing that up for me and for pointing me to that great article! Much appreciated!
  6. Robert Wildling

    Animate path of SVG symbol?

    Hi, GSAP magicians, I am having trouble with animating a path of a SVG that is referenced as symbols. The codepen shows a left side, where the SVG is implemented "regularly" in the DOM flow. There, the intended animation works (the rectangle needs to be hovered). The same thing should happen on the right side, where the SVG is referencing a symbol instead. Does anybody of you guys know what I am doing wrong? The console shows that the original SVG is "copied" to a shadow-root - can "shadow DOM" be accessed anyway? Much appreciated! Thanks!
  7. Robert Wildling

    Again: Playing a (staggered) timeline reverse

    Aloha - the Green Sock has again provided fantastic help and insightful solutions! Millions and millions of thanks! I am happy to say that I eventually found to a similar solution to what you did, @OSUblake. I am not so sure, if separate play and reverse functions are necessary, though, here is my thougth. Once this.logoAnimation is saved to Vue's method scope, I can call this.animation.play() and ...reverse() directly instead if this.play(). It saves some function definitions a la long... (pause() is great! I removed the play() method in the tween functions). Am I wrong? Or is this approach ugly? Or just a matter of taste? BTW: I put my methods (or the method call to the initAnims()) on enter and appear lifecycle hooks. Otherwise, my setup would throw an error, when called from a subpage directly... Good night! And millions of thanks again for your excellent help!!
  8. Robert Wildling

    Stagger from the last element

    Sorry, I quoted from another post previously. Now I got the one i was actually referring to: @GreenSock said in 2014 that they might change the way how potential -1s (or more) time problems are handled. I was just wondering, if this happened, since we have 2018 now... Thank you!
  9. Robert Wildling

    Again: Playing a (staggered) timeline reverse

    @OSUblake fantastic! Thanks a lot! But I wonder what would happen if I had to something like that for 50 timelines or so, in many more than just one child component? I followed your example and tried some variants, but either the `this` context gets messed up, or the new var gets reactive, or if a new var is defined during a life cycle method, then the DOM is not available... It is not easy to sync animations between and within child components from the root parent is, it seems to me. It would be great to have a structure like this, where all animation methods are saved to: (fake code, not working) methods() { allAnims(refs) { logoAnimation = refs.Logo.animateLogo(); sidebarAnimation = refs.Sidebar.animateSomething(); navMainAnimation = refs.NavMain.animateMenues(); }, play() { this.allAnims.logoAnimation.play(); }, reverse() { this.allAnims.logoAnimation.reverse(); } }, mounted: { this.allAnims(this.$refs) } Or even call the method with this.allAnims.animateLogo.progress(1).reverse(0) But my attempts fail... Any thoughts?
  10. Robert Wildling

    Again: Playing a (staggered) timeline reverse

    @Carl Thank you for your excellent explanation. Could it be that your link leads to a wrong codeSandbox? The code you mention in the post is not in the example... Upon inserting it myself I of course see that it works like a charm!
  11. Robert Wildling

    Stagger from the last element

    Quick question: It is late 2018 - is this still valid? Or did GSAP come up with a different solution, as @GreenSock vaguely points out?
  12. Robert Wildling

    Again: Playing a (staggered) timeline reverse

    Demo: https://codesandbox.io/s/n34pvjxyxj Hi, fellow GSAP'ers! The topic of playing a timeline in reverse keeps troubling me. The Demo above is one, where, within Vue, a parent component calls function on a child component (using $refs). As the console output shows, the functions are indeed called, but the animation is not played in reverse. I do not understand why, because: - the timeline is returned to a var, right? - the staggered animations use `staggerFromTo` , even though I assume that using any of the other two should eventually work, too What am I doing wrong here (again)? Do I misunderstand the idea of having the timeline saved to a variable (here: animateLogo)? Are reverse animation on timeline using a stagger feature not possible? (I doubt that! It's GreenSock!) Thanks you in advance! PS: the actual GSAP-related code parts are kept as short as possible. Please ignore the other stuff, which is just there to wrap the letters... (no, I am still not using SplitText... shame on me!)
  13. Robert Wildling

    Toggle an input's checked "value"

    I understand. So there is not right-click options as there is with "active", "focus", "hover" etc to set a state. Thanks for your responses!
  14. Robert Wildling

    Toggle an input's checked "value"

    EDIT: While adding some Vanilla javascript solutions and found out, that I do not need the CSSRulePlugin to achieve, what I intended. So the GSAP question is answered. But... I still don't know, how to use DevTools to check the "checked" status... would great, if you could drop a hint! Thank you!
  15. Robert Wildling

    Toggle an input's checked "value"

    Hi, fellow GSAPers! I wonder if you could tell me, whether it is possible to change a :checked value (or is it in fact a pseudo-class?). I did find some entries here and studied the codePens, too, but it seems the CSSRulePlugin is made for :before and :after? In the example pen provided I tried several options, but to no avail. And since I touch the subject, please allow me 2 related question: 1. Is CSSRulePlugin integrated in TweenMax TimelineMax or not? I checked the node folder, and the file is there, but it seems it has to be included separately? (I am still using v1.20) 2. This is not GSAP related, but I hope you can clarify this for me anyway: how can I inspect the :checked value of a checkbox in the Chrome DevTools? (I did google, really!) Thank you!