janivibe
Members-
Posts
12 -
Joined
-
Last visited
About janivibe
- Currently Viewing Topic: Repeated Issue..
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
janivibe's Achievements
- Rare
- Rare
Recent Badges
0
Reputation
-
janivibe started following Repeated Issue.. , Gsap lag issues , Barba and GSAP duplicate elements after page transaction in certain pages or disappear and 5 others
-
Hi GSAP, I have been learning GSAP for a long time, and I have learned quite a lot to a great extent. I have become very addicted to GSAP now??, but there is one issue that I keep encountering. I notice a lot of lag in animations in many places, like split text animation, scroll animation, etc. This happens in only a few animations, and I don’t understand why this happens. Am I making some mistakes as a beginner? Are there any protocols for making lag-free animations, or are there some ways to make animations lag-free? What things should we keep in mind to ensure our animations remain smooth and lag-free?
-
Hi there, I'm working on a project as a new freelancer. I've completed building a website for a project, but after finishing it, I realized I needed to add page transitions. For page transitions, I used barba.js and gsap.js. However, I'm currently learning barba.js and struggling with its correct usage. I consulted barba.js documentation and ChatGPT for help, and I've written code for page transitions that is working correctly in principle. However, the issue I'm facing is that after page transitions, some elements either duplicate in certain pages or disappear. I've spent a lot of time trying to understand this issue, but I'm unable to figure it out. I'm providing the barba.js code below, but I can't share the any demo or code of the website because, as mentioned, this is a freelance project. I hope you understand. Another thing, all functions like a1, a2, a3... are wrapped inside $(document).ready(function() {...}), and I cannot remove it from any section; otherwise, my animations won't work. So I have to use $(document).ready(function() {...}) or document.addEventListener("DOMContentLoaded", () => {...}) in any section/function I hope you understand my situation. This is a short demo for your understanding of what I mean by $(document).ready(function() {...}) or document.addEventListener("DOMContentLoaded", () => {...}) , /* ------------------------------- PAGE LOADER ------------------------------ */ function a2 (){ $(document).ready(function() { const Loadertimeline = gsap.timeline(); Loadertimeline.to(".loader-text span", { y: 100, stagger: 0.05, duration: 2, delay: 1, ease: "expo.inOut", // skewX: 50, }); Loadertimeline.to(".loader", { height: 0, duration: 1, delay: -1.3, ease: "expo.inOut", }); Loadertimeline.to(".loader-sec", { height: 0, duration: 1, delay: -1, ease: "expo.inOut", }); Loadertimeline.to(".loader-sec-1", { height: 0, duration: 1, delay: -0.9, ease: "expo.inOut", }); /* ------------------------------ HERO HEADING ------------------------------ */ new SplitType(".hero-headings-wrap h1", { types: "lines, words, chars", tagName: "span", }); Loadertimeline.from( ".hero-headings-wrap h1 .char", { y: "200%", duration: 1.5, ease: "circ.out", stagger: 0.02, delay: -0.8, }, "hero" ); Loadertimeline.from( ".hero-image", { height: "0rem", duration: 1.5, ease: "circ.out", }, "hero" ); document.querySelectorAll("nav *").forEach(function (navItem) { navItem.style.pointerEvents = "auto"; }); }); } /* -------------------------------------------------------------------------- */ /* WORK SECTION */ /* -------------------------------------------------------------------------- */ function a8(){ $(document).ready(function() { document.querySelectorAll(".project-image img").forEach((img, i) => { gsap.to(img, { y: "-15%", duration: 6, ease: "power1.inOut", scrollTrigger: { trigger: img, start: "top 150%", end: "bottom top", scrub: true, // markers: true }, }); }); }); }; Like that, And here is the barba.js code I wrote lastly: function initGsapAnimations() { a1(); a2(); a3(); a4(); a5(); a6(); a7(); a8(); a9(); a10(); a11(); a12(); a13(); a14(); a15(); a16(); a17(); a18(); a19(); a20(); a21(); a22(); a23(); a24(); a25(); a26(); a27(); } initGsapAnimations(); // Barba.js initialization document.addEventListener("DOMContentLoaded", () => { // Initial load animations and Lenis initialization initGsapAnimations(); initLenis(); // Initialize Barba.js barba.init({ transitions: [{ async leave(data) { const done = this.async(); // Animate out current page gsap.to(data.current.container, { opacity: 0, duration: 1, onComplete: done }); }, async enter(data) { // Animate in new page gsap.from(data.next.container, { opacity: 0, duration: 1 }); // Re-initialize GSAP, ScrollTrigger, Lenis or other scripts initGsapAnimations(); initLenis(); }, async once(data) { // This runs once when the page loads initGsapAnimations(); initLenis(); } }] }); }); Please help me fix this issue; I'm stuck because of this problem.
-
Hi there, maybe it's a noob kind of question, but still I want to ask because I am not understanding this. I have used the SplitText library and animated it. The animation runs correctly, but if the page refreshes or opens for the first time, this text initially shows at 0 for a few milliseconds, and after that, it animates from y: "210%". And this issue is happening with the 'from()' function only, not with the 'to()' function. But with the 'to()' function, I am not able to create the same animation. After trying multiple approaches and not being able to solve this, I thought I should seek help from the GSAP forum. I hope you can help me.
-
Hi there, first of all, I don't know how to add multiple pages on CodePen, so I apologize for that. I'm currently learning Barba.js and trying to integrate GSAP into it after almost succeeding. However, I'm facing an issue where GSAP doesn't work after page transitions. Even I'm not sure about this matter. Also, my custom cursor isn't animating after page transitions, but it works fine if I reload the page. So I don't understand that whats going on there. Please guide me on this.?
-
I have a one more demo for you but it's to confusing code and to hard to understand for me?. And also this is not work properly in responsive part https://codepen.io/alig01/pen/eYQVaQL
-
Can you give a demo? coz I have less knowledge about clip-path stuff?
-
@GreenSock I want this text animation to have a COLOR FILL, filling the characters the same way. However, I don't want it to go from the first line to the last line. I want the animation to work line by line. For example, in the code I gave you, there are 5 lines in the paragraph, meaning the text is written in 5 lines. I want the COLOR FILL to happen in a staggered way across these 5 lines separately...And I did some research recently and I found a website with a 'WHAT I DO' section, which has this kind of line-by-line animation. Check it out; it might help you understand better https://minhpham.design/,
-
Hi there, Recently i'm using this text plugin called split text by gsap, and i'm facing one issue while making a text animation, i want this scroll text color fill animation in "stagger way". i don't know how can i explain this but try to understand what i mean, i want this color fill in .chars but i want lines like stagger way
-
Yes?, Can you please tell me how you can do that?, if you can
-
Hi, I hope all of you guys are doing well. I have created an animation in which I want to animate all elements along the x-axis when .box is scrolled. However, I cannot directly assign a value to the x-axis because then the animation won't be responsive. I want the box to animate along the x-axis on scroll, but I have added a class named .end to the last element of .box. I want the x-axis animation of the box to stop there, neither exceeding nor falling short of that point. However, I am currently learning GSAP, so I'm not sure how to precisely stop the x-axis animation of .box at the .end class. Could you please guide me on this?
-
Hi, This is an agency's website. On this website, you will find a section called 'Our Philosophy' when you scroll down. I'm not able to understand how to make the animation in that paragraph so smooth. I have tried a lot but I can't achieve that smoothness. Can you please help me? https://cuberto.com/
-
Hello everyone, I hope you're all doing well. I've created an animation using GSAP, but I'm facing an issue that I can't seem to understand. The animation works perfectly as I want it to, but there's a problem. The animation keeps restarting repeatedly. For example, if the 4th h1 is triggered, the 4th image appears, but after the 4th h1 is triggered, the first image appears first, followed by images from the first to the 4th. And when scrolling up, only the first image is shown. I want the image to change along with h1. If it's the 5th h1, then only the 5th image should be shown. However, I'm unable to fix this. If anyone can fix it, I would be very grateful.