Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Robert Wildling

  • Posts

  • Joined

  • Last visited

Everything posted by Robert Wildling

  1. 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!)
  2. 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!
  3. 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!
  4. 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!
  5. @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)!
  6. @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?
  7. 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. 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. 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. 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. 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. 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. 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. 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...?)
  16. @GreenSock Thank you! I do know this article. (I even mention it, kind-of, via the "Star Wars example" comment.) But some things do irritate me, like the document.querySelectors inside a Tween... that's why I try to work with a settings object, but it seems nobody wants to comment on that idea. Am I asking wrong? Is the idea so stupid? What is it? Hmm...
  17. Fantastic!!! Thank you so much! How stupid of me to forget those parenthesis!!! Does, by any change, Greensock deliver any "error" checking concerning such a scenario? (I know it is technically not an error, but maybe there are developer tools that help?) @Sahil my code is long, but to be honest: it is already very, very shortened. But I appreciate any hint on where could make it even shorter. (I did put lots of comments in there, also one that says, that the following code is irrelevant for the problem in question... IMO the example needs the code anyway...) But this topic actually addresses something, where I would really love to to know, what you think! Usually, the tutorials out there cover little examples maybe small to-do-like projects. But I miss (or didn't find yet) any advises on how to organize/structure GSAP-related code in big projects. Well... there is this star Wars example out there... But what about this idea of having a "settings object" that I use in this pen and also mention at other places? Do you have something similar? Or do you have a different approach? Or is this "settings obj" idea completely rubbish? How do you approach all those ideas that everyone talks about: one central place to organize settings; DRY; speed - do not query the DOM each and every time with document.querySelector()... (I wonder if this might be a topic for a new post?)
  18. Hi to you all! I am having various troubles with animation shown in the codepen above. The animation "introAnim" show a text animation (where each letter is faded-in via a nested staggerFromTo function), till clickable button "Enter" shows. Once this button is clicked, the animation should dissolve (played in reverse) an fire something once onReverseCompelte() is reached. But: 1. the TimelineMax of the "introAnim" has a callback that fires BEFORE the nested TimelineMax with its staggerFromTo() animations are finished. They each have their callbacks, too. But it seems that the parent TimelineMax does not wait for the staggered animation. Why is that? 2. Once there is a click on the Enter button, the introAnim should be played in reverse. But the animation is very confusing: first the button fade out, then, along with the suddenly hidden text, it fade in again - with the text animation. Can nested staggeredFromTo animations not be played in reverse? Or what am I doing wrong here? 3. The reason why I would like to be able to play the introAnim in reverse instead of building a new function is (also), because there might be the need to interrupt the ongoing sequence, when he enter button is clicked, before the animation has finished. How do I do that??? 4. A reverse() function has its own callback method, it seems, which is great: onReverseComplete(). But what, if I would also like to have a onReverseStart() method with the possibility of adding params via a onReverseStartParams() method? The documentation does not mention any methods like these ... https://greensock.com/docs/TimelineMax Are there work-arounds? Thank you for all your tips and help!
  19. @Dipscom I do take it personally - and with great gratitude! Please keep saying straight out, what's wrong and stick with me for a little bit longer please! Your help and your critique are INCREDIBLY valuable to me!!! As for the "multiple functions doing the same": that was actually just quickly thrown in. I actually to have such a function, but I wanted to discuss that in the next step, for which I will prepare the next pen today. But the main intend of my last post was to find out, if having such a SETTINGS object "the way to go" (no matter whether with "pure" GSAP or within Vue). I have a feeling that it is kind of ok as an idea, but it is not really nailing the problem. The fact that callback functions need to be added in a second "settings setup step" makes me insecure. So I wonder if you could elaborate on that a bit? Do you use such an object? Or are there any other ways to handle such a an idea? Meanwhile I prepare that pen I mentioned. Thank so much!!!
  20. I am struggling hard to prepare an example that boils down the problem to a few lines of code. So I thought present my problems step by step and hope that this is ok with you! If not, just let me know! This would be my first step: At the core of my problem seems to be this idea of having a "settings" object: a Javascript object, that pre-defines parameters for each object that will be animated by GSAP. The structure is like this: let SETTINGS = { states: { aside: 'hidden', // 'hidden', 'intro', 'visible' - for responsive states domBuilt: null, firstLoadedFromBaseURL: null, // page called via '/' or '/somepath'? introActive: null, // show intro or site-navigation-UI? mainNav: 'hidden' // @see 'aside' }, ui: { btns: { toggleAsideBtn: { el: document.querySelector('.c-btn__toggle--aside'), tweenParamsTo: { hide: { autoAlpha: 1, right: 0 }, intro: { autoAlpha: 0, right: "-47px" }, show: { autoAlpha: 1, right: "270px", } } } }, container: { rect01: { el: document.querySelector('.rect01'), tweenParamsTo: { hide: { autoAlpha: 0, }, // Container have no "intro" state in this case, except one: the intro container show: { autoAlpha: 1, } } }, [...] My thinking behind doing this is as follows: 1. once a DOM element is saved, the access to it is quicker; 2. there is a central storage, where I can manipulate values, so I do not have to dig through various files to make changes; 3. eventually, this could come from a CMS, where a user can configure values; 4. it is a good place to store "app state" parameters. But of course it causes troubles - at least for me: 1. the initial setup does not allow to define callback functions (see codePen) 2. also the initial setup does not allow to refer to another setting in this SETTINGS object (could be the case in an 'onComplete' callback, which could then fire another animation...) 3. initial "app state" needs extra checks, e.g. via the URL path (is the app loaded from the baseURL – which would imply to build the "Intro" – or is there a path – which would imply to build the "UI"?) If I would like to define callbacks in a SETTINGS tree, there has to a second step in the setup routine, that adds missing features, probably like this: let SETTINGS = {...} SETTINGS.ui.btns.toggleAsideBtn.tweenParamsTo.hide.onStart = cb_onStart; SETTINGS.ui.btns.toggleAsideBtn.tweenParamsTo.hide.onComplete = cb_onComplete; SETTINGS.ui.btns.toggleAsideBtn.tweenParamsTo.hide.onCompleteParams = { msg: "called from toggleAsideBtn hide" }; Therefore my first question would be: Is this at all a good/useful/"smart" approach or is this idea a source for troubles a-la-long? A Codepen is here:
  21. Haha...scared of stackoverflow! Exactly my feelings! Thank you for your honest feedback, @Dipscom! Just to understand you correctly: This is exactly what I need! When you say: "You should be trying to save DOM elements into the store." ...then you mean "...should NOT be trying ...", right? I gladly will put together my example app and post it somewhere useful - I am thinking of codeSandbox instead of CodePen. Would that be ok?
  22. I reply quite late, but thank you for your feedback, @Dipscom It seems that I have troubles to get the DOM at the proper moment and connect GSAP with Vue's transition system. I tried to pinpoint the problem here: https://stackoverflow.com/questions/51970461/vue-vuex-gsap-animation-add-dom-elements-to-store but I don't know it I am being clear here...
  23. I just wanted to test the eventCallback('onComplete') of a timeline, which - to my understanding - should fire once the timeline has completed to play. The Pen shows, that, no matter what the timeScale is nor where it is placed, totalDuration will always be 5 seconds. Why is that? What would I have to do to make GSAP respect the timeScale?