Georges-jean

Ok, thank you for the explanations. It's true that when I'm deep in coding, I sometimes don't realize how my code gradually becomes convoluted. However, there's still something I don't understand about the fork you shared. If I understand correctly, this code creates a vertical parallax animation for each element with the .planet class. When these elements enter the visible area of the window, their children with the .wrapper class will move vertically by -1000 pixels. What I don't understand is why, under the first animation (so when the first '.planet' is off-screen), the other animations stop. It seems that there is animation only when the first planet is visible. Nonetheless, I'll work on strengthening my CSS and adding clarity to my code. In any case, I appreciate your comment and the effort, thank you!

Ok, no worries, I realize I wasn't very clear about the problem I'm facing. And often, the best way to explain a problem is through images! The issue I'm encountering is shown in Images 1 and 2. When I resize the window (orange arrow), the ScrollTrigger is triggered and it anomalously moves the elements upwards (blue arrow), even though I haven't scrolled yet (notice the scrollbar on the right is still at the top). As a result, the element loses its positioning on the page, which should only be altered by the animations I've set. What I'm aiming for is this: when I change the size of the window, I want the elements to maintain their relative positioning on the page through their positioning in VW (viewport width). I was able to achieve this behavior in Method 1 (which I've commented out in the demo). In Images 3 and 4, when I reduce the window size, the element 'bigPlanet' remains in its initial position, relative to the size of the page. I hope I've made myself clearer this time. I've added refreshInit to the ScrollTrigger parameters, but I had already tried that without success. Thank you, anyway, for the effort and help provided! It's probably something obvious, and I'm trying to keep my code as simple as possible to achieve what I want to do. I didn't expect that implementing these combined animations would make things so challenging. Image 1 Image 2 Image 3 Image 4

@Toso Perhaps I should have provided more context. The minimal demo I shared actually represents the most simplified version of what I am trying to achieve. In essence, I want to apply three independent animations to numerous objects on my page: a mouse-move effect, a vertical scrolling parallax effect, and rotation. In this minimal demo, I am attempting to apply these three animations to several objects listed in elementsData. To achieve this, I loop through elementsData to create a timeline for each element. @GreenSock I have considered the suggestion to add a wrapping <div> around each element I want to animate. Note that I had already wrapped the initial element to separate vertical parallax and mouse-move animations, thus avoiding conflicts with the y property, which I target using elClassName.parentNode in the tween. So, if I understand correctly, for each element, I now have a <div> for the timeline, encompassing another <div> for vertical parallax, which itself encloses the element along with the mouse-move and rotation animations. The structure is essentially: bigPlanetTimeline>bigPlanetWrapper>bigPlanet. However, I am still facing the issue of repositioning during window resizing. Here again is the minimal demo for reference.

Title: Seeking Help with Vertical Parallax Animations Using GSAP and ScrollTrigger Hello GSAP Community, I'm working on a project involving vertical parallax animations with GSAP and ScrollTrigger, and I'm encountering some challenges in achieving the exact behavior I need. I have implemented two different methods, but each has its own set of issues. Method 1: I'm using a GSAP timeline with a ScrollTrigger linked to a specific section (.starrySkySection). This method works well for triggering animations as the section comes into view, and it doesn't present any issues when resizing the window. However, the problem is that animations start even when individual elements are off-screen, which isn't the desired behavior. Here's a snippet of my code for this method: const parallaxTimeline = gsap.timeline({ scrollTrigger: { trigger: '.starrySkySection', start: 'top top', end: '+=1000', scrub: true, markers: true, }, }); Method 2: In this approach, I created a specific GSAP timeline for each element with an individual ScrollTrigger. This resolves the issue of triggering animations only when the specific elements come into view, which is great. However, I'm facing a problem when resizing the page: the page size changes, and the vertical parallax animations trigger prematurely. Here's how I've set it up: elementsData.forEach((element) => { const elClassName = document.querySelector(`.${element.className}`); const parallaxTimeline = gsap.timeline({ scrollTrigger: { trigger: elClassName, start: 'top bottom', end: '+=1000', scrub: true, markers: true, }, }); I have a strong preference for Method 2, as it aligns more closely with the desired behavior of the animations. However, despite testing various configurations, I've been unable to resolve the resizing issue with this method. To aid in understanding and troubleshooting, I've prepared a minimal demo that includes both methods, with one commented out. I would greatly appreciate any insights or solutions that might help address the resizing issue in Method 2. I'm seeking advice on how to effectively manage window resizing while ensuring that animations trigger only when specific elements come into view. Any help would be greatly appreciated! Thank you in advance!

Hey, I was able to reproduce one of the bugs that has been bothering me in the minimal-demo... While trying to explain my issue here, it served me as rubberducking, and I found the issue. It was related to the size of my background, which is very long, causing the animation to glitch. When I mocked this background in the minimal-demo, I realized that its CSS was set to 'display: block,' which was causing the ScrollTrigger to malfunction. It makes sense to me now; it took some time, but I learned a lot along the way! Thank you for your assistance; I'll mark this as resolved. Best regards!

I'm going to continue investigating my issue as advised in the last message, but I'd like to report a strange behavior I've observed. 'm using roughly the same code as in this minimal demo, and I don't have any external code that seems to interact with these elements. Apart from this component, I've only developed my navbar. espite this, I can't replicate the animations from the minimal demo except when I save my code in my IDE (thus recompiling) but don't refresh the page. As soon as I refresh the page, my animation stops working... Do you have any suggestions for troubleshooting based on this observation? I'm using the same code as the minimal-demo, so yes, I am using the useGSAP() hook. Regarding versions, here are my dependencies, which I think are up to date: "dependencies": { "@gsap/react": "^1.0.0", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "gsap": "^3.12.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" },

Ok, it's even more frustrating when the code and animation I want works in the mini-demo you sent me : https://stackblitz.com/edit/react-an2k6t?file=src%2FApp.js But it doesn't work in my project... I've used the code to the letter and I get this behaviour: when I start the scroll, the position of my object is teleported to the bottom of my component. I tried using a simple css object or playing with the scrollspeed, but nothing. Here's the code I used, practically the same as in the minimal demo, I just added an onUpdate to follow the 'y' but it didn't tell me much: // Configuration de la parallaxe verticale avec ScrollTrigger et une timeline const parallaxTimeline = gsap.timeline({ scrollTrigger: { trigger: ".starrySkySection", start: "top top", end: "=+1000", scrub: true, onUpdate: (self) => { elementsData.forEach((element) => { if (element.scrollSpeed) { const yPos = self.progress * (window.innerHeight * element.scrollSpeed); console.log(`Y position for ${element.className}: ${yPos}`); parallaxYPositions.current[element.className] = yPos; } }); }, }, }); elementsData.forEach((element) => { if (element.scrollSpeed) { parallaxYPositions.current[element.className] = 0; parallaxTimeline.to( document.querySelector(`.${element.className}`).parentNode, { y: `+=${window.innerHeight * element.scrollSpeed}`, ease: "none", }, 0 ); } });

Sounds great! But I haven't found a way to install @gsap/react useGSAP() hook on my project, where can I find it?

I haven't responded to this thread in a few days as I've been spending a lot of time trying to incorporate the GSAP context into my animations as suggested in the last message. The issue I encountered was my desire to maintain my architecture, wherein I wanted to place my animations in a separate file. Unfortunately, I faced numerous blockers due to the context not being available when passed to the separate file. In the end, I abandoned the separate animation architecture and placed them directly in the main file. However, this did not solve my positioning issues related to the combined effects of vertical parallax through scrolling and resizing. Thus, I had to rethink my approach. To address the repositioning issue, I employed a simple method - new to me - which is the timeline. I had to revise some of my code, but now I no longer face repositioning issues due to resizing. However, I have encountered another problem for which I am seeking help. Currently, my file contains three combined animations: rotation, a parallax effect through mouse movement, and a parallax effect through scrolling. The problem is a conflict between the modification of 'y' through scrolling and the mousemove, which blocks the 'y' position update during scrolling. This update only occurs when I activate mousemove. I've tried saving the 'y' position of the element, but the results are not convincing. This is currently the closest result to what I aim for, but perhaps there is an issue with my approach. I have experimented with using timelines, but maybe it's not necessary after all. Here is the demo.

Hi there, thanks for the tips! I've removed the vwToPx mechanism and the page resizing related methods from my code, but I'm still facing the positioning issue upon resizing the page. I've also implemented context.revert(); along with my existing animation cleanup routines. I believe they don't conflict with each other. I've noticed that setting the scrollSpeed value to 0 (which is used to enhance the scrolling speed of the element) corrects the positioning, but then, of course, I lose the parallax scrolling effect. Additionally, I'm using lastScrollYPositions within my animations to store and track the last vertical position, ensuring that mouse movement and scrolling animations work well together. Regarding gsap.matchMedia(), I haven't used it as it didn't seem necessary given that I'm using units like vw to keep the site responsive regardless of the page size. I've created a minimal demo on StackBlitz to illustrate the issue. If necessary, I can also share the complete project via Git. I've just pushed the latest changes, though I assume it's preferable to stick with minimal demos. Looking forward to any insights or suggestions you might have!

Okay, I will start by making the changes with these remarks and if I still have problems, I will do the minimal demo. Thank you!

First of all, a big thank you for taking the time to read this post. It's always comforting to see active, helpful communities, so first and foremost, thank you. Next, I'll try to express my concern and hope that your experience will reveal something obvious that I've missed, as I'm not at all a GSAP expert (and not really a dev expert either, originally, I'm a Scrum Master...). I'm working on a React site integrating GSAP animations and I'm facing a specific problem related to the management of responsive animations. The site works well, but I have issues when it comes to resizing the browser window. I have a main component named StarrySky which displays various graphic elements (planets, etc.) and I want to apply different animations to certain elements: a vertical parallax effect via scrolling, simple rotation, and effects related to mouse movement. The positions of these elements are defined in vw to ensure a responsive design. I also have an external component, parallaxAnimation, to manage these animations, so I can reuse them wherever I want. Problem: The animations work well at page load, but the positioning does not. Moreover, when I resize the window, the elements do not reposition correctly to the location normally generated by the CSS. To solve the problem of repositioning elements during resizing, I created a method in StarrySky that transforms vw coordinates into px. I thought this would allow the animations to work correctly while maintaining the responsive quality of the vw. However, this did not solve the problem as I had hoped. Here is an excerpt of my code to better illustrate my approach: // Transformation from vw to pixels const vwToPixels = (value) => { return value * (document.documentElement.clientWidth / 100); }; // Updating the element's position from CSS const updateElementPositionFromCss = (selector) => { const element = document.querySelector(selector); if (element) { const topPx = vwToPixels(parseFloat(window.getComputedStyle(element).top)); const leftPx = vwToPixels(parseFloat(window.getComputedStyle(element).left)); gsap.set(element, { x: leftPx, y: topPx }); } }; // Resizing function to update positions const handleResize = () => { elementsData.forEach((element) => { updateElementPositionFromCss(`.${element.className}`); }); ScrollTrigger.refresh(); }; window.addEventListener("resize", handleResize); In addition to the animations, I have also set up specific management for window resizing to ensure that the GSAP animations adapt correctly to the new dimensions. The updateElementPositionFromCss function recalculates the positions of the elements based on their initial CSS styles, converting vw units into pixels. This is supposed to ensure that the animations remain aligned with the new layout of the page after resizing. However, I encounter problems where the elements do not reposition correctly after resizing, and the vertical parallax effect related to scrolling stops working. I am looking for advice or suggestions to solve this problem. How can I maintain the reactivity of the elements while ensuring that the GSAP animations behave correctly during window resizing? If more details or code snippets are needed to better understand the issue, I am more than willing to provide them. Thank you again for your time and assistance!