Romanus Posted July 27, 2022 Share Posted July 27, 2022 Hello! Please help me understand how it works. My goal: I click on the Page1 button - Page1 opens, I click again - it closes. And so with any Page. I specified a variable as target. When I click on the button, I change its value and play the animation. But GSAP doesn't see the new value. How to do it right? See the Pen ExEwLeL?editors=1111 by romanusss (@romanusss) on CodePen Link to comment Share on other sites More sharing options...
iDad5 Posted July 27, 2022 Share Posted July 27, 2022 As far as I can see, you create your timeline once in the beginning, with the variable value set at this time to '.Page1'. Afterwards you are using that timeline which is by definition attached to '.Page1'. Setting the a new value in the window.scope does nothing for the timeline. Does that help? Link to comment Share on other sites More sharing options...
Romanus Posted July 27, 2022 Author Share Posted July 27, 2022 28 minutes ago, iDad5 said: As far as I can see, you create your timeline once in the beginning, with the variable value set at this time to '.Page1'.Afterwards you are using that timeline which is by definition attached to '.Page1'. Setting the a new value in the window.scope does nothing for the timeline.Does that help? Please show with an example how to update the timeline correctly. I would like to be able to play it in reverse when pressed again. Link to comment Share on other sites More sharing options...
iDad5 Posted July 27, 2022 Share Posted July 27, 2022 I'm reluctant to say it, but in my eye, the way you are using timeline is counterintuitive and somehow against the concept. One thing ist that a timeline actually is an advanced construct to collect and steer tweens. A timeline with only one tween is something that might make sense in very special cases but, in your situation I seen no need for it, but that can be due to simplification. When I said you attached the timeline to an element (the one with the calls selector '.Page1') I probably should have said you created a tween on that element Inside a timeline. What you are asking is essentially a way to change a tween target - and I have never done that or felt the need to do so, and cannot find something to do that in the docs. I probably would either create a tween on each element and keep it to be reversable etc. or I'd crate one on the fly if need's be with the current target as a parameter. You manually create a special function for each button already, which seems not necessary to me. On the other hand you are keen on only having one timeline/tween. That seems an unusual concept - but as I said earlier, you might have you reasons and they are just not obvious from the simplified CodePen. Was that somewhat helpful? Link to comment Share on other sites More sharing options...
Dipscom Posted July 27, 2022 Share Posted July 27, 2022 Before offering further comments, can I ask a question? What do you expect to happen if the user clicks on button 1 and then, clicks on button 2 or 3? 2 Link to comment Share on other sites More sharing options...
Romanus Posted July 27, 2022 Author Share Posted July 27, 2022 I redid my example. It works perfect. But I feel like I've chosen the wrong path. It turns out that I create a new timeline for each page. What if there are 10 or 50? It seemed to me that choosing a variable as a target and changing it depending on the page would be the right solution, but I did not succeed. I am new to GSAP and would like to understand how to make the animation code as short and scalable as possible. Please look at my code and tell me how to fix it. Link to comment Share on other sites More sharing options...
iDad5 Posted July 27, 2022 Share Posted July 27, 2022 I can tell you how I would go about in general, but most of us have developed their own coding-style and preferences, so I wouldn't say that there is one right way to do it. I probably would define a class Page that obviously would hold info about the main HTMLElement (container) the state of the page (shown or hidden) and the timeline to show and hide it. Adding a method show and hide that internally calls the animations. And call the pages from outside... It is sometimes a more 'complicated' thing to do at first, and you likely won't find a lot of examples here as it would be mostly overkill for the simplified examples around here, but for real life projects I find it worth the effort - it keeps things encapsulated and maintainable - also I use TypeScript for the same reasons. If you are interest in that approach, I'll happy try to find some (imperfect) examples to share. For GSAP magic and the best use of all those additional cool helpers others are better qualified. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now