Search the Community
Showing results for tags 'master timeline'.
Found 3 results
-
Hi everyone, I'm relatively new to GSAP, and I'm running into a problem that I'm not sure is related to Vue or GSAP. I have created a simplified example on StackBlitz to demonstrate the problem: example. Master timeline -> stores/AnimationStore.ts Usage & Child timeline -> app.vue Here is the problem I'm facing: I'm trying to share a GSAP timeline called master via Pinia in my Nuxt 3 project. Components in the project can create their own child timelines and add them to the master timeline. In the example, the child timeline is correctly added to the master timeline, but when I play the master timeline, it just starts (console.log('Master started')), but doesn't update or finish. Also, the child timeline doesn't run. I would appreciate any guidance or suggestions on how to solve this issue. Thanks in advance for your help!
-
Hello ! Finished our first GSAP Animation recently (massive thanks to @OSUBlake and @Carl) and just revisiting to tweak a few things. Having trouble with controlling sub timelines contained within functions, via a master timeline. Could anyone possibly let me know what I'm missing here? I suspect it's something to do with returning functions to the master timeline and not the timelines contained within them, therefore they can't be controlled at the top level. Have tried applying support given here and here but for the life of me can't get it to work as expected.. I'm trying to remove the Flutter() function at mobile breakpoint, restart the master timeline with just Sphere() then add flutter() again and restart when sized back up past 420px. Thanks!
-
Hi all, I was wondering if you could help me out - here is my codePen: http://codepen.io/marklawrencedesign/pen/KNgdxL This pen simulates the real-life issue I am having using Ajax, except for demo purposes I am using '.append()' I have been as descriptive as possible in the pen to articulate the specific issue, but I will explain again here: I need to animate an ajax-loaded article on button click 'open' I realise that the loaded content will not be seen by the TL if I declare my variables pointing to these elements on page-load, therefore I am tying the 'master.add(...)' when the button is clicked / ajax content is available in the DOM. The pen works, the loaded content is indeed added to the page, and it animates as expected ONLY on the first play / close. If you click play, and then close a few times in the pen you will notice the animations still plays, but there is a progressively longer gap between each stage of the animations. Is it because on each 'open' click I am again adding to the master, and it is getting 'clogged' up? If so what should I do to clear the 'master.add(...)'? I have done a LOT of googling but I cannot find an answer, and I think I have gone in a big circle of pain. ...awesome product btw (when I can make it play ball ) Thanks in advance if you can help. Also - is there a better // more practical method to my code setup for this in general? It would be awesome for a GSAP Jedi to offer me advice - Im always looking for ways to improve how I approach things.
