Giovanny7

I tried something else I removed the condition from the initWorkAnimations() and now everything works as expected but.... if (document.body.id === 'work-page') Once I transition I get a ton of rollTrigger.min.js:10 Element not found: .intro K @ ScrollTrigger.min.js:10 ScrollTrigger.min.js:10 Element not found: .background K @ ScrollTrigger.min.js:10 gsap.min.js:10 GSAP target .highlight not found. https://greensock.com R @ gsap.min.js:10 gsap.min.js:10 GSAP target not found. https://greensock.com R @ gsap.min.js:10 ScrollTrigger.min.js:10 Element not found: .background K @ ScrollTrigger.min.js:10 gsap.min.js:10 GSAP target .highlight not found. https://greensock.com R @ gsap.min.js:10 ScrollTrigger.min.js:10 Element not found: .work K @ ScrollTrigger.min.js:10 ScrollTrigger.min.js:10 Element not found: .background K @ ScrollTrigger.min.js:10 gsap.min.js:10 GSAP target .work-images not found. https://greensock.com R @ gsap.min.js:10 gsap.min.js:10 GSAP target not found. https://greensock.com R @ gsap.min.js:10 gsap.min.js:10 GSAP target .work__description not found. https://greensock.com R @ gsap.min.js:10 gsap.min.js:10 GSAP target not found. https://greensock.com R that's because I transitioned and I'm calling the initScripts() each time, correct? But I kept my condition for the initHomeAnimations() so I don't know why is being entered. if (document.body.id === 'first-page') Now, going back to the old issue, assuming that I'm not refreshing from the workpage.html the animations work as expected but once I DO REFRESH ON THE workpage.html all my animations break even on the index.html. You can check the live site here: https://officialgio.github.io/

Hey Rodrigo, I've changed it to 'work-page' however once I do my transition to the work-page it doesn't work. It's not even being called once I transition in so I don't see WORK ANIMATIONS PLAYED!!! on my console. But, I see it being fired up once I refresh my page but the animations are broken. function initWorkAnimations() { if (document.body.id === 'work-page') { console.log("WORK ANIMATIONS PLAYED!!!"); const container = document.querySelector('.scrollx'); const sections = gsap.utils.toArray('.scrollx section'); // const texts = gsap.utils.toArray('anim'); const mask = document.querySelector('.mask'); . . . } Mind you that I'm firing up all my scripts in this function: // Main Scripts function initScripts() { initNavAnimations(); initMagneticButtons(); initButtonsAnimations(); initHomeAnimations(); initWorkAnimations(); } And is being used in the barba hooks barba.init({ sync: true, timeout: 7000, debug: true, // !IMPORTANT views: [{ namespace: 'work-page', beforeEnter() { // THIS VIEW MIGHT BE USELESS console.log('WORRRRRRK PAFGE ENTER'); }, }], transitions: [{ name: 'default', async once(data) { // Once page loads initSmoothScroll(data.next.container); initScripts(); // FIRE ALL SCRIPTS ONCE PAGE LOADS }, async leave(data) { pageTransitionIn(data, this) await delay(1200) data.current.container.remove(); }, async enter(data) { pageTransitionOut(data, this); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach((x) => x.kill()); console.log('destroying everything'); locoScroll.destroy(); // Optional! initSmoothScroll(data.next.container); initScripts(); // FIRE ALL BEFORE ENTERING THE NEW TRANSITIONED PAGE ScrollTrigger.refresh(); // IMPORTANT! } }, { // Optional name: 'to-home', from: { }, to: { namespace: ['first-page'] }, once(data) { // do something once on the initial page load initSmoothScroll(data.next.container); initScripts(); }, }] })

Hi, Thank you for responding I'm trying to upload everything to codesanbox but is acting weird. It doesen't read my images and gsap is not being defined. Please see: https://codesandbox.io/s/compassionate-wescoff-92sm2w?file=/app.js Also, I've already tried using gsap.context() since it was suggested to revert the animations once I transition and I call the ctx.revert() in my barba transitions but nothing worked. I put all my animations inside the context such as my home animations. Maybe I'm calling the functions wrong? So something like this: // NOTE: data.next = current container barba.init({ sync: true, timeout: 7000, debug: true, // !IMPORTANT views: [{ namespace: 'work-page', afterEnter() { initWorkAnimations(); ScrollTrigger.refresh(); console.log('WORRRRRRK PAFGE ENTER'); }, }], transitions: [{ name: 'default', async once(data) { // Once page loads initSmoothScroll(data.next.container); initScripts(); }, async leave(data) { pageTransitionIn(data, this) await delay(1200) data.current.container.remove(); }, async enter(data) { pageTransitionOut(data, this); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach((x) => x.kill()); ctx.revert(); // ----> REVERT or KILL????? console.log('destroying everything'); locoScroll.destroy(); // Optional! initSmoothScroll(data.next.container); initScripts(); ScrollTrigger.refresh(); // IMPORTANT! } }, { // Optional name: 'to-home', from: { }, to: { namespace: ['first-page'] }, once(data) { // do something once on the initial page load initSmoothScroll(data.next.container); initScripts(); }, }] }) let ctx; function initHomeAnimations() { if (document.body.id === 'first-page') { ctx = gsap.context(() => { //Page 2 const tlH = gsap.timeline({ scrollTrigger: { trigger: '.background', // markers: { startColor: 'blue', endColor: 'blue' }, scrub: true, start: '-40%', end: '40%', }, }); tlH.fromTo(...) .... }

This is not helpful. I've tried alraeady some of their methods but nothing seems to work. I uploaded a youtube video to see clearly what my issue is LINK: Also once I refresh and go back to the main page all my animations are broken which I didn't include in the video.

When I enter the main page (index.html) and navigate to the work page everything works as expected. But once I refresh the page in the workpage and not the initial page everything stops working -- what could be the reason for this? I've tried refreshing animations in the barbajs code and it seems that it doesn't work even with the usage of Barba views to reinitialize the animations explicitly. // Main Scripts function initScripts() { initNavAnimations(); initMagneticButtons(); initButtonsAnimations(); initHomeAnimations(); //initWorkPageAnimations() --> it used to be here but I'm now calling it specifically on the barba view to see if something works. } // NOTE: data.next = current container barba.init({ sync: true, timeout: 7000, debug: true, // !IMPORTANT views: [{ // THIS IS WHERE I'M CALLING MANUALLY BUT NOTHING STILL WORKS namespace: 'work-page', afterEnter() { initWorkAnimations(); ScrollTrigger.refresh(); console.log('WORRRRRRK PAFGE ENTER'); }, }], transitions: [{ name: 'default', async once(data) { // Once page loads initSmoothScroll(data.next.container); initScripts(); }, async leave(data) { pageTransitionIn(data, this) await delay(1200) data.current.container.remove(); }, async enter(data) { pageTransitionOut(data, this); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach((x) => x.kill()); console.log('destroying everything'); locoScroll.destroy(); // Optional! initSmoothScroll(data.next.container); initScripts(); ScrollTrigger.refresh(); // IMPORTANT! } }, { // Optional name: 'to-home', from: { }, to: { namespace: ['first-page'] }, once(data) { // do something once on the initial page load initSmoothScroll(data.next.container); initScripts(); }, }] }) The entire code can be found here you may fork my project and use liveserver: https://github.com/officialgio/officialgio.github.io

I'm trying to fix many errors that I get in the console by gsap on the workpage.html. My logic is to have if statements that will fire up the gsap animations respectively if they're on the correct page For example: function initHomeAnimations() { if (document.body.id === 'first-page') { //Page 2 const tlH = gsap.timeline({ scrollTrigger: { trigger: '.background', // markers: { startColor: 'blue', endColor: 'blue' }, scrub: true, start: '-40%', end: '40%', }, }); tlH.fromTo('.highlight', { color: 'rgba(255, 255, 255, 0.4)' }, { color: 'rgba(255, 255, 255, 1)', stagger: 1 }); ..... } at first it works once I enter the first page but once I hit the workpage.html it continues to run which I don't want because it gives me a bunch of errors like gsap couldn't find the element which for some reason is running still. Also, I have the following condition: But it doesn't work. I want this to only fire up when it is on the work page. However, if I change the condition to first-page or don't include the condition at all it works as expected which is weird. Another issue is if I refresh on the workpage.html everything breaks. function initWorkAnimations() { if (document.body.id === 'work-page') { const container = document.querySelector('.scrollx'); const sections = gsap.utils.toArray('.scrollx section'); const texts = gsap.utils.toArray('anim'); const mask = document.querySelector('.mask'); // Preference const nav = document.querySelector('.nav'); nav.classList.add('absolute-nav'); // Animations ..... } } For some reason I'm trying to screenshots to this forum but it doesn't allow me since it exceeds kb. So here is the code sandbox repo, try running it on visual studio using live server or fork it One solution I'm going to give a try is to use Barba views and fire up the respective function to their corresponding namespace. Link: https://codesandbox.io/p/github/officialgio/officialgio.github.io/draft/boring-khayyam?workspaceId=ee1f26f5-6074-4dc6-8c22-f5fbab809816&file=%2Fapp.js&selection=[{"endColumn"%3A1%2C"endLineNumber"%3A254%2C"startColumn"%3A1%2C"startLineNumber"%3A254}] Repo: https://github.com/officialgio/officialgio.github.io

Yes, I've tried doing that already but it didn't make a difference + I updated the codepen by removing the filters as well. Not sure if you're seeing the flickering on your end on an IOS device.

Hello, Ignore the errors. The errors are due to not providing the rest of the HTML code which has nothing to do with the issue I've encountered. With or without the HTML the nav bar is flickering or more specifically I think the rounded-div is the issue since that is the last left-most element in the fixed-nav. Before I did any Barba transitions the flickering will still be there so It's not related to Barba or missing HTML elements errors. Please take a look at the same code pen, I've provided the first full-page html doc without the second page which codepen isn't allowing me but it shouldn't matter for this issue. NOTE: I have the full code and I have already fixed any necessary errors before posting this issue.

I'm talking about the opening nav which is the fixed-nav element. I've notice my cdn are not up to date, now I've just updated them but it seems that it broke the code. I just updated it on the same codepen and scrolling doesn't work anymore after I added scroll trigger cdn. Did I do something wrong?

Hi, For some reason, I get this noticeable flickering effect on my IOS phone. On the desktop the nav animation works perfectly fine in safari and chrome and if I try opening the mobile responsive window in the developer tools it also works fine. I'm not entirely sure if this is related to webkit thing that I'm missing since the flickering is occurring on mobile Safari. It seems that this is happening to my roundiv-div element which makes the illusion of a rounded nav opening and closing. Below is a screen recording. RPReplay_Final1682299355.mp4

For some reason when I put locomotive scrolling in a function and call it on the once() function inside the barbaJS init everything seems to stop working? Purpose: As soon as the page loads I want locomotive to start and all the animations should start working as well. What I did: I put the locomotive scroll functionality outside a function without it being called and everything works, but I'd like to do it within the barbajS once() function. Anyone has an idea of what is causing this error?