Robert Wildling

Members
  • Content count

    51
  • Joined

  • Last visited

Community Reputation

9 Newbie

About Robert Wildling

  • Rank
    Advanced Member
  • Birthday 12/11/1972

Profile Information

  • Gender
    Male
  • Location
    Vienna
  • Interests
    PHP, JavaSrcipt
  1. 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!
  2. 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!
  3. 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!
  4. Robert Wildling

    GSAP & Vue & VueRouter: transition hook does not fadeOut

    @Dipscom Well, the intention was to use the "normal" timeline for the appear hook, and the reversed for the leave hook. Since each has its own callback (onComplete, onReverseComplete), the "done"s could be fired accordingly. But the setup of the timeline has to be initialized at some point (see "appear"), otherwise the reverse version in "leave" is not triggerable. methods: { buildUI(el, done) { this.tl_intro = new TimelineMax({ paused: true, // needs to be paused onComplete: done, onReverseComplete: done // this one won't work }) [...] // do not play the timeline yet! return tl_intro } }, appear(el, done) { // here the buildUI is initialized, so that this.tl_intro is available later // cannot do this in beforeAppear, because there is no "done" callback "available" this.buildUI(el, done) // Now play the timeline this.tl_intro.play() }, leave(el, done) { // Call the reverse timeline, done won't be triggered, though // "el", but especially this "done" cannot be passed to another callback this.tl_intro.reverse(0) } What happens in appear, looks mega-ugly!!! But, just to make clear: this is only a theoretical and only meant for discussion (from my side at least)!
  5. Robert Wildling

    GSAP & Vue & VueRouter: transition hook does not fadeOut

    @Dipscom A theoretical question: the `done` callbacks from `appear` and `leave` actually have different context, right? If so, setting a timeline's `onReverseComplete` to `done()` during the `appear` transition (using the `appear`'s `done` callback) would not make much sense, since the timeline's reverse() is triggered from the `leave` transition hook, whichs `done` callback has its own context ... is that correct or BS?
  6. Robert Wildling

    GSAP & Vue & VueRouter: transition hook does not fadeOut

    Que diabolica la risa... 😱
  7. Robert Wildling

    GSAP & Vue & VueRouter: transition hook does not fadeOut

    Got it: I forgot a the "return" in the TweenMax, the "()", when calling the function, and the initialisation of the timeline needs to be done in mounted() (not created(), because in the latter the DOM is not ready yet. "mounted()" fires after the transition hooks and therefore is at some point a problem... The last pen is updated. OK, done here. Thanks again for your patience and help! My next post: the working result Happy tweening!
  8. Robert Wildling

    GSAP & Vue & VueRouter: transition hook does not fadeOut

    Sorry, may I ask one more thing, please (this seems to be very GSAP related now...): I took @Dipscom's example and added animation to the nav component again, copying the way you do it with show() and hide() methods that call a TweenMax(). The (working) pen is here: But the thing is that I need timelines, that are ready to be called. So I tried this: tween_nav() { TweenMax.to( '.navi-wrapper', 1, { autoAlpha: 1, y: 0, onComplete: function() { console.log("tween_nav finished") } }) }, tl_toggle() { console.log("Initialize tl_toggle... (called from created())") this.tlNav = new TimelineMax({ paused: true, onComplete: this.done }) this.tlNav.add( this.tween_nav, 0 ) }, done() { console.log('finished nav fading/sliding).') } } At this point I cannot call tl_toggle() directly, because the function that creates the timeline has not been called, right? So in a next step the function gets called in created(). In order to not start the animation directly, a "paused: true" is added ti the timeline definition. created() { // Accessing this.tlNav directly does not work until the function creating the tl hasn't been called. // In order not to execute the tl immediately, the timeline attribute "paused: true" is required. this.tl_toggle() }, Now, I can call this.tlNav() directly from the Nav component's "watch" attribute: watch: { $route(value) { console.log('watching', value.path) if(value.path !== '/') { this.tlNav.play() } else { this.tlNav.reverse(0) } } }, ...but the timeline is always playing forwards. I would love to be able to have the reverse functionality available here, but - again (still?) - I do not understand how to setup such a timeline in Vue... I wonder if this is showcasing the troubles I have a bit better? This would be the (not working) pen:
  9. Robert Wildling

    GSAP & Vue & VueRouter: transition hook does not fadeOut

    Thank you again for your feedback! @Dipscom there are times you use Timelines and others where you use TweenMax. I need timelines, though, because it eventually is not just a simple fadein/fadeOut problem, but a problem of how to populate the Timeline with all the needed DOM elements, that are not all available at the same time in the transition component that needs to be synced to components outside that transition component. I will think about your version - thank you! -, but it strips away the problem... @Carl Thank you for your pen, too! It demonstrates one thing, that I thought should not be done, that is: crawling the DOM each time a tween is called by passing in a direct CSS class. I know that it is not a problem for a few little tweens, but this is a stripped-down version of my problem, and one essential thing about the problem is how to get the DOM elements. As mentioned above, the live cycle of Vue and its transition hooks do not guarantee the access to all DOM elements immediately. That reason - and the one of not crawling the DOM with each call - are the reason, why I actually thought a settings object would be a way-to-go... So just to clarify: If it was just about fadeIn/fadeout in the transition component itself, I firstly wouldn't need GSAP and secondly would have my app working so far. But is is about GSAP, its callback system, and Vue's transition component and its callback features, which need to communicate and get synched with GSAP-animated elements outside itself. (Because at a later point there is axios...) But for the moment, I will leave you in peace! You've been incredibly supportive - thank you very much again!!!
  10. Robert Wildling

    Get timeline that is contained within another function

    I am coming closer to the core problem of my little project. But since it is absolutely not what the title initially suggested, I open a new issue here: Thank you!
  11. This problem has some previous posts that started here: But since my problem turned out to be something completely different the initial title suggested, I decided to start a new thread. Hope that's ok! The Pen shows a little Vue app, where GSAP is used in the transition hooks. A GSAP animation outside of the transition component fade/slide in the nav. The initial display of the intro fading in, then fading out and eventually showing the main component and the navigation component works so far. Now, when I want to click on "Back to Intro", which is defined as a router-link (which is different compared to the intro button), the intention would be: 1. fade out the main content 2. fade in the intro again. Should be simple, one might think. But for some reason the fadeout on the main component does not work. At least it is not visible, because the feedback in the console does show that there is something going on... I was also experimenting with using the leave hook, but to no avail. What am i doing wrong? BTW: I really tried hard to keep the code to a minimum, but for one: I need the comments, and for the other: it seems, a certain amount of code if just necessary... I hope you still are willing to have a look at it! Thank you!
  12. Robert Wildling

    Get timeline that is contained within another function

    Wow! This is really quite an insight! Awesome!!! So my takeaway from this is: 1. Create the timeline on the current Vue component using "this" (at least when it should be callable by other functions, too); 2 Save 'done()' right away, when the timeline is created and don't bother with it, when calling the reverse. I have a lot to work with now! Muchas gracias, Pedro! Me alegre mucho!
  13. Robert Wildling

    Reverse on Timelinemax with nested staggerFromTo and other problems

    To @OSUblake, @Sahil, @PointC: Thanks SOOO MUCH for your valuable feedback! It is very encouraging - and yes: this is an awesome forum with awesome people! Happy tweening an till soon! 😁
  14. Robert Wildling

    Get timeline that is contained within another function

    That's a neat trick using a ref attr Thanks so much! I think I managed to strip down my problem to something quite simple (still a lot of code, but to me it seems it is necessary...): Vue and GSAP During Vue's beforeAppear hook, the "content component" is configured, which starts in "appear" . The animation reaches a point, where a button has to be clicked to enter the website. "appear" is not yet finished, because "done" is not sent. "done" should be sent only, when the button is clicked, which plays the introAnim in reverse. Here my problems: 1. first of all "reverse" does not work... and I cannot figure out, why... 2. the "Enter Page" button is inside the component, which means that the event has to be emitted to the parent. That works. But how do I "transport" that "done()" function that "appear" needs to finish its "appear" hook and move on to "appearAfter" and "beforeEnter"? Also, I should change the router path at this time... I assume this will be a special problem, when it comes to routes and dynamicRoutes. But I'd like to keep that problem for a later question... Thank you very much!
  15. Robert Wildling

    Reverse on Timelinemax with nested staggerFromTo and other problems

    Thanks so much for commenting!!! I am not in a team, so there is no exchange of "brain power" neither experience... I agree with the typing length problem! I also fooled around with "data-" attributes, but that does not seem to save so much JS, but instead makes the HTML quite bloated... Would you mind to share an example of how you do such setups? (Maybe you could shade a link to one of your sites, or a git repo...?)