Search the Community

Hi All Please take a look at animation in full view mode https://codepen.io/av-fwstudio/full/BaOrYOm Couldn't figure out how we can pin the rim so it will go till the end of the yellow container?

Hi everyone ! I am planning to create this sort of website (refer to the video linked below) where as you can see the mockup of a phone, so in that phone, a lottie animation should run when the user scrolls down and in the right, you can see the heading and some description, while scrolling down, the phone's mockup is stuck through out and doesn't get scrolled down, only the animation inside it runs while the right side of the page (heading and text and all) gets scrolled down. (The phone part is what I have been able to pull off so far, but I am stuck with the part on the right) Please let me know how can I achieve this ? Thank you a lot in advance. @GSAP Helper @OSUblake (sorry for the audio in the video, kindly ignore)

Hello, I'm currently working on a project where I would need to pin a container and keep the scroll going in the right column. However I'm running into an issue where the ScrollTrigger markers seems to be offset with the panels. I can't get the left content ends when it reaches the next trigger. Here is a simplified version: https://codesandbox.io/s/romantic-fast-xwfefy I notice that the speed of the right columns seems to be "parrallaxed" to the markers. What I am trying to do: Coordinate the appearing of the pinned left content while scrolling the right content. Thank you

Hi guys! I come humbly in front of you with few drops of hope left, after 5 full days of switching between possible solutions to get a consistent ScrollTrigger behavior on a Gatsby site. Getting directly to you is my last resort, as every google and gsap forum link regarding ScrollTrigger and Gatsby is already visited. 😒 I cannot get a CodePen reproducing the exact issue so I'll try my best to describe it here. Shortly, the problem seems to be, as I suspect, that the ScrollTrigger does not refresh itself when Javascript pops into the browser on top of the SSR-ed html/css bundle. Here's what i did. I created several projects with different versions for dependencies, but i will stick to the simplest one with all dependencies up to date.It's a gatsby with material-ui plugin added, who's exact structure can be found here: https://github.com/mui-org/material-ui/tree/master/examples/gatsby There are no other plugins added, nor any other configs/plugins changed. I rendered the component that will contain the ScrollTrigger (AboutBlock) in the AboutPage page: about.js const AboutPage = () => { return ( <AboutBlock /> ) } export default AboutPage This is the component where i try to animate some elements on reveal when scrolled into view: aboutBlock.js import gsap from "gsap"; import ScrollTrigger from 'gsap/ScrollTrigger'; import animateReveal from "./gs_reveal"; export default function AboutBlock() { gsap.registerPlugin(ScrollTrigger) const revealRefs = useRef([]) revealRefs.current = [] useLayoutEffect(() => { let scrollTriggers = [] scrollTriggers = animateReveal(revealRefs.current) return () => { scrollTriggers.forEach(t => t.kill(true)) } }, []); const addToRevealRefs = el => { if (el && !revealRefs.current.includes(el)) { revealRefs.current.push(el); } }; return ( <Grid container> <Grid item width={{ xs: '100%', sm: '80%', md: '35%' }} pl={{ xs: 0, md: '2.5%' }} mt={{ xs: 60, sm: 0 }}> <Grid container direction="column" alignItems={{ xs: "flex-start", sm: "flex-end" }}> <Grid item mt={{ xs: 0, md: '10vh' }} id="acum"> <Typography variant="h5" textAlign={{ xs: "left", sm: "right" }} ref={addToRevealRefs} className='gs_reveal_fromRight'> NOW WE ARE IN </Typography> </Grid> <Grid item> <Typography variant="h6" textAlign={{ xs: "left", sm: "right" }} ref={addToRevealRefs} className='gs_reveal_fromRight'> LOCATION </Typography> </Grid> <Grid item mt="10vh" id="hi"> <Typography variant="h5" textAlign={{ xs: "left", sm: "right" }} ref={addToRevealRefs} className='gs_reveal_fromRight'> SAY HI </Typography> </Grid> <Grid item className='toughts'> <Typography variant="h6" textAlign={{ xs: "left", sm: "right" }} ref={addToRevealRefs} className='gs_reveal_fromRight'> TELL US YOUR THOUGHTS </Typography> </Grid> </Grid> </Grid> </Grid> } HTML is longer and crowded, I left a part to get the idea of the structure and styling approach (MUI's sx - emotion). And finally, this is the animateReveal function: gs_reveal.js import ScrollTrigger from 'gsap/ScrollTrigger'; import gsap from 'gsap'; export default function animateReveal(elements) { const triggers = [] elements.forEach(function (elem) { hide(elem) let tr = ScrollTrigger.create({ trigger: elem, id: elem.id, end: 'bottom top', markers: true, onEnter: function () { animateFrom(elem) }, onEnterBack: function () { animateFrom(elem, -1) }, onLeave: function () { hide(elem) } }); triggers.push(tr) }); return triggers; } function animateFrom(elem, direction) { direction = direction || 1; let x = 0, y = direction * 100; if (elem.classList.contains("gs_reveal_fromLeft")) { x = -100; y = 0; } else if (elem.classList.contains("gs_reveal_fromRight")) { x = 100; y = 0; } else if (elem.classList.contains("gs_reveal_fromBelow")) { y = -100 } elem.style.transform = "translate(" + x + "px, " + y + "px)"; elem.style.opacity = "0"; gsap.fromTo(elem, { x: x, y: y, autoAlpha: 0 }, { duration: 1.25, x: 0, y: 0, autoAlpha: 1, ease: "expo", overwrite: "auto", delay: elem.classList.contains("gs_delay") ? 0.3 : 0, }); } function hide(elem) { gsap.set(elem, { autoAlpha: 0 }); } The ScrollTrigger markers are misplaced when page loads, and might move (get more misplaced) on hard reloading page, depending on the current scroll position in the moment of reloading, even though the scroll position is not preserved on reload (always is scrolled on top). - The markers are placed on the correct position on resizing, as expected. I followed gsap official docs on react and react-advanced and tried: grabbing the html elements to animate on scroll inside animateReveal() by let elements = gsap.utils.toArray(".gs_reveal"); Assigning to each element a useRef() and use the .current value for each in animateReveal() grabbing html elements using gsap's selector utility gsap.utils.selector changing to simpler animation on scroll, like just a fade refreshing ScrollTrigger in different moments useLayoutEffect(() => { ScrollTrigger.refresh(true) // or ScrollTrigger.refresh() ... }, []); 6. Lifting ScrollTrigger logic to parent about.js page 7. Assigning scrollTrigger to a timeline triggered by the to-be-reveal element 8. Use useEffect() instead of useLayoutEffect() (recommended anyway for ScrollTrigger) 7. Other who-knows-what unsuccessful twists. I suspected a rehydration error, when the static generated code does not match the client side one. But the only JS that could cause a mismatch is the gsap related one, and it does not seem an SSR issue. I checked if the CSS and HTML elements are being properly SSR-ed, by preventing JS from running in the browser. All looking fine. This is both a SSR issue (gatsby build) and a development issue (no SSR). As i said on point 5, setting a ScrollTrigger.refresh() when component is mounted does not work, but delaying this with a 1-2 seconds in a setTimeout successfully solves the issue useLayoutEffect(() => { setTimeout(() => { ScrollTrigger.refresh(true) }, 2000); }, []); This is hard to be accepted as a solution, since i cannot rely on a fixed value to 'guess' when DOM is properly rendered in the eyes of the ScrollTrigger, not to mention the glitches that might occur. So, the question is 'WHY?', why animating with ScrollTrigger from within useLayoutEffect, which is not triggered on the server anyway and should mark the 'component is successfully mounted' moment, seems to not wait for the DOM being completely painted, even though nothing is generated dynamically! There are quite of threads on this forum regarding gatsby, and none seemed to have a clear cause-outcome-solution. Is this battle lost, should i move on? Do you have any suggestions? Thanks so much for your time reading this, it means so much to me!

Hey everyone! I would like to prevent the Scrolltrigger from playing each the time the window is resized; basically, I just want each heading to be played once and never again (except or a full page refresh). I'm aware that a normal tween might've been a better solution for what I'm trying to achieve, but I'm rolling with it for now. Rory

I have a SPA react app in where i have several horizontal scroll triggers which are pinned to certain sections as wrapper. The problem is when i want to scrollY on the vertical to an element that is positioned after the last scrolltriggered section. The problem is the pin mode. What i do is disable and enable all scrolltriggers during scrollIntoView action. The problem on scroll complete (i tried the scroll with gsap.to and window.scrollTo and element.scrollIntoView), when i enable all the scrolltriggers again, the last scrolltrigger recognized the scrollbar having been moved beyond its start/end points and moves to the last position on the horizontal scroll . I think it has to do with the toggleActions: "play pause none reset". I would need to scrolltrigger somehow to tell to not do anything after .enable(false, false) call but it does because of the pin mode. I want to reset only if i move up over then end point again. So maybe disable or override the toggleActions or i have to manually enable/disable and remember the scroll position ... not sure what is the best way. I dont have a code pen as it is complex Any idea

I just started learning react.js with gsap and stuck at this point useEffect(() => { const cx = gsap.context(() => { const tl = gsap.timeline({ scrollTrigger: { trigger: '.home', start: 'top top', end: "+=" + window.innerHeight * 3, pin: true, scrub: 1 } }) }, main_ref) return ()=>{ cx.revert() } }) my question is that, How can I declare this timeline globally because I want to use this timeline in multiple components or there is any other way to perform the same thing. And yeah, this timeline is declared in the App.jsx file which is the main file of my project. Thanks in advance.

Hello everyone, i try to make this example https://codepen.io/oldskool123/pen/mdrrbyo in react js, but i don't understand why what I did does not work, I am applying what I saw in the documentation but it has not worked, I want to learn how to use this great tool but I have not been able to apply a more complex example in react js. I need some guidance, thanks. :') Here the code sanbox https://codesandbox.io/s/gsap-react-horizontal-scroll-mr4gb1?file=/src/App.js

Hi team greensock, First off, thank you for building such an amazing animation library! Having only discoved greensock recently I can honestly say I haven't had this much fun making things for the web since the days of yore when flash ruled supreme. I think I might have come across a weird edge case in which nested scrollTrigger animations don't seem to be initializing properly, please see the codepen. It's a relatively straightforward setup with a pinned container. Inside the container is a horizontally moving list in which each of the items has it's own animation. The items are positioned to look more or less random, and the scrubbed item animation moves them back to their initial state. Before the container animation hits the start point for the first time, the nested items are positioned as if they themselves are off screen, rather than the position they should actually be in according to the scrubbed timeline. Once the start point of the container has been hit, they jump into place. From there on everything is fine. Perhaps I am doing something wrong myself, although there does also seem to be a difference between different gsap versions. If you change the version in the codepen to 3.11.1 or lower, the items are positioned correctly the first time. Gsap 3.11.2 or higher, and they're not. Any ideas what might be going on? And what could be done to fix the initial position? Thanks! Bart

Hello all. Total beginner GreenSock user here, please bear with me. I've set up a demo to switch out images on the left while the user scrolls text on the right. It's heavily based on the official "Pinned content based on section - ScrollTrigger" demo. It works ok but I'm looking for advice on how to tweak the functionality slightly. Below is my wish list, but if anyone who cares to help could also explain what I'm missing or doing wrong as well it would be greatly appreciated, as I wish to learn more about GSAP and use it in different applications. The first image needs to be immediately visible i.e. on page load, as soon as the user starts to scroll past the header. When scrolling through, Image Number Two needs to become visible when the horizontal line between Text Number One and Text Number Two is vertically aligned with the Image Number One placeholder text. Currently, Image Number Five is never displayed. Per the above, it should come into view when the top of Text Number Five is vertically centred with Image Number Four. When scrolling ends, the bottom border of Text Number Five should be vertically aligned with the bottom of Image Number Five. In my current demo, scrolling ends when the text pane is only half way up the image pane. I feel like this is related to problem #2 above, but not sure how to tweak it. Thanks in advance for any help or suggestions. Cheers

hello there, im trying to create section with cards to scroll horizontal in (React), the animation works fine but when i add scroll trigger to start animation when the section in viewport, something is wrong. here is a demo on codesandbox https://codesandbox.io/s/intelligent-rain-866rkd?file=/src/Services.js

Hey everyone, So as you'll see I have a sidebar menu that when you click on the anchors it scrolls to the section. However the entire menu moves when you click on the anchor. I'm imagining this might be caused by the fact the navigation bar is inside the scrollAreaWrapper and scrollContent div. So either there is something I'm missing or I need to move the navigation somewhere else. Any guidance or help would be appreciated. Thank you, Dilion Smith

Hi Guys I make a code for horizontal scroll and its work perfectly in desktop devices but in the mobile device when I scrolling with touch it's create some leg. Here Is The Problem: 2023-02-10-00-26-59_KaHU5Lcj (1).mkv Here Is My Code: useEffect(() =>{ const panel = document.querySelectorAll(".panel"); const panels = document.querySelectorAll(".panel").length; const containers = document.querySelector(".containers"); const pin = document.querySelector(".container"); const ctx = gsap.to(panel, { xPercent: -100 * (panels - 1), ease: "none", scrollTrigger: { start:"center center", trigger: containers, pin:pin, scrub: 3, end: () => "+=" + containers.offsetWidth }, }); setTimeout(() => { ScrollTrigger.refresh() if (ctx && ctx.scrollTrigger && ctx.scrollTrigger.scroll() > ctx.scrollTrigger.start) { ctx.scrollTrigger.scroll(ctx.scrollTrigger.start); } }, 200); return () => { ctx.revert() } },[activeTab,]) Please Make me solution of this. Thanks😊

I have sections and one of them has boxes. I would like to have the snap effect for each section and each box Is it possible to have the snap effect for nested elements? As far as I understand native CCS snap does not work with nested Elements.

Hi there, I'm trying to replicate this effect: https://codepen.io/jayanthracharya/pen/OJxyPpa but I can't figure-it out how to make this working with ScrollTrigger. Here my demo: https://codepen.io/maqquo91/pen/YzjqJZw Any Ideas why isn't working?

Hi folks, I'd like to control the scroll behavior by forcing it to scroll to the next section. I've tried to follow this example https://codepen.io/GreenSock/pen/NWxNEwY but my pen isn't working. It is stuck to the first section. Do you have any idea why that's happening? Here is my demo: https://codepen.io/maqquo91/pen/LYBNovZ Thanks in advance

Hi, I wanted to create a vertical/horizontal scroll but I've meet a problem where when using react 18, project just dont work. Could someone help me fix this issue so I can use react 18? https://codesandbox.io/s/test-forked-i9ng90?file=/src/App.js

Hi! I was trying to achieve a similar effect to this codepen (found it in the gsap showcase) , but without all the complications of the loop. Most precisely, I was trying to achieve that instant snap effect, but without restarting when the array ends. Something exactly like this. I spent several hours yesterday without catching it, I would really apprec.iate any start point to work arround. Thanks in advance

Hello, I want the footer part to come from the bottom like a parallax. I did it partially, but there is a space at the bottom. Can you help with this?

Hello, the problem I'm facing is that when I scroll pin, the top part gets darker and smaller slowly. I made it smaller, but I couldn't center the beginning in the darkening part, you will see other markers. When I do " start: "center center , end: center center"," the markers do not appear. When the site is first opened, it is not actually white, but actually a very slightly dark color. This should not happen with white > and then > dark tone with scroll... I would appreciate it if you could help. I am sharing the test link I made in this project. https://clever-seahorse-227af4.netlify.app/

Hello, first time asking here, hope I'll do it well ^^ On my pen, I successfully got a sliptText animation starting when mouseenter the black box. But at first, I was expecting the sliptText animation starting when #creation enters in viewport (using ScrollTrigger) which isn't the case here. Any ideas ?

I want to change my horizontal scroll element click on tabs . I try it in my main project but I can't do this. Codesandbox Link : https://codesandbox.io/s/horizontal-tab-content-xfwmwn I just simply make this template for fix this. so, please help me to complete this. Please Thanks..

Hi, when I add multiple videos, the video scrolltrigger is also giving problems. Can you help me?

Hello, I want to play and pause video with horizontal scrolltrigger. I did the playback but couldn't find a solution to stop it. Can you help me?

please help me. i must make animation like this https://drive.google.com/file/d/1D_XU-TUWO5_emH4sR_UaAhZz_ZxnP-85/view?usp=sharing