Search the Community
Showing results for tags 'scroll trigger'.
Found 17 results
-
Hi all., Great day. When we're using the smooth scroll script the functionality is not working fine as we expected. As per your demo in codepen (https://codepen.io/GreenSock/pen/KKXZOyZ), we tried to include the height with a static value like (height: 9000px;) reference - https://prnt.sc/6K97ufrgm4CE . Shortvideos reference, https://recordit.co/hdjCQztnJM and https://recordit.co/3At0AA5qWD Unfortunately, we can't include the constant value here, the height will differ for each page. So, we tried to get the entire body height from the script. We haven't got any luck on this. Now, we are facing the height calculation methods only. So, anyone please help us to complete this without calculating the height? Thanks in advance
-
Hi Team, We are trying to implement scroll tab functionality using GSAP & ScrollTrigger. On scroll, the content description and image have to change. The problem is that the content and image need to display correctly. It's getting hidden; sometimes, we need to scroll twice to display the content and images. Thank You
-
Hello guys, So I am facing a small problem related to scroll smoother and scroll trigger. I have explained the whole problem in this 4 mins video. Can anyone help me to get this fixed please. Video link: https://www.loom.com/share/11acaf84a85a40f8a616db46a7aacdb5 Thanks, Nafiul -
Hello, I was building entire multi page website with using GSAP only in Next.js for scroll trigger on every page for some elements. At, last I decided to also add locomotive scroll as well. But after adding it to the project all scroll trigger doesn't work at any page. Why is that I cannot find the answer. Also is there any method to achieve smooth scroll without disabling scroll trigger. Thank You !
-
I have trouble with the margins of my slider container once I finish scrolling. I bet this is because of conflicts with another scrollTrigger, which should enlarge the backgrounds of similar sections on the scroll. Unfortunalety this is my first use of GSAP and I can't understand how to fix it. Just scroll my Pen and notice how Our Products text is jumping. You might need to open it in Codepen, looks like this problem is not reproducible in the widget. Thanks in advance!
-
Hi, Me again, I know there are lot of experienced developer on this forum. As a beginner I need help with an issue. I have made a scrollTrigger option and wanted to scroll only 1 section at a time. But I'm not sure how to do it. No matter how fast or slow I scroll I always want to scroll/pass only 1 section. Please see my demo and any help would be appreciated. Thanks Guys!
-
When you hover over the photos a svg morphs. Displaying a white shape over the bottom of the image. If you hover while scrolling there's a 1px gap below the svg and the bottom of the photo. I've tried adjusting CSS and some other JS tests with placement of the morphed svg. But can't seem to make the 1px gap disappear on scroll. Any advice would be greatly appreciated. Thank you!
-
In my codepen I have a script tag that runs a scroll trigger pin. I've tested the pin and know it works. But when it's added via the script tag (in the HTML) the start and end marker move on scroll smoother scroll. Is this multi script approach possible? Or should I just keep all scroll trigger/scroll smoother JS in one file? Here's the scroll trigger script for reference: import gsap from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) function imagesMove() { let galleryImages = gsap.utils.toArray('.gallery picture') let wrapper = document.querySelector('.gallery .wrapper') let startWidth = wrapper.getBoundingClientRect().width - window.innerWidth gsap.to(galleryImages, { x: () => -startWidth, ease: "none", scrollTrigger: { trigger: ".gallery", pin: ".gallery", scrub: 0.5, anticipatePin: 1, start: "top: +=15%", end: "+=" + (window.innerHeight * galleryImages.length - 1), markers: true, } }); ScrollTrigger.refresh() } imagesMove()
-
How can we implement reactjs website animation with videos on scroll? On scroll, videos can be played continuously in a screen. The exact example is like below: https://staratlas.com/ Thank you.
-
Hi everyone, I've seen this demo to use CSS scroll snapping. I've tried to mix this setup with looped scrolling https://codepen.io/GreenSock/pen/rNOebyo) but I can't find the right setup. Is this mix possibile? Any ideas about? Thanks in advance
-
You can check my website Here . Why this is happened ?
-
i have this horizontal scrolling website with different width per sections, what im trying to do is that when i stop scrolling it should scroll snap at the center of the current section, for visual i added span with 100vw with black color opacity box.
-
Hello all! 🙂 I'm struggling to understand some concepts of GSAP (Timeline) and ScrollTrigger. I have a simple animation like a door opening and closing when the user scrolls down. There will be a content for each section behind these doors. So, regarding this I have 2 main questions: 1. Slowing down the scroll If I need to go through each section slower then it is right now, should I increase the height of the section? Not the duration of the tween? 2. Responsiveness I added some media queries that will change the size of the content text. If the size of the window changes, there is a bug. The animation doesn't respect the new size/position and I can't figure out why 🥲 Thank you!!! 🥳 PS: I don't know why but in the embed CodePen, the LocomotiveScroll seems not to be working. -
Hello Everyone, Hope you guys having a great day. So, here i am trying to achieve pin scrolling form left to right and right to left achieved nicely by @akapowl using locomotive scroll and how to make horizontal scroll section to display vertical on mobile and display horizontally at tab and desktop. and if i want to achieve horizontal scroll at mobile then this will be kind of bad for user experience as it will cause problem to scroll. https://codepen.io/akapowl/pen/8a383f202ba53d6b11cc83da39b6f5b5 I want to achieve left to right in second section and want to make them display vertical on mobile coz its overlapping -
Hello..! I did setup locomotive scroll with GSAP for my Wordpress Site. Currently it is running beautifully..! But the problm is that, None of my Elementor Scroll Animations are working. I am pretty new to Wordpress and Web Development. If you can help me, it would be a great pleasure. (Iam using Astra theme + Elementor Pro. I created some scroll animations for couple of Elementor sections. Everything not working. And I add my page (#page) as the locomotive scroll element.) -
Hey Champs of the GSAP community, I have been working on this Circular Nav for a while and finally got it to spin like a pin wheel on scroll using Scroll Trigger but now it won't stay in the middle. It keeps moving up and down when you scroll. Can anyone help me fixing it to the middle or is there a better way to do this PS. the tiny man walks on scroll. Please and Thank you Edit 1: The Circular nav would be on the left Div while there would some content on the right Div -
Hello Gsap community...I am a newbie with using gsap....I was working on a project in which I am using scroll trigger to display the website horizontally... The problem is that the anchor tags in my home page are not working... I want the anchor tags to scroll to specific divs(having their own ID) on click....I am also setting the width of the section divs using percentages as well as pixels..... I have provided a demo for reference...any help will be appreciated
