digitalfunction

@akapowl Thank you! Thank you!!! This has been extremely helpful. Those articles helped in solving the remaining issues. One more problem to fix, so hopefully I can work through that. I appreciate your time and knowledge. Hope you have a great week! Jeff

@akapowl thank you very much - I would have never figured that out on my own. Plus I have not seen any other examples setup this way anywhere. I feel like I have seen these types of pages transitions using GSAP & Barba. This has solved my initial issue and your explanation makes sense. I am just not 100% sure I understand the pattern, but again not a JS expert at all. I got these changes added to a more complex framework and got the base page transitions working. Based on this page type is leaves & enters how i want - and set it for 2 different pages types! Now, I am running into other issues where I need to reset GSAP arrays... So within the individual page enter function, we are animating other elements after the page loads and when the user scrolls down the page - we have images staggering/animating in with a parallax effect. Any thoughts on how to reset these too? using your (el) to reset the elements within these functions. So these work on the initial page load, but not when you go to next container with the same namespace these arrays are not starting from scratch. example of one of the arrays - how would I reset something like this? sap.utils.toArray('.section-parallax .parallax-content').forEach((section, i) => { const heightDiff = section.offsetHeight - section.parentElement.offsetHeight; gsap.fromTo(section, { y: -heightDiff }, { scrollTrigger: { id: 'collectionParallax', trigger: section.parentElement, scrub: true }, y: 90, ease: "none" }); }); Is my issue a combination of GSAP & Barba ? Or strictly a Barba issue? Or is it how I am structuring my JS? I guess I was naïve to think that I could just reset everything back to the initial starting point when the next container loads. Let me know if you if you have any thoughts or other examples we can take a look at. Thank you for the help. Made it over a big hurdle! No on to the next one!

Here is the link to the codepen project files - https://codepen.io/jeff-stark/project/editor/XLQNOO Again the demo is static, but the site I am working on is dynamic so the different page types will have different animations - so if you navigate from one subpage to another subpage (namespace = the same name) everything should reset or recalculate so the animations start all over from scratch. Same concept for portfolio page types to the next portfolio page type. I am not sure if my issue is with gsap3 or barba. I am basically trying to reset/refresh/recalculate all the animations to start from scratch when you go back and forth between the 2 pages. When the page initially loads and leaves all the animation trigger - main container. black background, the page title, then the content. It all animates out as I want it, but the next container only animates the main container and everything beyond that does not. I have tried everything - kill, restart, to, from, fromTo etc... I can get the main container within the barba wrapper to animate between the pages, but data-barba="container" data-barba-namespace="subpage" does not reset. Once it goes to the next page/container the timeline inline styles are removed from the data-barba-namspace="subpage" containers so it does not animate. Not sure why this is happening. GSAP - Again, I have tried just about everything - I am novice to JavaScript so having a hard time figuring this out. Barba - tried "views", different transition namespaces, all the different hooks - just not sure where to put the kill or reset or whatever I am missing to make it reset all the timeline values on the next container. I am hoping someone can help. PLEASE and thank you for your time. Let me know what else you need.

Hi All… Trying to learn GSAP using Barba – I’m self-taught so constantly running into issues and thanks for this forum it has helped in many ways. I am hoping this question can be answered without a demo, because I am working in a dynamic environment and my issue is related to navigating from project to project, which technically is the same layout within the system, just loading in the content dynamically based on the project. To set this up, using JS & HTML, I have the latest versions of GSAP, ScrollTrigger, & Barba plugged up and the page transitions work from one page type to the next – took some time, but slowly figured it out. My issue now, are the project pages of the site within the portfolio section. The first time you navigate to a project, the page transitions and tl animations work as I created. The problem is when I navigate from one project page to the next project, on leave the page transitions out as expected, but then nothing is happening on enter. The page transition and tl animation don’t seem to reload. I have tried kill, reset, & clearProps – it could be the placement, but tried it many places with no luck. Based on the console logs everything is firing based on the sequence I setup, but I feel the whole page/timelines/ScrollTrigger needs to be reset/restart. Also, not sure where to place the reset – within Barba I am using both views and transitions. It is just the page is loading on to itself so how do I reset everything, so it starts all over and goes through all the animations when you go to the next project page. Any direction or link to other examples would be helpful.