Search the Community

Hi, I have a project that deployed live: https://taxbiexwaterpoloclub.com/ When the page loads the first time (after a hard refresh *sometimes not always*) the footer is not able to scroll to the bottom, you can see that you have space on the scroller but you can't actually scroll. if you scroll via the scroller it pushes the page back up again.. you have to either refresh the page or else resize the window. it's very random and sometimes it works as is should, sometimes i doesn't. i'm using gsap and scroll trigger for most of the animations.. I'm also using locomotive scroll for smooth scrolling. On a development environment this doesn't happen only once it's deployed to a live server. I've linked the footer file to this thread home-footer-old.php

Nice to meet you, I would like to discuss the GSAP ScrollTrigger. I am modifying the GSAP Observer demo to GSAP ScrollTrigger. I have pinned the sections in the .section-wrap and the image switches as it scrolls. I want to do the following about this. 1. separate the section pinning for each .section-wrap. 2. when I finish scrolling a section in the first .section-wrap, I want to move to the second .section-wrap. Here's the HTML, and it mentions CSS too. <div class="section-wrap"><!--← add position: relative;--> <section class="first"><!-- position: absolute;--> <div class="outer"> <div class="inner"> <!-- The background image for this element is a photo --> </div> </div> </section> <section class="second"> <!--Abbreviations--> </section> <section class="third"> <!--Abbreviations--> </section> </div> <div class="section-wrap"> <!--Abbreviations. Same as the element above.--> </div> The JavaScript is this. I have written comments where I have added from the demo. //Change ScrollTrigger gsap.registerPlugin(ScrollTrigger); let sections = document.querySelectorAll("section"), images = document.querySelectorAll(".bg"), outerWrappers = gsap.utils.toArray(".outer"), innerWrappers = gsap.utils.toArray(".inner"), currentIndex = -1, wrap = gsap.utils.wrap(0, sections.length), animating; gsap.set(outerWrappers, { yPercent: 100 }); gsap.set(innerWrappers, { yPercent: -100 }); function gotoSection(index, direction) { index = wrap(index); animating = true; let fromTop = direction === -1, dFactor = fromTop ? -1 : 1, tl = gsap.timeline({ defaults: { duration: 1.25, ease: "power1.inOut" }, onComplete: () => animating = false }); if (currentIndex >= 0) { gsap.set(sections[currentIndex], { zIndex: 0 }); tl.to(images[currentIndex], { yPercent: -15 * dFactor }) .set(sections[currentIndex], { autoAlpha: 0 }); } gsap.set(sections[index], { autoAlpha: 1, zIndex: 1 }); tl.fromTo([outerWrappers[index], innerWrappers[index]], { yPercent: i => i ? -100 * dFactor : 100 * dFactor }, { yPercent: 0 }, 0) .fromTo(images[index], { yPercent: 15 * dFactor }, { yPercent: 0 }, 0) currentIndex = index; } //Change ScrollTrigger ScrollTrigger.observe({ target: ".section-wrap", //Add type: "wheel,touch,pointer", wheelSpeed: -1, onDown: () => !animating && gotoSection(currentIndex - 1, -1), onUp: () => !animating && gotoSection(currentIndex + 1, 1), tolerance: 10, preventDefault: true }); gotoSection(0, 1); I think I need to re-array the sections,outerWrappers,innerWrappers per .section-wrap, any good ideas? Thank you in advance for your help.

Hello everyone, I'm new to GSAP and am trying to learn it. I have created a pen where I'm using GSAP ScrollTrigger to animate my site. Everything works fine on a big viewport, but when it comes to mobile or tablet viewports, my sections get overlapped with each other. Why does this happen? I can understand that if I apply pinSpacing=false, then the bottom section should start overlapping the pinned section. But here, I didn't apply any pinSpacing at all, so why does my content get hidden under other sections? what i want is that when scroll of first section/div completed then only second section should come to view one by one. Please help me solve this error because I have to complete the whole project for my company, and I'm facing a lot of stress because of this. This only happens when I switch to mobile or tablet viewports.

Hello everyone, I'm new to GSAP, and I'm trying to make a website using it. However, I am facing some problems. When I refresh the page, my animation gets stuck and nothing happens. Instead of restarting my animation from the beginning, it gets stuck at the footer. I have to refresh the page 3 to 4 times to make it work properly. Please tell me how I can solve this problem. I want my page to start from the beginning when I refresh, and I also want it to start from the beginning when I change viewports. My animation lags a lot while scrolling down. It works fine in the Brave browser, but it lags in the Chrome browser. sorry im not able to put my whole html,css file in codepen because of my images . i have posted my js please look at it

Hello GSAP Family, It's always pleasant working with GSAP and today while doing so I have got an issue with scrollTrigger snap. I was working with functionality for which Snap is required and I have tried to add it but while I scroll down the snap goes back to previous section and not moving forward. Here is the pen. Please help me guys.

When working with images in GSAP, I've noticed that on the initial load, the start position gets shifted if we don't set the image to eager: loads or given a specific height to it. However, I have been setting all my images to eager: loads instead of a lazy load, so it instantly downloads images at once, and the start position doesn't shift. But this increases the initial load of the page. Sometimes aspect ratio works and then I don't need to set images to eager: loads, lazy load works fine and sometimes setting the aspect ratio doesn't work. Is there a way we can maintain the scrolltrigger start position?

I'm working on a project where I'm using GSAP, ScrollTrigger, and scrollsmoother. I have a fixed element that I want to remain fixed until ScrollTrigger is fired, at which point I want it to move along with the rest of the page smoothly. I've attempted two approaches: one with the fixed element positioned outside the id="smooth-content" container (https://codepen.io/mp1985/pen/ZENOaeg) and another with the same element positioned absolutely within the id="smooth-content" container (https://codepen.io/mp1985/pen/LYoZOmW). However, I'm encountering difficulties in achieving the desired behavior. Is there a recommended approach to accomplish this? is there a way to obtain the scroll value when ScrollTrigger is fired so then I can synchronize the movement of the fixed (or absolute) element accordingly? Any insights or guidance would be greatly appreciated!

https://codepen.io/GreenSock/pen/LZOMKY I modified the scrollTo example code, but the result did not work as I expected. I added offsetY to scrollTo, the first click works perfectly when the scroll position is less than the element's scroll position. However, if I repeatedly click, the offsetY continues to apply, rather than staying fixed at the desired element and then applying the offset. When the scroll position is greater than the element's position, it cannot scroll to the desired position at all. I expected it to work like box2. Currently, for box2, I am using a fixed y value.

Hey there, i have build a website with lots of scroll trigger animation. unveils, split text, pinned sections etc. i just started cross browser testing and noticed that on chrome(mac) when i scroll down a page and then reload, lots of stuff breaks: - pinned sections are misplaced - the scroll position of the page itself changes on reload - other effects stop working completely I can't really put together a codepen for this, because when you reload a codepen the result always starts with scrolposition top. Has anybody ever experienced something like this? Is this a common problem with chrome? Am I doing something completely wrong? Any help much appreciated. Here is the footer part that contains all animation script: <script src="<?php echo get_stylesheet_directory_uri(); ?>/src/gsap/gsap.min.js"></script> <script src="<?php echo get_stylesheet_directory_uri(); ?>/src/gsap/ScrollTrigger.min.js"></script> <script> /* navpoint */ $('.navpoint2').addClass('activenavpoint'); /* logo color */ var headerLogo = document.querySelector('.headerlogo'); var hueValue = Math.floor(Math.random() * 360); headerLogo.style.filter = 'hue-rotate(' + hueValue + 'deg)'; /* register gsap */ gsap.registerPlugin(ScrollTrigger); /* unveil classes */ let unveilfade1 = gsap.utils.toArray(".unveilfade1"); unveilfade1.forEach((uvf1, i) => { gsap.from(uvf1, { autoAlpha: 0, ease: "power1.out", duration: 2, scrollTrigger: { trigger: uvf1, start: "top 90%", end: "top 90%", } }); }); let unveilfade2 = gsap.utils.toArray(".unveilfade2"); unveilfade2.forEach((uvf2, i) => { gsap.from(uvf2, { autoAlpha: 0, ease: "power1.out", duration: 2, delay: 0.3, scrollTrigger: { trigger: uvf2, start: "top 90%", end: "top 90%", } }); }); let unveilfade3 = gsap.utils.toArray(".unveilfade3"); unveilfade3.forEach((uvf3, i) => { gsap.from(uvf3, { autoAlpha: 0, ease: "power1.out", duration: 2, delay: 0.6, scrollTrigger: { trigger: uvf3, start: "top 90%", end: "top 90%", } }); }); /* pinned panel */ gsap.utils.toArray(".panel").forEach((panel, i) => { ScrollTrigger.create({ trigger: panel, start: "top top", pin: true, pinSpacing: false, markers: true }); }); </script>

Hello. For a long time I can't solve a responsive issue. If the user changes the size of the viewport from mobile to desktop, the .js-heap-wrapper block shifts. By default, the block (.js-heap-wrapper) animation starts with transform: translate(0px, 0px); But after changing the viewport, it starts with other values (example transform: translate(0px, 750px)). exemple.mp4

Hi, hope everyone is doing great. I would like to be able to achieve an effect that is done with scrollmagic but with scrolltrigger. It layers 2 images on top of each other and the second image is hidden. But when you scroll the second image and section is revealed on top of the first section. You can understand the effect more from this gif - I hope its not too much of a trouble and I can get a starting point here as I am not very good with code. Thank you so much. Have a great day!

The following issues I'm facing with this code are: Extra spacing/padding at the bottom. Sometimes it scrolls perfectly to its own position, but other times it scrolls up to the component above it and scrolls on that component.

Hello there, I'm trying to do the scroll pin animation in reactjs. There I'm using swiper and gsap. My requirement is when scroll to section it need to pin and then swiper needs to be slide, untill end. I'm taking reference from below codepen. Js version: "https://codepen.io/snorkltv/pen/QWzwmjJ" Im trying to replicate the codepen example in reactjs, I have tried, but Im strucked in rendering issue. Here I have add the code on Stackbitz Reactjs: https://stackblitz.com/edit/vitejs-vite-rpn1iq?file=src%2FApp.jsx Can some please help me with that....

Hello, I'm pretty new to GSAP and i'm attempting a rather complex animation. I basically would love to stop the page from scrolling up until a certain animation is finished however its trickier than i thought. I've tried a few things and i'd just like some advice about the best way to do this. Basically I'd like to stop the scroll until after the funcs hideSprintTitle(), hidePath() and verticalAlignMotion() have finished...

Hi, recently i created a code with scrollTrigger that based on clientHeight( in this case is "end: '+=' + aboutInner.clientHeight," ). When I scroll down, the image animation ended up cross over to the other section(violet color part). Thus, I need write something like "end: '+=' + aboutInner.clientHeight * 0.65" to reduce clientHeight so just to make sure the animation is finished inside its intended section(palegreen color part). Is the any way to allow the animation finished inside the intended section with just "end: '+=' + aboutInner.clientHeight," only and without reducing the clientHeight(like writing "end: '+=' + aboutInner.clientHeight * certain value")? And is there any explanation behind my code's "end: '+=' + aboutInner.clientHeight," ended up cross over to other parts? My english isnt that good, any help will be appreciated! Thank you!

Hello to all the professionals out there, I'm working to implement the feature reveal bottom when scrolling as shown in the GSAP reveal btm demo gsap. But I want to add a feature where it implements a fade-in feature as I slowly scroll through section .panel. For example, when I'm about to scroll until the end of image 1. It will slowly reveal,(opacity:1) image 2 along with the words. I also have an additional problem in my codepen, somehow when I put them inside the parent container of display:flex,flex-direction:column,i am expecting my header(h1) will be shown as a display: block. I am not sure why it floats on top of the pin-container#container. The methods, i have used its actually looping through the toarray.panel(:not:first) but somehow, because my .panel is stacked together because of position absolute, the scrollTrigger of opacity:0-1 somehow triggers when its in contact of the #Container. If anyone reads this, please help me. THANKIUUU!!! Really thank you for your precious times!!

I've run into an issue where ScrollTrigger freezes at a frame. If I keep resizing it back and forth it seems to come back to life. I don't seem to be getting any errors logged or anything. Below is the gsap snippet of the code running this part of the code. If anyone has any ideas!

Hi GSAP community, Can anyone help me with the following issue? I'm using ScrollTrigger to horizontally scroll/pin a few slides. The number of pixels to scroll (x) is a dynamic value: the overflow of the row with slides compared to it's parent. This works perfectly on the initial load of the page. But if you resize the viewport to a point where the parent narrows the pin end point gets off. I made a minimal demo to reproduce the issue. Resize the window to a point where the parent/container (blue border) narrows. You'll see that the last slide (the end of the scrub) won't line up with the parent container (blue border) anymore. I assume my function to calculate the overflow is wrong. Any help is greatly appreciated!

Hi everyone ! I'm new to GSAP and I'm currently working on an animation for my website. I have a website with multiple section but in one of them I want to pin the scroll to the section and make images falling from the top and unpin until all images has been displayed. Here is a little schema to understand the idea, I tried a lot of things using ScrollTrigger but even using the pin parameter I can't get this type of effect.

gsap.min.js:10 Uncaught TypeError: Failed to execute 'scrollTo' on 'Element': The provided value is not of type 'ScrollToOptions'. at PropTween._setterFunc [as set] (gsap.min.js:10:43103) at PropTween._renderComplexString [as r] (gsap.min.js:10:43596) at PropTween.render [as r] (gsap.min.js:10:70502) at Tween.render (gsap.min.js:10:38427) at ma (gsap.min.js:10:1833) at _initTween (gsap.min.js:10:34477) at Ma (gsap.min.js:10:4555) at Tween.render (gsap.min.js:10:38041) at Timeline.render (gsap.min.js:10:26036) at Tween.render (gsap.min.js:10:38451) this error appears if I just reload the page when the viewport is in a certain place after that the parallax animation breaks when scrolling becomes fixed

Hi there! How can I show Node element one after one on scrollTrigger?! What it behaves now: All text nodes are going to center and once they reach center of window, all of them are vanishing at the same time (autoAlpha: 0) What I expect: Each node element goes to the center one after one. Basically, when the first element starts to vanish, the second one start to move to the center. And this chain loops until last one vanishes. Here is a minimal demo: https://stackblitz.com/edit/nuxt-starter-vulayy?file=components%2FTruckSimulator.vue,app.vue P.s.: I kinda feel this can be done by "position". But I am not sure how to do that

Hi There, I have been using GSAP for a while and am comfortable with a lot of the basics but am trying to recreate the scrolling and click interaction effects seen on this page: https://halfof8.com/about You can see that each 'section' is vertically scrollable and then when user gets to bottom of that 'section' the whole section horizontally scrolls over and the next vertical scrollable 'section' starts. This is the biggest issue for me as you can see in the example I provided. I have the vertical scrolling working but you'll see the next 'section' in is not where it is in the example. The example sort of mimics a standard slider/carousel where the next item is queued up to go whereas with scrollTrigger I am stuck with the next section being adjacent to the bottom of the current vertically scrollable section. The other issue I am having is I cannot get scrollTo to scroll to the top of next section, it either scrolls to bottom of current vertical section or over to the correct next section but too far down. Any help would be appreciated, I'm trying to be as clear as possible. My skills may not be quite there or maybe this is something better left for an application outside of GSAP. Thanks for you time.

I am struggling to play video by scrolling the page. I have two main issues: 1. How can I properly cleanup animation?! (I need to scroll to top back when i refresh the page) 2. How can I start playing video when it reaches to the top of window while keeping current position until video finishes. Once it's done, I continue to scroll to bottom. Here is my minimal video. https://stackblitz.com/edit/nuxt-starter-sv6wqk?file=app.vue thanks for the help in advance)

Using killAll is still being called. Since now my page is loading repeatedly it crashes so I'm looking for the cause https://github.com/hengshanMWC/gsap-ScrollTrigger gsap@3.12.5

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 !