Search the Community
Showing results for tags 'scrolltriger'.
-
hello everyone, i am having trouble with scrolltrigger pin method. i seem to cannot solved is at all , cannot figure out if its reacts problem or gsap need help pleaseeeeeeeee https://codesandbox.io/s/zen-fast-ogesxo?file=/src/App.js
-
Hi community, I have been facing an issue with scrolltrigger animation when preventing the address bar from hiding in mobile. I have replicated my HTML structure in the below codepen demo. I just wanted to keep the address bar visible always and able to trigger the animations on scroll. After setting the overflow and position properties, the address bar is fixed now. But the scrolltrigger animations are not working as expected. The animations are getting triggered only using scroll wheel and not by touch swipe. -
Hello, I am having some issues with pinning a section (making it fixed) while having a stacking card effect inside the pinned section. The pinned section has an image on the left and the stacking cards on the right. I want that whole section to be fixed as it scrolls to that section. The image on the left should still be show while there is a stacking card effect on the right. However, when the parent container is pinned, the stacking card effect isn't working. When I remove the pinning codes (for the parent container), the stacking card effect is working fine. What is the issue? How can I pin a section while having the stacking card effect inside that pinned section? I am using these urls for the stacking cards effect: https://greensock.com/forums/topic/33597-stacking-cards-overlap/ https://codepen.io/Mohsen-Khakbiz/pen/WNzBrdz https://codepen.io/GreenSock/pen/MWmVwpX Thank you!
-
We have few sections with a data attribute (data-name) on each. We want to update the body classname when it enters the section. The data-name is the classname that we want to add to body. Below is my code, but it's not working: const updateBodyClassName = (name) => { //code to add/update classname to body/html class via data attribute (data-name) from section } const sections = gsap.utils.toArray('.section'); sections.forEach(section => { ScrollTrigger.create({ trigger: section, start: 'top center', end: 'somehow get the height of each section(??)', onEnter: () => updateBodyClassName(section.dataset.name), markers: true }) }); HTML: <div class="section" data-name="class1"> <h1>One</h1> </div> <div class="section" data-name="class2"> <h1>Two</h1> </div> <div class="section" data-name="class3"> <h1>Three</h1> </div> #1) I am trying to get the height of the sections since the height varies. This is for the 'end' parameter in the ScrollTrigger. #2) Not sure is there a way to update the body/html classname when we enter a section. I know there is a toggleClass, but this isn't what we need, since the class names are all different for each section. In the code, I have 'onEnter', so when it enters a section it will trigger the updateBodyClassName() function. In this function, it should go update the body/html class name: const updateBodyClassName = (name) => { //code to add/update classname to body/html class via data attribute (data-name) from section } For example, when we scroll to or enter section 1, the section 'data-name' value should get added to the body/html class, like below: <html class="no-js class1"> When it enter section 2, the section 2 'data-name' value should replace 'class1' from the html class (not appending class name), like below: <html class="no-js class2"> Is there a way to add a class name to body/html when it enters a section, then somehow replace the newly added class name when it enter another section? Thank you! -
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
-
Hello Guys, it's my first Forum Article. I'm using GSAP for nearly a year now. I'm using GSAP + GsapSmoothScroll + ScrollTrigger and Barba.js I have some slightly complex Animations on my Site and its extremely laggy on iPhone Safari I tried a lot of Solutions that I found hear, but nothing really works. Does someone have some Ideas how to fix. Here is a Link to the Website: This is my config for the ScrollSmoother. The Lag is specially on the page uid42 thats the link i put in hear. The other pages are ok not perfekt but ok: I hope its enough information. scroll = ScrollSmoother.create({ smooth: 0.2, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements ignoreMobileResize: isMobile() && !document.querySelector("#uid1") ? true : false, normalizeScroll: isMobile() && !document.querySelector("body:not(#uid42)") ? true : false, }) On a Mission (hantha.net) Hope someone could help me. -
I cannot flip the car image and it always appears backwards. What am i doing wrong? And i want to show the text when the car is near red points, and hide it after, but i cannot figure it out. Any help would be appreciated)
-
Hi, i'm trying to replicate this animation , but i don't really understand what's wrong with the animation. https://codepen.io/pixit_design/pen/ExKWVdq -> found on another topic. My structure is different. When i don't set horizontal: true, the image property change, but when i want to do it with horizontal trigger, the property doesn't change anymore. I'm sorry if this question has already been asked. i hope you will be able to help me
-
Hello, the first time I tried ScrollTrigger.matchmedia and it was not working properly. In the example, the link you can see 4 cards on the desktop when the user scrolls all cards move on the x-axis, and it works well on the desktop. But on mobile when we scroll card does not move properly I mean the last card does not show clearly. Actually, I have already solved this problem by just adding some numbers on scrollTrigger end value. But I want to know any other possible way to fix it, because how I can know how many numbers need to add when the card number increases like 8, or 10? The Example Link: https://stackblitz.com/edit/nextjs-uc7lzw?file=templates%2FCenterSection%2FCenterSection.tsx,styles%2Fglobals.css,pages%2F_app.tsx
-
Hey guys, I really could use your help with the ScrollTrigger plugin. I'm trying to create an animation, where the text is appearing from the middle of the screen, and when its opacity is 1 (from 0) and scale is also 1 (from 10), I want this text to create a single row in the top left corner. I have probably used not the most appropriate tools to achieve my goal. And because this is my first animation of such kind, I would like to get some advices about how can I improve it from more experienced members of the community.
-
This is my code https://github.com/akrdesign/gsap-pin-problem.git . I'm using Next.js and TypeScript. I have made three sections, one at the top, one in the center, and one at the bottom. I am trying to pin the center section and it's pinning too. You will see some navigation in the header, as soon as I switch from the home page to the About page, I get to see an error which is [NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.]. When I remove the pin from the scrollTrigger timeline then it runs perfectly. The section in which the problem is occurring will be found in the code on the home page inside the templates folder. I was trying to show the example on codesandbox but it could not be setup. That's why I have given the link of GitHub. Forgive me for this.🙏Also i provide code file gsap-pin-problem.zip
-
You need to make an animation on the site so that when you scroll the page, the picture moves around the site, moving from side to side. Site structure: on the right the picture on the left is tex, the next block on the right is the text on the left picture, so the blocks alternate. You need to make an animation on the site so that when you scroll the page, the picture moves around the site, moving from side to side. Site structure: on the right the picture on the left is tex, the next block on the right is the text on the left picture, so the blocks alternate. enter the description of the image here so that when the user scrolls through the site, the image follows him and smoothly shifts under the text block, as if highlighting the text.
-
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.
-
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.
