Jump to content
Search Community

Search the Community

Showing results for tags 'scrolltrigger'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 971 results

  1. I want to create an animations where a lot of elements across the page all start to move towards the center, where a small circle starts to scale and transform into a phone, taking all these elements in. Using Nuxt Here is the sample code // Animation for scaterd object //The Animation works but it is triggered as soon as the component mounts userContext = $gsap.context((self) => { const user = self.selector('.user_01'); $gsap.fromTo(user, // { x: -350, y: -350 }, { x: 0, y: -100, scrollTrigger: { trigger: user, scrub: true, }, }); // }); }, users.value); //Animation for center element mainContext = $gsap.context((self) => { const boxes = self.selector('.box'); boxes.forEach((box) => { $gsap.fromTo(box, {}, { scale: 1, scrollTrigger: { trigger: box, scrub: true, }, }); }); }, main.value);
  2. Hi GSAP lovers, I've created this hero section that plays a video when you scroll down and reverses it when you scroll up. I achieved this using Elementors native video widget and without HTML, CSS only a few lines of JavaScript linked to GSAP ofc. Everything works as expected and looks really cool, but for some reason, the video lags a bit when scrolling. It’s not a lot, but it's noticeable. Does anyone have ideas on how to fix this? I’ve checked the code, and I don’t think it’s the issue. Could it be related to the number of frames in the video? If so, what would be the optimal frame rate? I’m currently using 30 fps. By the way, I made a detailed YouTube video showing how I did this, if you’re interested: https://www.youtube.com/watch?v=s7n9vRFvmM0&list=PLrBEiKv9M1MbqfCUginEzRdiA6bTfiC-K&index=1 Elementor GSAP scroll-community (1).mp4
  3. Hi, so I have created multiple backgrounds which I would like to squeeze and expand as shown in my codepen example. However, trigger position gets messed up everytime I resize the window, the <img> will be gone and the start position is shifted. 1) How do I keep everything as it is even on window resize? 2) And also because I will be making quite a few of these backgrounds and repeating the squeeze and expand for each of them as shown in my Codepen, I'm wondering if there is a more effective way to do it rather than having one timeline for each background? I've noticed some lag when I have too many timelines, especially with the start position adding +=180% for each timeline... (by the 20th background the start is at +=3420%... ) I'm new to all of this so I apologise if any of my questions seem obvious. Any help is appreciated, thanks in advance!
  4. Hi, I have a pinned section with 3 main children. I'm using ScrollTrigger on the pinned container and allowing it to scroll for 3000 pixels. I want to trigger an animation at 20%, 60%, and 80% of the pinned container scroll progress. These are all simple opacity/x/y changes. There is, however, a section that is in a grid and requires the use of Flip. I sadly do not have a reproduction demo but do have illustrations that illustrate what I mean: - White container is the pinned container - Blue gets hidden at 20% scroll progress - Orange moves up at 20% scroll progress (requires Flip) At 60% the Orange element moves up again, and the green section is revealed. 0%: 20%: 60%: I tried a lot of combinations but none worked except creating all the triggers separately and with absolute pixel values, but still failed to use Flip: // Blue element gsap.to(introContainerRef.current, { opacity: 0, y: -20, duration: 1, delay: 0, scrollTrigger: { trigger: introContainerRef.current, markers: true, start: 'top top', end: '+=100px top', toggleActions: 'restart resume reverse reverse', }, }) // Orange Flip.to(state, { opacity: 0, y: -20, duration: 1, delay: 0, scrollTrigger: { trigger: mediaRef.current, markers: true, start: 'top top', end: '+=100px top', toggleActions: 'restart resume reverse reverse', }, }) Any ideas? Thanks a lot in advance!
  5. Hello Everyone. I am new to GSAP and have been trying to work with scrollTrigger for a bit now and I am completely lost on this issue. I am using HTML, SCSS, and JS (As you can see from my codepen). What I am trying to do is fairly simple and I am surprised it is causing me this much pain but I simply want to pin the rebuilding_country once the top of the viewheight of the window hits the top of the .rebuilding_country div. I feel like my gsap scrollTrigger is correct and this may be purely a SCSS issue I am encountering as I am also new to that. However, when I comment out all of my scss it still has this same issue. It is especially bad on mobile. On desktop 1920 1080 it works pretty much as expected. So now that I have stated what I am trying to accomplish lets look at what's going wrong. For some reason as the screens get smaller the start of the pin trigger moves higher and higher even though when hovering over the divs with devtools the rebuilding_country div is still below all of the content that comes before it in the HTML structure. So why is the start marker near the top of the entire rebuilding section while my screen gets smaller is my issue and where I am lost. I hope this was clear and I want to reiterate I am using SCSS. Thanks in advance.
  6. Hello everyone, I need help with my WordPress site on Elementor, specifically with animation using GSAP. What I'm trying to achieve with GSAP in WordPress Elementor is this: Imagine there's a first section with a video background and text overlay. As I scroll down, another section appears while the first section remains fixed in the viewport. As I continue scrolling, the second section gradually reveals itself. The first section's video remains visible, while the second section's background fills the screen. In the middle of the second section, there's a logo that is masked/clipped, allowing you to see through to the video of the first section. please see the video example from apple website https://www.apple.com/sg/ipad-pro/ or can visit this link to see the exact video https://filebin.net/pw5ljr9fqsm1aupr
  7. A website I am working on here: https:clients.tbmedia.ca/nal - is working fine on desktop, but have had some issue on mobile. ScrollSmoother.create({ wrapper: "#page", content: "#content", smooth: 1, normalizeScroll: true, effects: true }); ^ This is the code for mobile I have an if statement that adds normalizeScroll because if I don't the ScrollTrigger horizontal animation seems to be very jittery on horizontal scroll. document.addEventListener("DOMContentLoaded", function () { if ($('section').hasClass("community-pin-scroll")) { const svgElement = document.querySelector(".community-svg"); svgElement.style.width = "100%"; // Ensure consistent width svgElement.style.height = "auto"; // Ensure consistent height const races = document.querySelector(".horizontal-scroll-container"); function getScrollAmount() { return -(races.scrollWidth - window.innerWidth); } let tween = gsap.to(races, { x: getScrollAmount, duration: 3, ease: "none", }); ScrollTrigger.create({ trigger: "#community", start: "top top", end: () => `+=${races.scrollWidth - window.innerWidth}`, pin: true, animation: tween, scrub: 1, normalizeScroll: true, // horizontal: true, invalidateOnRefresh: true, pinSpacing: true, }); // ScrollTrigger.refresh(); window.addEventListener('resize', () => { ScrollTrigger.refresh(); }); } }); It feels as if the page jumps and sticks, this only seems to be an issue on mobile (not as bad on mobile chrome than safari) is there anything that jumps out immediately with my JS? If I remove ScrollSmoother completely on mobile the page scrolls fine but then I get a white flashing and empty space on my scrolltrigger horizontal animation.
  8. Hello Everyone. I am having this issue as you can see from my code pen. Obviously this isn't exactly how the slides are supposed to work but for this example the codepen re-creates the issue. So I am trying to make it so that these images fade in and out and the text scrolls up when the user scrolls, and I got that to work. And then on the last slide, all of the content (image, descriptions, headers ect.) is supposed to slide up and fade away and then the next section start. However it seems that when I added this lastSlide fade up and sliding away animation, the container has suddenly got an extra 100vh added to the bottom of the container. This is bad because now when the animation slides up and fades away after SLIDE 3 it is just a blank space that the user has to scroll through this space to get to the next section. After they scroll through this final sliding and fading animation from the hero section into the next section the scrolling behavior is normal there should be no more animations. Any help is much appreciated let me know if you need any more details and I will try and provide.
  9. I need a round vertical slider, like in the screenshot. When the scroll reaches it, the block is fixed until all the items are scrolled through. I found the most similar option on codepen. Please help me make it usable with Next.js.
  10. Hello, I have a component that needs to be pinned only when the user is scrolling down. In other words, while the user is scrolling down, a selected div will pin (position: fixed) and space will be added as needed. As the user scrolls up, the selected div is no longer pinned, no additional space is added, and it will not animate. To do this, I was hoping there was a way to conditionally toggle the ScrollTrigger `pin` property based on self.direction, but it does not seem as straight-forward as that (perhaps due to how scroll trigger refreshes). Based on the code below is there anyway to achieve this? DEMO PEN: https://react-1dnq5j.stackblitz.io or https://stackblitz.com/edit/react-1dnq5j?file=src%2Fapp.js
  11. Namaste GSAP Community, I am working on a page just like all other animation I have used scrolltrigger in this page as well but here all the triggers' starting point is defaultly set to Top of the page instead of the starting of the section, I don't know why it happens and not finding the issue.
  12. Hello everyone, first of all, I want to thank you all for the great insight you provide in this forum so generously. Secondly, please excuse both my English (as I am not a native speaker) as well as my approach to front end (since I am a level below beginner enthusiast). I was dabbling with TextSplit and ScrollTrigger, having a lot of fun, and trying to replicate elements I saw online. In the first pen below, there seems to be no issue (other than the fact that the section stops being pinned before the entirety of the text has been colored). Text Color Scroll #1 https://codepen.io/Aristidis-Lithoxoidis/pen/MWMYzez The same exactly with this pen. Text Color Scroll #2 https://codepen.io/Aristidis-Lithoxoidis/pen/jOjEQLe When I combine the two Text Color Scroll Combined https://codepen.io/Aristidis-Lithoxoidis/pen/JjQoeOY I start having problems. Namely, the second section (the one with a single column) appears -in a most snappy way - before the first section has even disappeared. And then, the second section appears again somehow further down. I have tried everything I could find online for two days now but nothing. The closest I got was when I changed the "end" attribute of the first script to "end: "bottom +=1000px"", but that doesn't seem ideal. I am sure there is a very easy way of fixing - a problem that most probably I created myself - but couldn't find anything online. Thanks in advance.
  13. Hi, I've finally stepped into the beautiful world of GSAP. The last few hours have been challenging, yet really satisfying. Let me elaborate the problem. I've a circular SVG, with 4 words (of varying length) written on it. Its supposed to get pinned on the screen and as the user scrolls down, each word will rotate to 12 o'clock. The section will unpin when it completes a cycle and normal scrolling will continue. I read the documentation and watched some videos, this is what I've achieved so far. I'm able to pin the section, and make the SVG rotate 360 degrees before it unpins. But its not really "snapping" (I hope its the correct term) to the next word, which is the desired behaviour. I've grouped the words together and given them a class. I'll really appreciate it if someone could look at the attached CodePen and help me with the challenge. Or point me towards the relevant topics that I need to learn about in order to achieve the result. Thank you!
  14. I'd like to implement reduced motion. Please offer some suggestions to the demo/codepen provided! (I've tried my code with basic syntax, conditional syntax, with context and without... ). I notice the matchMedia object (mm) in my debugger. I even see the key-value pair for reduceMotion nested in the object. The add method is undefined. I've tried meticulously to follow the documentation. I also tried removing the array code and attempted writing this tween with gsap.to and selector text (w/ the data attribute) instead of the utils array method and loop. I'll be happy to implement any recommendations, thank you. I searched the forums as well...
  15. As you can see from my CodePen, my image zooms in when scrolling down and pins until its finished. My question is, how can i make the zoom more interesting to where the image is revealing more as it zooms in ? So it starts off small like it currently is and then instead of just zooming in, it maybe reveals more of the surrounding image as it zooms. Does that make sense? Would love to know if anyone has any ideas on this.
  16. I can't figure out the trigger property (ScrollTrigger plugin) In this aparlax animation https://codepen.io/AlexandrTyurin/pen/KKjPZJX the values are incorrectly specified, for example: trigger: 'p1' or trigger: 'img1' instead of the correct values trigger: '#p1' or trigger: '#img1' However, the parallax itself works satisfactorily. In case I specify the values correctly using '#', the parallax does not work properly - for example the second layer (#img2 - image of a small rock on the right) starts to scale not from the very beginning but after about 20% of scrolling. Please help me to understand the problem.
  17. I've been exploring a solution to keep ScrollTriggers working smoothly. In my case there are several timelines, ScrollTriggers, and svelte components that are modifying the DOM at different places on a long page. To help with this I created a function that calls ScrollTrigger.refresh()every couple of seconds, and it does not refresh if the user is scrolling. So far it's been working pretty well, but I wanted to post the solution here to get input on pros and cons. The JS looks like this, where the imported refreshScrollTriggers function is a debounced call to ScrollTrigger.refresh(): import { refreshScrollTriggers } from './events' /** * Refreshes GSAP scroll triggers at a specified interval, when the user is not scrolling. * * @return {void} */ export default () => { const interval = 2400 const waitAfterScroll = 400 let isScrolling = false let timer = null const handleScroll = () => { isScrolling = true requestAnimationFrame(() => { clearTimeout(timer) timer = setTimeout(() => { isScrolling = false }, waitAfterScroll) }) } window.addEventListener('scroll', handleScroll) setInterval(() => { if (!isScrolling) { refreshScrollTriggers() } }, interval) } Feedback welcome.
  18. I'm quite new to gsap. I now understand how to use useGSAP, but today I tried to create a horizontal scrolling section. I want the whole site to be scrolled vertically but only one section to be scrolled horizontally, similar to gsap.com Why doesnt this work? "use client"; import { useGSAP } from "@gsap/react"; import gsap from "gsap"; import { useRef } from "react"; export default function ProcessSection() { const container = useRef(null); const animationRef = useRef(null); useGSAP( () => { const sections = document.querySelectorAll(".panel"); gsap.to(".panel", { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: animationRef.current, pin: true, scrub: 1, snap: 1 / (sections.length - 1), end: () => "+=" + animationRef.current?.offsetWidth, }, }); }, { scope: container } ); return ( <section className="w-full overflow-x-hidden" ref={container}> <div className="flex h-screen w-[400%] flex-nowrap bg-background-secondary opacity-0" ref={animationRef} > <div className="panel flex h-full flex-grow bg-green-500"></div> <div className="panel flex h-full flex-grow bg-red-500"></div> <div className="panel flex h-full flex-grow bg-yellow-500"></div> <div className="panel flex h-full flex-grow bg-purple-500"></div> </div> </section> ); }
  19. I tried to recreate the scrolltrigger footer unmask animation from https://chroniclehq.com/, but when I added the scrub:true property, the animation starts to be instant. How to fix this? Here's the minimal demo: https://stackblitz.com/edit/stackblitz-starters-cwggx8?embed=1&file=app/page.tsx
  20. Hey everyone, I'm trying to learn GSAP for a few weeks, so I'm new to this. While using GSAP on my project, I got stuck. The problem I'm encountering is with ScrollTrigger. I have uploaded a video on YouTube where you can see the issue. When I scroll down, my screen goes black, which is fine, but after a few seconds, an image comes up from below and is supposed to take its full size. However, as the image is coming up, there is a glitch, and it doesn't smoothly take its full width. please watch the video. please tell me why im getting the glitch and please correct my mistake.. and yes in my codepen sample i only posted JavaScript not html and css.
  21. Hi! Thank you for this space. I hope to get help with my problem, and I will be super grateful https://mccann.fr/en I am trying to achieve the video effect from this website, but I need to go a step further, as I don't want it to stay in the second position and keep there. Instead, I need it to position itself in the third div, right next to the text. You can see my attempt on Codepen: https://codepen.io/carpicoder/pen/pomdprb First: I don't quite understand why the video starts in the second div, if in the HTML it is in the first one and the GSAP effects are in order. Second: I'm not sure if what I'm doing makes sense or if I am overcomplicating things, and maybe Flip is a good option for this. I tried using Flip, but I couldn't get it to work with ScrollTrigger. I set it up, but ScrollTrigger only started the animation with the duration I set, but it didn't work with Scrub. Also, I'm not sure how using Flip would solve having the video in 3 different positions, not just 2. Lastly, in the example on the McCann website, you can see that the text moves up at a slower speed than the rest, as the video overlaps the same text for quite some time. I also don't know how to achieve that. It would be very helpful if you could take a look and guide me in the right direction. Thank you very much!
  22. Hello GSAP community! ? I'm using the vanilla-lazyload library to lazy load images. I need to use lazy loading because I'm working on a project page and there are a lot of photos/videos that weigh a lot. The whole problem lies in the ScrollTrigger position after the images, which are loaded lazily. The fact is that initially these images do not have a height and because of this ScrollTrigger fires earlier than necessary (which is correct). To solve this problem I used the method when loading each image ScrollTrigger.refresh() This method allows ScrollTrigger to work when needed, but on phones (I tested on iPhone 14 Pro in Safari and Google Chrome) when scrolling, the scroll stops at the moment this method is executed. How to fix the problem of stopping when scrolling quickly on mobile devices? I tried to solve this using the method ScrollTrigger.normalizeScroll(true) But this method removes smooth scrolling on mobile devices, which also doesn’t look very good. I also use the lenis-scroll library, but if I turn it off the problem remains. I am attaching my codepen so you can understand the reason: https://codepen.io/ProjectDCL/pen/QWRVYYz (Be sure to watch it on your phone to understand why). I hope there is a very easy solution to my issue. But I've already spent several evenings trying to find something worthwhile. I will be very grateful for your help and believe in the magic of GSAP ?
  23. I got this case where I want to pin an element with scrolltrigger, then unpin, and then again pin it at a later section till the end of the page, can someone help me :D
  24. Hello all! I'm focusing on overall performance and making websites as smooth as possible on all major browsers. I have some issues that been working on for couple of days and could not get it as i want or even understand why things are happening... 1. On my other machine (mac mini 2018) i have a screen that supports 4k images, however on Safari and Chrome the main banner with text sliding from both sides is not smooth and is a bit glitchy https://chemstone.designwildwest.com/ FYI: On my Window computer i have a screen that supports 2k images and everything is smooth and works okay. This below is an animation for image it self and scrollsmoother: // hero image reveal function revealHeroItem(elem, direction) { gsap.to(elem, { duration: 1.5, clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", }); gsap.from(elem.querySelectorAll(".img-cover"), { duration: 2.5, autoAlpha: 0, opacity: 0, scale: 1.1, }); } const imgTl = gsap.timeline({ scrollTrigger: { trigger: section, // markers: {startColor: "green", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20}, start: "top bottom-=15%", onLeaveBack: (self) => self.disable(), onEnter: function () { revealHeroItem(section); }, }, }); // scroll smoother init window.addEventListener("load", (event) => { ("use strict"); let smoother = ScrollSmoother.create({ smooth: 2.5, smoothTouch: false, ignoreMobileResize: true, wrapper: "#smooth-wrapper", content: "#smooth-content" }); }); Does anybody know/have an idea how to debug it and see if it is a gsap fault or the computer is to slow or something like that? The scrollSmoother init should be done once all assets are loaded? Sorry for being a bit chaotic in this post but its kind a hard to explain.. once somebody answer i can provide more detalited code/information. thanks Guyz
  25. Hello! I am creating a website in which it has a preload, then displaying the content. I use ScrollTrigger to create a slide-up panel effect. The problem is, the ScrollTrigger only works after I resize the window. Both are working perfectly fine separately, though. I have tried using scroller ScrollTrigger({ trigger: "panel", scroller: "#content" //other }); as I have seen other post similar to mine, but it still didn't work. Did I do something wrong? Thanks for the help!
  • Create New...