Search the Community

I keep getting this error when I scroll past a section on a page that uses ScrollTrigger and MagicPin() and then go to another page and then hit the back button. "ScrollTrigger.js:1384 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'pin')". See the code for the component below. I keep doing console.log, but I can't figure out why the pin parameter is still undefined and it only happens when using the back button. I added "await" to it in "async" and everything. import {Component} from 'bona'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import {magicSlideElementAppear} from '../lib/transitions'; import Swiper from 'swiper'; import {Autoplay, Navigation} from 'swiper/modules'; export default class Worth extends Component { constructor() { super(...arguments); this.header = this.el.querySelector('.worth-header'); this.action = this.el.querySelector('.worth-action'); this.carousel = this.el.querySelector('.worth-carousel'); this.items = this.el.querySelector('.worth-items'); this.item = this.el.querySelectorAll('.worth-item'); this.main = this.el.querySelector('.worth'); this.mm = gsap.matchMedia(); } async onInit() { await this.magicPin(); this.magicShow(); this.initCarousel(); } async onDestroy() { this.mm.kill(true); } magicPin() { ScrollTrigger.matchMedia({ '(min-width:768px)': () => { ScrollTrigger.create({ trigger: this.main, pin: true, pinSpacing: false, }); }, }); } initCarousel() { this.mm.add('(min-width: 768px)', () => { this.worthCarousel = new Swiper(this.carousel, { modules: [Autoplay], wrapperClass: 'worth-items', slideClass: 'worth-item', slidesPerView: 'auto', speed: 8500, loop: true, allowTouchMove: false, autoplay: { delay: 0, disableOnInteraction: false } }); return () => this.worthCarousel.destroy(true, true); }); } magicShow() { if (this.header) magicSlideElementAppear(this.header); if (this.action) magicSlideElementAppear(this.action); if (this.carousel) magicSlideElementAppear(this.carousel); } }

Hi, I am just starting on gsap from last few weeks. I have a simple animation, I am trying to figure out from last few days. I have a circle and dots on the circle radius. Requirement is to scale the dots when the screen enters the section and when the user scrolls each dot should get a border indicating different content (which means a text change and image change). The issue I am facing is the borders around circle are able to appear correctly when scrolling down. But when scrolling up, the borders around the dots are not disappearing correctly. Only 3 dots out of 5 disappear when it reaches the first content, where 4 should disappear. I am not sure if I am having the right approach. Any help in the right directly is greatly appreciated. thanks in advance! Codepen attached.

Hello, I'm looking to use the Next and Previous buttons to scroll to the Next and Previous .desktopContentSection element. In the codepen, I have the Next button linked to #green and Previous buttons hard coded to #red to demonstrate the behavior, however after the element has scrolled to #green, if the Next button is clicked again the user is scrolled to #pink and then #blue. I'm thinking I would need to utilize Observer, but i'm struggling looking for an example I can adjust for my needs. Any assistance is very much appreciated, please let me know if you need anything from me. Thank you!

Hello everyone, I've been learning a lot from all of you, and I truly appreciate it. Currently, I'm working on an animation project, and it's about 90% complete. However, I'm encountering three main issues that I'm struggling to resolve. Firstly, I need each heading to snap to the center before scrolling it up. Secondly, I want the headings to be closer to each other. At the moment, there's a significant amount of white space between them during scrolling. Lastly, I'd like to slow down the scroll speed. Currently, when I scroll too fast, the headings come and go in a flash. I've tried various approaches to address these problems, but I'm still having trouble achieving the final animation effect. Any guidance or suggestions would be greatly appreciated. Thank you!

Hello everyone, I've tried to fix the navigation bar, but it works not fine; what should I change to make it visible when the first section is in the viewport more than 90% and unfix it when the last section is strolled more than 10% down? It should refresh when we get back to the container. Here is my code for this: const tlfour = gsap.timeline({ scrollTrigger: { trigger: ".carousel-inner", start: "top-=100px", end: "0", marker: true, toggleActions: "play none none reverse", endTrigger: panels[panels.length - 1] } }); tlfour.to(".carousel-navigation", { position: "sticky", bottom: 100 });

Dear Support, We are developing a website that has Scroll Smoother applied on the whole page with multiple scrolltriggers applied. We use normalizescroll(true) globally on all pages so that it follows scroll correctly (Android and IOS). But this options breaks the <a href> elements on touch hold event. Specifically on mobile devices when you hold a <a> element it fires the click event. When we disable normalizescroll it doesnt fire the click event when you hold a <a> element. We created a small codepen to recreate the issue. Please visit it from mobile devide(preferably Android with Chrome). We have fully updated softwares.

Hi guys, I'm trying to implement a horizontally scrolling gallery on my website in Webflow. I want it to be sticky until the gallery reaches the end, and then the page to resume regular scrolling. There are a number of youtube tutorials that I tried, but none worked. I have to admit, although I have a tiny little bit of experience in simple coding, I am by no means a pro. In fact, quite the opposite. After having tried to make this work for the last 5 hours, I think I can justify asking you guys Youtube-Turorial: https://www.youtube.com/watch?v=_LWinkSulwU The website I'm trying to build: https://tobias-kopp-fotografie.webflow.io/home-new-copy-scrolltrigger2 Would be so awesome if you could help. I bet it's some stupid minor detail that makes it not work at all. I tried to find that error so hard, whithout success ... Cheers, Tobi

Hello and thank you for your amazing work I have to animate an element with scrollTriggers. The entrance animation (when the element enters the viewport from the bottom) is not scrubbed, but the leaving animation (when the element leaves the viewport by the top) is scrubbed. On the demo I provided, you can see that the red square is visible at the beginning, but I want it to be at opacity = 0. Once you scroll to the starting point and go back, the square successfully disappear and everything is as I want it to be even if you scroll up and down. Why is it visible at the begining and how to fix it ? Thank you

Hello developer, hope you all are doing well. I want my svg to start from the center of the screen, keep animating at the center of the screen and end its animation at the center of the screen. for now, I am using an SVG and keep its height 0 and then it animates to its full height. I am using it for my timeline project but the line starts normally then moves away from the center and speeds up and leaves the screen to the bottom.

Hello! I think I got trouble understanding how should I use GSAP in my Next.js project, in particular, ScrollTriggers, how to initialize and kill them on resize and pathname change. Let me share you my component (it's a Prismic slice in case you wonder about the syntax). I removed some parts which are irrelevant. The aim of this code is to pin the smaller "intro" div, until we scroll through the whole container. Then it sticks to the bottom of it. This code actually works, but I've got a couple problems with it. 1. Resizing works really slow. It feels like a lot of stuff is happening in the background and it feels wrong. But it still kinda works. 2. Second issue is major and it's blocking me from going further. The line that kills ScrollTriggers applies to all the ScrollTriggers across the projects, including those from other components! How should I set it up properly? I will appreciate any advice! 'use client'; import { useRef } from 'react'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/dist/ScrollTrigger'; import { useGSAP } from '@gsap/react'; const Values = ({ slice }: ValuesProps): JSX.Element => { const container = useRef<HTMLDivElement>(null); const intro = useRef<HTMLDivElement>(null); const setupSTs = (offset: number) => { // I don't need a pin on mobile screens <= 768 if (window.innerWidth > 768) { ScrollTrigger.create({ trigger: container.current, start: 'top top', end: `bottom bottom-=${offset}`, pin: intro.current, }); } }; const initSTs = () => { // This line breaks my other components, but if I disable it, resizing for this component doesn't work anymore ScrollTrigger.getAll().forEach((ST) => ST.kill()); if (intro.current) { let introHeight = intro.current.clientHeight; let offset = window.innerHeight - introHeight; setupSTs(offset); } }; // Is it a correct use of useGSAP? useGSAP( () => { gsap.registerPlugin(ScrollTrigger); initSTs(); ScrollTrigger.addEventListener('refreshInit', initSTs); }, { scope: container } ); return ( <section ref={container} > <div className={styles.values__wrapper}> <div ref={intro} className={styles.values__intro}> (...) </div> <div className={styles.values__container}> (...) </div> </div> </section> ); }; export default Values;

Hi GSAP Team, I have a requirement to create two timelines on the same object, my problem now is the animation looks jumpy when scroll fast (I think its because immediateRender: false) and also I think using "x" and "y" to moving the object is not a good approach. And I think I don't need "pin" for this requirement. Would you mind giving me the best approach for this condition? Hope you guys undertand what I need

Hello, I need a banner like in the following example: https://www.moxionpower.com/industries/ It should work without jQuery and should use only the Gsap library.

First of all, the work you have put into this masterpiece and the dedication you guys have! Hats off! Coming to my issue, I am relatively new to React/ React router. I have gone through most of the articles in the forum regarding pinning/ ScrollTrigger/ Router navigation and many more and yet fail to understand what is it that I am doing wrong. In my actual project, there are multiple components, each having their different animations. My homepage works flawlessly, the issue arises when I navigate to a different page and return to my homepage. Now I have read tons of articles stating to call ScrollTrigger.refresh() or ScrollTrigger.update() but it does not seem to work. I am using the latest version of GSAP and react router 6.22. StackBlitz link: https://stackblitz.com/edit/vitejs-vite-kdw52g?file=src%2FApp.jsx Any help is appreciated! You all are anyway appreciated Thank you.

I have a number of sections with a ScrollTrigger and fromTo animation that changes the background-color from red to blue during scroll (scrub). The first section is located at the top of the viewport and starts with a purple color instead of red like the others below, as expected. Is it possible to let the user see the animation from red to purple (before scrolling) on the sections that starts fully or partially visible?

hello, I've been working on react project, The issue is the 'end' property on scrollTigger does not change when the state changes. How can I solve this ? thankyou here is the code: useGSAP( () => { gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline({ scrollTrigger: { trigger: '.daily-wrapper', scrub: true, start: 'bottom 34%', end: 'bottom 5%', pin: '.info-text', markers: { startColor: 'purple', endColor: 'green', fontSize: '2rem', }, }, }); tl.to('.info-text', { x: -400, // y: -50, duration: 5, onComplete: () => { // poinRef.current.style.backgroundColor = 'red'; console.log('finish'); }, // onUpdate: () => { // poinRef.current.style.backgroundColor = 'white'; // }, }); gsap.to('.daily-wrapper', { scrollTrigger: { trigger: '.daily-wrapper', scrub: true, start: '280px 40%', end: `${1700 + sizeChange}px 5%`, pin: '.info-text', markers: { startColor: 'blue', endColor: 'orange', fontSize: '1rem', }, }, }); }, { dependencies: [sizeChange] } );

Hello everyone, I'm currently learning ScrollTrigger to replicate thescroll animation showcased on: https://olio-midnight.framer.website/ The one where the image transitions over the title while the title subtly scales down. Here's my progress so far on CodePen: https://codepen.io/headlessNode/pen/vYMEzxw While the animation is taking shape, I've encountered an issue with whitespace at the end when manipulating the Y value of the image. I've attempted to adjust the hero's height via ScrollTrigger, but it's resulting in an undesired effect where the height reduces and then reverts to its original state upon animation completion. I could use some guidance on which properties to modify or utilize to achieve the seamless transition seen on the referenced website. Any assistance you can provide would be greatly appreciated. Thank you for your time and expertise.

I hope you are doing well! I'm new with GSAP and I'm having a lot of problems with a complex animation. I tried to create a codepen as simple as possible so you can see what's going on, sorry if it's not very simple. Basically, I'm trying to make an animation like the one used in https://www.revolut.com/ but I can't get it to work, I think I improved the logic of the approach but there is something that keeps making it jump when adding or removing classes. If you need more context or whatever let me know. Thank you very much for your time.

Hello everyone, I have a task to create a banner like next: https://www.moxionpower.com/industries/ I've tried, but it isn't work fine.

Hi there, I'm working on creating an accordion that should function with both scrollTrigger and click functionality. I've attached an example that expands the accordion on scroll, but I'm unsure how to implement the click functionality to open it as well. Let me know if you can provide any help! Thanks

I want the numbers to count Up when I reach a certain DOM when scrolling. But I can't.. I know there's a problem with my code, but I don't know how to fix it. [problem] 1. I don't see the start, end marker of the DOM set as a tracker. Even if it is seen, it is seen a place the is not related to the area. 2. The animation runs before the trigger element is even reached Here my code (And I'm using react base) I need your help import { useRef, useEffect } from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { reviewList } from './reviewList'; import RadiusInText from '../common/RadiusInText'; import style from './index.module.css'; gsap.registerPlugin(ScrollTrigger); function ClientReview() { const countEls = useRef([]); const countContainer = useRef(); useEffect(() => { reviewList.forEach((item, index) => { const countEl = countEls.current[index]; gsap.to(countEl, { innerHTML: Math.ceil(Number(item.count)), duration: 4, scrollTrigger: { trigger: countContainer.current, start: 'bottm bottom ', end: 'bottom 50%', markers: true, }, }); }); }, []); return ( <div className={style.container} ref={countContainer}> <RadiusInText content="미니빔에서 작업한 결과들을 데이터로 확인해 보세요!" /> <h3 className={style.title}> 미니빔 서비스를 추천하는 <br /> 고객의 목소리를 들어보세요 </h3> <ul className={style.review_list}> {reviewList.map((item, index) => ( <li className={style.review} key={item.id}> <h3 ref={(el) => (countEls.current[index] = el)} className={style.length}> 0 </h3> <span className={style.title}>{item.title}</span> <p className={style.explain}>{item.explain}</p> </li> ))} </ul> </div> ); } export default ClientReview;

Hi all, thank you in advance for checking out my post! I have a video reference of what I'm trying to achieve here: https://assets.codepen.io/191332/comp.mp4 And here is the Codepen demo I have started. Note: Please view Codepen in a new tab / window and view in Full mode or increase the Codepen panel height to have a better visual of what is going on, ha! I'm stuck on understanding a few things in my forEach loop of text blocks (right column)... As noted in purple for each block, as the video shows, I'm trying to expand / show the first text block and collapse the other two. Then as I scroll into the second block, collapse the first and last block. As I scroll into the last block, collapse the prior two blocks, and keep this block expanded as you continue to scroll down the page. And two more things: Is there a way to get the current self.progress / percent value for each block so I can animate their progress bar? This is the purple vertical line in the video example that grows / shrinks based on current scroll / scrub. For the 3 text bocks, is it possible to pin or hold longer on the first block, say 50% of the timeline progress, and then the other two blocks for 25% each? Hope this demo and video make enough sense and any help to point me in the right direction is beyond appreciated! Thank you all so much!

Hello, I'm trying to create an animation with "scrollTrigger + pin" with 2 cards ( overlap + scale on scroll ). The animation works fine but in the end I have way too much empty space and I don't know how to fix this. I put 2 images to explain the problem and the desired result. Demo https://codepen.io/paallaire/pen/ZEZzarJ Visual Bug Expected

Hi all! I have a problem with the scrolltrigger after the window resize. Here is a video https://www.loom.com/share/1a45fd9960df45a2a304605174d0fdf7 What I'm doing wrong? The code in codepen.io is exactly the same as on the live page but live doesn't work .... I'm lost https://www-andweekly-com.sandbox.hs-sites.com/gsap-scroll-test Any ideas?

Something wrong with titles on resize. Please see sample: https://codepen.io/Lenspre/pen/zYbgLLL

Hello, after Chrome last update, my code doesn't work anymore. Video is flickering on scroll. I activated controls on video to check the correct animation of GSAP and all seems to be good but video doesn't follow scroll correctly and needs seconds to align with the scroll position. Video is encoded correctly and since 5/6 day ago, it worked correctly an all devices and browsers. On Safari, for example, it works correctly. It seems that the problem is related to Chrome on Mac. Does anyone have a suggestion? Thanks so much. Here's the code to play video on scrub. //GESTISCO IL PLAY/PAUSE DEL VIDEO SECONDO LO SCROLL let video = document.querySelector('#thevideo'); let sections = document.querySelectorAll('.gsap--section'); /* Make sure the video is 'activated' on iOS */ function once(el, event, fn, opts) { var onceFn = function (e) { el.removeEventListener(event, onceFn); fn.apply(this, arguments); }; el.addEventListener(event, onceFn, opts); return onceFn; } video.play(); // must call .play() first, otherwise it won't trigger things to be scrubbable (weird) video.pause(); var containerH = $(".gsap--outer").outerHeight(); //TIMELINE const videoTl = gsap.timeline({ scrollTrigger: { scroller: '.inner-site', pinType: 'fixed', anticipatePin: 1, trigger: ".gsap-pincontainer", start: "top top", end: "+=" + (100 * sections.length) + "%", pin: true, scrub: 2, // markers: true, } }); videoTl.to( video, { currentTime: 14, }); videoTl.to(".gsap--outer", { y: -(containerH - innerHeight), //100% - altezza del col-span }, "<"); }