Jump to content
Search Community

Search the Community

Showing results for tags 'lenis'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Found 17 results

  1. aronanol

    GSAP doesnt work with next.js

    Hi guys, hope you're doing well. I got a problem right now by integrating gsap with next.js What I want to achieve: - Got <body/> and <html/> overflow:hidden to avoid mobile adress bar to show/hide and to avoir to use normalizeScroll - Using a scroll proxy with ScrollTriggers and add a smooth effect on them with Lenis - ScrollTrigger.update on my main RAF to got lenis, gsap, and three.js sync Here you got isolated code : https://stackblitz.com/edit/stackblitz-starters-g1esexap?file=app%2FComponents%2FDom%2FMaSection.tsx I am currently stuggling on this one, I got a vanilla version, everything works well, but when pass the code to next.js It seems like gsap scrollTriggers are no longer working. Help yould be appreciated to found a way to achieve that
  2. Hi everyone, I'm working on a project that uses Lenis smooth scrolling on the main page, but I'm running into issues when trying to interact with an iframe on the page. Specifically, I want to be able to smoothly scroll through the page while still allowing full interaction with the iframe, such as scrolling inside the iframe or dragging content within it. The Problem: The page scrolls smoothly using Lenis, but when the user tries to scroll or drag inside the iframe, the scrolling doesn’t work properly. The iframe content becomes unscrollable, and the smooth scrolling sometimes interferes with the iframe’s native scrollability. I want the user to be able to scroll smoothly on the main page but still interact with the iframe’s contents normally. here is the project: reline-studio.webflow.io
  3. Hi! I'm currently testing GSAP with Lenis but this seems to be mostly a GSAP + ScrollTrigger issue. I'm trying to figure the best way to pin the second section (red background) before you proceed scrolling to the next section (white background). I wanted to add a "pause" before the user proceeds to scroll down past it / the section should be pinned until the gsap timeline finishes.
  4. Hi all, in my project where I instantiate lenis in a container and not in the body as by default, when I resize the window it seems that scrolltrigger is unable to calculate the new start & end correctly, did I do something wrong in the scrollerProxy configuration?
  5. dominz2005

    Problem with Lenis + GSAP Scroll Trigger

    I have a problem with implementing lenis with the scrollTrigger. Basically when I make the scroll trigger end to be "+=800px" lenis ends up unavailable to scroll to the bottom of the page. gsap.registerPlugin(ScrollTrigger); const lenis = new Lenis({ lerp: 0.15, autoRaf: true, }); ScrollTrigger.create({ trigger: section.value.parentNode, start: "top 89px", end: `+=800px`, pin: section.value, markers: true })
  6. Hello, I’ve been working on projects with GSAP ScrollSmoother for a long time. But lately, I’ve been noticing people using Lenis with GSAP. For my upcoming projects, do you think their compatibility is good enough at this point? Or are there still issues? Like, are we being misled by how projects with Lenis are performing? In short, can we say that GSAP works smoothly and stably with Lenis for all animations and functions? Thank you very much in advance!
  7. Hi GSAP Community, I'm working on a site using Lenis Smooth Scroll, GSAP Scroll Trigger, React-Three-Fiber, and Drei. While the animations look great but the site is extremely laggy and sometimes non-functional on many mobile and desktop devices. I've optimized where I can but still can't pinpoint the issue. Here's the live site: https://codeencoders.vercel.app/ GitHub Repo: https://github.com/Waqas786ali/codeencoders Details: I've implemented GSAP animations alongside Three.js objects. Performance on Desktop and Mobile devices is the primary concern (lagging, slow interactions). Any advice on optimizing GSAP or handling Three.js in mobile environments would be greatly appreciated! Thank you in advance for your help. Best regards, Waqas Ali
  8. Hi, i have working in cargo collective website then i've added smooth scroll lenis.js and my requirement also one section use animation like card scrolling pin effect horizontally then i have implement gsap scrollTrigger but i have scrolling then smooth scroll lenis.js working perfectly but when enter the section they are hold card's not see only white background showing so please check it and help me.
  9. By Huy

    GSAP Observer Marquee with Lenis

    Hello everyone, As this is my first time using GSAP, I'm having quite a bit of trouble getting the scroll velocity logic for the marquee right. At the moment the logic sort of works but it doesn't really work as I intended as there is an abrupt stop as soon as you stop scrolling and then it continues the looping animation at a normal speed which sort of breaks the seamless speed scroll. Would also be happy to get any other feedback on improving my GSAP code, it feels like I'm just hammering away at the code while reading the docs and it just happens to work a little. Any other questions I would be happy to answer!
  10. I’m trying to replicate the scroll animation in the Services section of Webisoft's website, using Lenis and ScrollTrigger. However, I can’t achieve the effect where the top part of each section remains partially stacked as you scroll. Here’s my CodePen link: https://codepen.io/Miffy402/pen/mdNLBBq. Any advice or tips would be greatly appreciated!
  11. Hello, I am having some troubles making a scrolltrigger animation in a nuxt component. Basically I have a lenis script for a nuxt page and inside this page a scrolltrigger script for the projectItem.vue component. I installed gsap via npm and imported it both in the page and the component. I don't know why but the code seems to work because we enter in the onEnter() callback but there is no animation at all. Here is a link to the stackBlitz of my project, hoping someone can help me : https://stackblitz.com/~/github.com/Mitiss25/portfolioFinal Thank you !
  12. I was building a website while integrating scrollTrigger with lenis, the animation was not coming in right, when I added marker and set it to true to see the the start and end positions, I saw they where not aligned properly. But If I let's say change one of the animating properties in the code it aligns itself correctly to the actual start and end position. And also no this is not the same issue with ScrollTrigger and Lenis Issue, because some section seem not to have this issue and this particular one does. here is the code on codesanbox. Check the contact component. THANK YOU
  13. I'm trying to call a function inside GSAP - I'm using React, but I'm getting error in my console: App.jsx:59 Uncaught TypeError: Cannot read properties of undefined (reading 'scrollTo') This is the code: import gsap from "gsap"; import ScrollTrigger from "gsap/dist/ScrollTrigger"; import { ReactLenis, useLenis } from "@studio-freight/react-lenis"; gsap.registerPlugin(ScrollTrigger); const App = () => { const lenis = useLenis(({ scroll }) => { // called every scroll }); const [showSpan, setShowSpan] = useState(true); const mainTitleRef = useRef(null); const secondaryTitleRef = useRef(null); const wavingHandRef = useRef(null); const section1Ref = useRef(null); const section2Ref = useRef(null); useLayoutEffect(() => { pinSection(); animateTitles(); return () => { // Cleanup code when the component unmounts ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); }; }, []); // Empty dependency array to run once after the initial render const pinSection = () => { // Pin the section when it enters the viewport ScrollTrigger.create({ trigger: section1Ref.current, start: "top top", end: "1200 top", pin: true, markers: true, onLeave: () => { gsap.to(section1Ref.current, { opacity: 0, duration: 1, onComplete: scrollToSection2, }); // Set opacity to 1 when entering the trigger // scrollToSection2(); // gsap.add( function(){ scrollToSection2(); } ) }, onEnterBack: () => { gsap.to(section1Ref.current, { opacity: 1, duration: 1 }); }, }); }; const scrollToSection2 = () => { lenis.scrollTo(section2Ref.current, { duration: 5 }); }; As you can see scollToSection2 is a React function. Thank you for your help upfront!
  14. <script setup> import { ref, onMounted } from "vue"; import axios from "~/services/axios.js"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { CheckBadgeIcon } from "@heroicons/vue/24/solid"; // import { CheckCircle } from '@vue-icons/heroicons'; import paint from "../../assets/images/paint.jpg"; import t1 from "../../assets/images/true/t1.jpg"; import t2 from "../../assets/images/true/t2.jpg"; import t3 from "../../assets/images/true/t3.jpg"; import t4 from "../../assets/images/true/t4.jpg"; import t5 from "../../assets/images/true/t5.jpg"; import t6 from "../../assets/images/true/t6.jpg"; gsap.registerPlugin(ScrollTrigger); const data = [ { image: t1, text: "amjad" }, { image: t2, text: "amjad" }, { image: t3, text: "amjad" }, { image: t6, text: "amjad" }, { image: t4, text: "amjad" }, { image: t5, text: "amjad" }, ]; const initAnimation = () => { const section_2 = document.getElementById("horizontal"); let box_items = gsap.utils.toArray(".horizontal__item"); gsap.fromTo( box_items, { xPercent: 30 * (box_items.length - 1), }, { xPercent: -120 * (box_items.length - 1), ease: "sine.out", // duration: 5, scrollTrigger: { trigger: section_2, pin: true, scrub: 1, // markers: true, snap: 1 / (box_items.length - 1), end: "+=" + section_2.offsetWidth, toggleActions: "restart pause reverse reverse", }, } ); }; let scrollTriggerInstance; const features = ref([]); const featuresFor = ref([]); const error = ref(null); const isLoading = ref(false); onMounted(() => { // fetchChoicesData(); window.addEventListener("resize", () => { ScrollTrigger.refresh(); }); const handleResize = () => { if (window.innerWidth <= 800 && scrollTriggerInstance) { // Kill the ScrollTrigger instance and animation if screen size is less than or equal to 800px ScrollTrigger.refresh(); scrollTriggerInstance.kill(); scrollTriggerInstance = null; } else if (window.innerWidth > 800 && !scrollTriggerInstance) { // Initialize the animation if screen size is more than 800px ScrollTrigger.refresh(); scrollTriggerInstance = initAnimation(); } }; if (window.innerWidth > 800) { scrollTriggerInstance = initAnimation(); } window.addEventListener("resize", handleResize); }); ScrollTrigger.refresh(); </script> <template> <div class="w-full"> <h1 class="text-white text-[3rem] sm:text-[5.5rem] leading-[5rem] font-[600] mb-[2.2rem] ">Pracht <br> Abonnement</h1> <div id="horizontal" class="horizontal w-full big:h-[100vh] big:overflow-hidden big:px-0 px-[1.5rem] py-[1rem] gap-[4rem] grid grid-rows-my-features big:pb-0 pb-[8rem] relative" > <div class="w-full sm:px-[5rem] xl:px-[14rem] h-max grid justify-items-center gap-[1rem] sm:gap-[10rem] sm:grid-cols-2" > <div class="w-max h-max gap-[1rem] sm:gap-[2rem] grid justify-items-start"> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Maandeliks Betalen</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">100% Garantie</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Professioneel Schilderwerk</h1> </div> </div> <div class="w-max h-max gap-[1rem] sm:gap-[2rem] grid justify-items-start"> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Zorgeloos onderhoud</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Reiging & Glasbewassing</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Ondafhankelike inspectie</h1> </div> </div> </div> <div class="container row-span-2 w-[100%] h-full m-auto"> <div class="horizontal__content h-full big:grid-flow-col grid gap-y-[4rem]"> <div v-for="num in data" :key="num" class="horizontal__item big:h-[60%] big:w-[28rem] h-[20rem] sm:h-[30rem] w-full mr-[10rem]" > <div class="horizontal__num w-full h-full relative"> <img :src="num.image" class="w-full h-full object-cover" alt="" /> </div> </div> </div> </div> </div> </div> </template> <style scoped> .text__tick { @apply text-white text-[1rem] sm:text-[1.4rem]; } .icon__tick { @apply text-[#f598af] text-[1.8rem] w-[2.2rem] h-[2.2rem]; } .container-tick { @apply grid grid-cols-my-calc grid-flow-col items-center text-left justify-items-start gap-[.7rem]; } </style>
  15. When I click on a navigation link to scroll to a specific section of the page using lenis.scrollTo, all scrollTrigger animations run, causing a poor scrolling experience due to the numerous animations in each section. To address this, I attempted to disable the animations using scrollTrigger.disable() when lenis.scrollTo runs and re-enable them when the particular section is reached. While the animations created with ScrollTrigger pause correctly during the scroll, the page jumps to the top when the scroll is complete. You can view the codepen demo here: see codepen demo here :
  16. Hello there, I'm trying to animate the letters of a sentence. Letters need to appear when its right bound hits the right bound of my viewport (= when the letter enters the viewport). I'm almost there but I seem to be missing something. I'm using the containerAnimation parameter but maybe it's not the right thing to do here. Anyway I'm opened to suggestions, thanks for your help folks Olivier
  17. Hi everyone, I'm using Lenis smoothscroll and I have lots of scrollTrigger timelines that are triggered with toggleAction and scrub. They work fine when I wheel scroll down my page but when I click on an anchor to immediately go to my section, previous timelines do not finish properly, I have styles that are not added/removed only on the ones triggered with toggleAction. I tried forcing the animations to the end like below, but that doesn't work. document.querySelectorAll('a[href^="#"]').forEach((anchor) => { anchor.addEventListener('click', (e) => { e.preventDefault(); const href = anchor.getAttribute('href'); if (href === '#') { return; } window.lenis.scrollTo( href, { immediate: true, onComplete() { const scrollTriggers = ScrollTrigger.getAll(); scrollTriggers.forEach((st) => { if (st.animation) { st.animation.progress(1); } }); } } ); }); }); What am I doing wrong here ? Thanks for your help.
×
×
  • Create New...