Jump to content
Search Community

Search the Community

Showing results for tags 'gsap'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Found 1,115 results

  1. Hey, everybody. I am developing wordpress themes. In many projects I use GSAP animations. In large multi-page sites I face the problem of poor performance of GSAP scrolltriger property pin. Probably I am lacking experience to optimize it. Perhaps someone can share his experience how to better optimize animations in such projects (in the context of Wordpress and in general)? Perhaps it makes sense to separate all pages by block and load js-code animations only when there is a block? Thanks for any information PS. To understand the Wordpress problem I will add. That in most sites I create my custom theme from scratch. Pages are separated by blocks. These blocks work with the help of ACF Gutenberg plugin.
  2. I use GSAP’s ScrollTrigger in my React app, and everything works perfectly in the local environment. However, after deploying to Vercel, I’ve encountered an issue with ScrollTrigger when switching routes. Here’s the behavior: When I navigate to a page, the ScrollTrigger positions (start and end markers) are not aligned with the actual content. For example, the start and end markers appear above the intended elements. (I noticed it in all my sections) If I refresh the page, the ScrollTrigger recalculates correctly, and everything works perfectly. Navigating to another route causes the same issue to arise until I refresh the page again. I’ve also noticed that I’m using the Swiper component in two routes at the bottom of the page, reusing the same component. This seems to cause similar issues even in my development server. (I have properly used context for this component) [Note: I have added lazy loading for components and don't have any lazy loading images] const Home = lazy(() => import("@/pages/Home/Home")); Here is a minimal useGsap code from my code: useGSAP(() => { const cards = gsap.utils.toArray( ".card" ) as HTMLElement[]; cards.forEach((item, i) => { gsap.from(item, { y: 50, duration: 1, opacity: 0, delay: i * 0.1, ease: "power2.out", scrollTrigger: { trigger: item, start: "top 90%", toggleActions: "play none none none", markers: true, }, }); }); }, []); Any advice on how to ensure ScrollTrigger recalculates properly? And the best practices to follow when using GSAP with React or Next.js
  3. saadk4777

    Help Needed with GSAP Animation Issue

    Hi everyone, I’m working on a project to animate a laptop. The animation is working perfectly. However, when I scale the red screen to 1, the lines animation starts and show 2nd section in appears inside the lines Here’s what I’m trying to do: When the scale is set to 1, I have a line shutter animation, but when the red screen scales to full size and I start scrolling, 20 lines animate from the middle. I then make the screen black, and the second section becomes visible as the lines are used as a mask or clip-path code. The pen link is attached. Can anyone help me resolve this issue? I’m not sure why it’s behaving this way, and any assistance would be greatly appreciated!
  4. Original: https://codepen.io/GreenSock/pen/XWzRraJ I want to achieve the following: I want to scroll through the page in a normal way. So first, I scroll through the intro. Then, when div.wrapper reaches the top of my screen, I want to pin it using ScrollTrigger. At that point, I only want to swipe through the swiper using this Observer. Once I reach the end of my swiper, I want to continue scrolling through the page, and the Observer can stop at that point. I'm having trouble making this work. Can anyone help me?
  5. I have seen many posts about problems installing gsap/business (or club) Tried everything, read all threads, abused ChatGPT, watched the installation but without luck. I have a vite project with GSAP/business installed, locally everything works offcours but when I want to deploy I get the following error: npm ERR! 404 Not Found - GET https://registry.npmjs.org/@gsap%2fbusiness - Not found This is because it wants npm.greensock.com as registry and not registry.npmjs.org. Should be easy right? I have tried this: removed package-lock.json and clean install removed node_modules folder and clean install added .npmrc to root of folder added .npmrc to use_level on machine setting registry through bash uninstalled every version of GSAP (gsap/react, gsap, gsap/business) and installed only business used the .tgz npm installation file to see if this works (no luck) searched my machine for https://registry.npmjs.org/@gsap%2fbusiness to manually remove it I don't know what to do or try, nothing seems to work.
  6. I have an animation on these cards that is changing the height of some spacers above these cards to get a neat scrubbing affect. The animation works great and scrolling down with the scroll wheel is just fine, but if you click on the scrollbar and drag it down, you'll notice that when it hits the animated area, it slows down significantly. I know that this is caused because the height of the entire page is decreasing which does need to happen. Scrollable height changes = scrollbar speed change. My question is how do I stop or at least reduce this from happening. It almost feels like scroll jacking which I hate. I also noticed that this does not happen on safari. I haven't check other browsers besides chrome (sidekick) and safari.
  7. Hi GSAP community, I'm working on an image reveal animation where each image is split into 9 sections using clip-path. While the animation sequence works, the final state shows misalignment in the top 6 sections (only bottom 3 sections align correctly). Here's my Codepen: https://codepen.io/adhikari-dikshant/pen/pvzKpOB The animation should: Start with each section at a point (0 width/height) Reveal in a sequence from top-left to bottom-right End with 9 perfectly aligned sections forming the complete image Relevant code snippets: const finalClipPaths = [ "polygon(0% 0%, 33.33% 0%, 33.33% 33.33%, 0% 33.33%)", // Top left "polygon(33.34% 0%, 66.66% 0%, 66.66% 33.33%, 33.34% 33.33%)", // Top middle // ... rest of the paths ]; // Animation const tl = gsap.timeline({ scrollTrigger: { trigger: wrapper, start: "top 75%", }, }); Current behavior: Animation sequence works Bottom 3 sections align correctly Top 6 sections appear distorted/misaligned after animation completes No issues during the animation, only in final state What am I missing in the clip-path calculations or GSAP animation setup that's causing this misalignment? Any help would be greatly appreciated! Tech stack: GSAP 3.12.5 ScrollTrigger plugin Lenis Smooth Scroll 0.19.0 Bootstrap 5 Vanilla JS SCSS
  8. Hello, GSAP Community! I'm facing an inconsistent performance issue when using GSAP for animations on iOS devices, specifically in the Safari browser. The same code works perfectly in Chrome for iOS and in browsers on Android, but in Safari the animations have a noticeable lag, appearing to miss frames, especially in animations synchronized with scrolling. Tested browsers: • Safari on iOS: has lag. • Chrome on iOS: runs smoothly. • Browsers on Android: perfect performance. We've tried a few solutions: 1. Optimizing CSS properties for transformations (translate3d, will-change, etc.). 2. Adjusting the refresh rate of animations and force3D. 3. Reducing the complexity of animations to see if it's a load issue. 4. We've consulted other forums and followed tips like enabling/disabling specific GSAP settings, but to no avail in Safari. This behavior appears to be specific to the Safari browser on iOS and seems to be a common issue reported by other developers. I would like to know if the community has any more specific recommendations or solutions to work around this Safari limitation. Any tips on how to improve the performance of animations in Safari for iOS? Code Example: https://codepen.io/Vinicius-Gouveia/pen/vEBdQVZ?editors=1111
  9. Nightshift

    SplitText creating multiple nested divs

    I have some very simple code with SplitText: document.fonts.ready.then(() => { const texts = document.querySelectorAll("[text-animation]"); if (!texts) return; let splitText; function runSplit() { splitText = new SplitText("[text-animation]", { types: "lines", linesClass: "line", }); } runSplit(); }); For some reason, SplitText seems to be creating multiple nested ".line" divs, I've also noticed the same behaviour when using words. The only CSS applied to the text is color and font size. Any idea on why this may be happening?
  10. Ideal

    Advanced Slider transition effects

    Hello, I want to recreate the slide transition effect on this site: https://elementis.co/destinations. If anyone can help me, here is the CodePen. Thank you in advance.
  11. Ideal

    Advanced Horizontal scroll

    Hello, I want to create a horizontal scroll animation with GSAP, like on this site: https://vantage.ava-case.com/work. I’m wondering if there are any resources I could consult, as I haven’t been able to find them. I found this CodePen: https://codepen.io/GreenSock/pen/BaQXjWw, which seems like a good starting point, but I can’t quite implement it correctly. See my GSAP starter template. Thank you in advance
  12. Please help me . I couldnt fix this .
  13. Hello friends! I wanted to create an animation using GSAP and ScrollTrigger, but I can't. The essence of the animation is that when scrolling, the large picture is fixed in the center of the screen and decreases. Then, when the user scrolls to the section with the slider, by default these slides are transparent. As soon as the user scrolls to the slider, this fixed picture should decrease to the size of the pictures from the slider, and then from 1 fixed picture, 3 others should move out from under it to take the place of the pictures of the sliders, after that the title and description should appear in the slider. I was able to fix the picture, but I can't do anything further. Tell me how to do it. Thanks in advance! That is, when the user scrolls the page and sees a large picture in the middle of the screen, the picture itself should be fixed. Then, when scrolling down, it should decrease (I think it should decrease to the size of the pictures that are located in the slider) Then the user scrolls down and sees the section with the slider. Initially, the slides are transparent by default. But we see a fixed picture in the center (which we fixed earlier). And as soon as it becomes at the level of the pictures in the sliders, 4 pictures should come out of this picture (possibly under 1 large one, place 3 more that will be transparent). And these pictures should be placed in the place of the slide pictures, after that the title and description should appear in the slides.
  14. Hello, I’ve been working on projects with GSAP ScrollSmoother for a long time. But lately, I’ve been noticing people using Lenis with GSAP. For my upcoming projects, do you think their compatibility is good enough at this point? Or are there still issues? Like, are we being misled by how projects with Lenis are performing? In short, can we say that GSAP works smoothly and stably with Lenis for all animations and functions? Thank you very much in advance!
  15. if (window.innerWidth >= 1280) { gsap.registerPlugin(ScrollTrigger) initGSAPAnimations() window.addEventListener('resize', () => { ScrollTrigger.getAll().forEach(trigger => trigger.kill()) initGSAPAnimations() ScrollTrigger.refresh() }) function initGSAPAnimations() { gsap.to('.hero', { scale: 0.7, scrollTrigger: { trigger: '.two-block', start: 'top-=100 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.box-two-block:nth-child(odd)', { x: 1800, scrollTrigger: { trigger: '.hero', start: 'top start', end: 'bottom-=100 end', scrub: 2, // markers: true, }, }) gsap.from('.box-two-block:nth-child(even)', { x: -1800, scrollTrigger: { trigger: '.hero', start: 'top start', end: 'bottom-=100 end', scrub: 2, // markers: true, }, }) gsap.to('.two-block', { scale: 0.7, scrollTrigger: { trigger: '.about', start: 'top 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.about__video-holder', { scale: 0.5, scrollTrigger: { trigger: '.about', start: 'top-=380 50%', end: 'bottom-=180 100%', scrub: 2, // markers: true, }, }) gsap.from('.about__title-box .title-box__title', { scale: 0.5, scrollTrigger: { trigger: '.about', start: 'top-=380 50%', end: 'bottom-=180 100%', scrub: 2, // markers: true, }, }) gsap.from('.about__title-box .title-box__text-holder', { scale: 0.5, scrollTrigger: { trigger: '.about', start: 'top-=380 50%', end: 'bottom-=180 100%', scrub: 2, // markers: true, }, }) gsap.from('.about__item', { x: 2200, duration: 1.2, stagger: 0.3, ease: 'power3.out', scrollTrigger: { trigger: '.about', start: 'top 20%', end: 'bottom 20%', toggleActions: 'play reverse play reverse', // markers: true, }, }) gsap.to('.about', { scale: 0.7, scrollTrigger: { trigger: '.fixtures', start: 'top 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.fixtures__title-box .title-box__title', { opacity: 0, scrollTrigger: { trigger: '.fixtures', start: 'top-=100 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.fixtures-slider', { x: 1800, scrollTrigger: { trigger: '.fixtures', start: 'top-=150 50%', end: 'bottom-=50 100%', scrub: 2, // markers: true, }, }) gsap.to('.fixtures', { scale: 0.7, scrollTrigger: { trigger: '.services', start: 'top 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.services__title-box .title-box__title', { opacity: 0, scrollTrigger: { trigger: '.services', start: 'top-=250 50%', end: 'bottom-=150 100%', scrub: 2, // markers: true, }, }) gsap.from('.item-services:nth-child(odd)', { x: 1800, opacity: 0, scrollTrigger: { trigger: '.fixtures', start: 'top start', end: 'bottom-=100 end', scrub: 2, // markers: true, }, }) gsap.from('.item-services:nth-child(even)', { x: -1800, opacity: 0, scrollTrigger: { trigger: '.fixtures', start: 'top start', end: 'bottom-=100 end', scrub: 2, // markers: true, }, }) gsap.to('.services', { scale: 0.7, scrollTrigger: { trigger: '.projects', start: 'top 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.projects__title-box .title-box__title', { opacity: 0, scrollTrigger: { trigger: '.projects', start: 'top-=200 50%', end: 'bottom-=850 100%', scrub: 2, // markers: true, }, }) gsap.from('.projects__title-box .title-box__text-holder', { opacity: 0, scrollTrigger: { trigger: '.projects', start: 'top-=200 50%', end: 'bottom-=850 100%', scrub: 2, // markers: true, }, }) gsap.to('.projects', { scale: 0.7, scrollTrigger: { trigger: '.logos', start: 'top 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) if (window.innerHeight < 800) { gsap.from('.projects-slide__right-col', { scale: 0.5, scrollTrigger: { trigger: '.projects', start: 'top-=850 50%', end: 'bottom-=880 100%', scrub: 2, // markers: true, }, }) gsap.from('.projects-slide__left-col', { scale: 0.5, scrollTrigger: { trigger: '.projects', start: 'top-=850 50%', end: 'bottom-=880 100%', scrub: 2, // markers: true, }, }) gsap.from('.pagination-projects-slide', { x: 2200, duration: 1.2, stagger: 0.3, ease: 'power3.out', scrollTrigger: { trigger: '.projects-slider', start: 'top+=750 50%', end: 'bottom+=220 100%', toggleActions: 'play none none none', // markers: true, }, }) } else { gsap.from('.projects-slide__right-col', { scale: 0.5, scrollTrigger: { trigger: '.projects', start: 'top-=250 50%', end: 'bottom-=450 100%', scrub: 2, // markers: true, }, }) gsap.from('.projects-slide__left-col', { scale: 0.5, scrollTrigger: { trigger: '.projects', start: 'top-=250 50%', end: 'bottom-=450 100%', scrub: 2, // markers: true, }, }) gsap.from('.pagination-projects-slide', { x: 2200, duration: 1.2, stagger: 0.3, ease: 'power3.out', scrollTrigger: { trigger: '.projects-slider', start: 'top+=250 50%', end: 'bottom+=230 0%', toggleActions: 'play none none none', // markers: true, }, }) } } } Hello, the animation works great, but everything goes wrong when I reduce the zoom of the page or I reduce or increase the width of the browser window and then the animation stops working. I am attaching the code, as well as a demo site where you can see the animation itself and its behavior when changing the width of the browser window. When scrolling down, my section should shrink using scale. But after changing the screen width, something strange happens. Please help solve this issue. Project download — https://github.com/denys-khrapov/babolar Demo link — https://denys-khrapov.github.io/babolar/
  16. h_ivanov

    Smooth snake segments problem

    Hello everyone, I have the problem you can see on the video. When i pause the game the snake segments are correctly positioned, but when its running and a movement is made the segments are washing and not synced correctly. If i remove the duration the snake movement starts to be laggy and it is not smooth. At codepen i uploaded render.js as a HTML, main.js where we use ticker to init the game start as CSS and snake.js as JS where we care about the snake animations. Untitled22.mov
  17. lucastagne

    Pin problem

    hello, I have a problem with a scroll trigger with a pin for two sections, the goal is to pin the first one, scroll to pin the second, and scroll to the bottom of the page. I tried a lot of different things, with anticipate pin, trigger, and change the start and end of the trigger, but nothing looks ok, a little 'jump' appears between the different pin. Actually, the trigger is on the parent of the 2 sections , and in the same timeline, but i don't know how to fix it.. I attached a video and the code i used. Thanks for the response :) Enregistrement de l’écran 2025-01-03 à 14.mp4
  18. Hi GSAP Community, I'm working on a site using Lenis Smooth Scroll, GSAP Scroll Trigger, React-Three-Fiber, and Drei. While the animations look great but the site is extremely laggy and sometimes non-functional on many mobile and desktop devices. I've optimized where I can but still can't pinpoint the issue. Here's the live site: https://codeencoders.vercel.app/ GitHub Repo: https://github.com/Waqas786ali/codeencoders Details: I've implemented GSAP animations alongside Three.js objects. Performance on Desktop and Mobile devices is the primary concern (lagging, slow interactions). Any advice on optimizing GSAP or handling Three.js in mobile environments would be greatly appreciated! Thank you in advance for your help. Best regards, Waqas Ali
  19. GreenSock

    Web Animations API and GSAP

    I saw this tweet today: https://twitter.com/MiguelCamba/status/560806390210363393asking about whether the Web Animations API will ultimately make GSAP obsolete, so I figured I'd offer a few quick thoughts here and invite others to chime in if they'd like. For those who don't know, the "Web Animations" spec I'm talking about is described here: http://www.w3.org/TR/web-animations/ I think it's a great initiative by some browsers to address quite a few major deficiencies in the current crop of animation technologies that exist inside the browser. For example, if the spec is adopted, you'd be able to create tweens and timelines that have a lot of the controls that GSAP users have enjoyed for years (play(), pause(), resume(), reverse(), etc.). Awesome. Big step forward for the native browser. Web Animations also aims to unify some pieces of SVG animation capabilities and CSS animation capabilities. Again, bravo. I have spoken to some of the editors of the spec (super smart, and super nice guys) who have consistently maintained that they don't see Web Animations as competing with tools like GSAP. Instead, they're intended to be complimentary. They recognize that tools like GSAP offer a lot of sugar on top that makes things far more practical for real-world animators. So if Web Animations get adopted by all the major browsers (and that's not guaranteed - only Firefox, Chrome and Opera have said they'll adopt them last time I heard), tools like GSAP could leverage them under the hood where appropriate to potentially get a speed boost or additional capabilities. Excellent. Why not just use Web Animations instead of GSAP? I don't mean this to sound critical of Web Animations, but since we're being asked to explain why/where GSAP fits in, allow me to point out a few important factors to keep in mind: Animate scale, rotation, skew, and position independently - this is a BIG deal for real-world animators, and since the Web Animations spec is built on top of the CSS spec which shoves them all into a single "transform" property, it's impossible to manage them in a truly independent fashion. GSAP, on the other hand, makes it easy. I had a long talk with the editors about this a while back, and although they really wanted to find a solution, none of us were able to find one because of the need to maintain backward-compatibility with the CSS spec. So a tool like GSAP is necessary to get robust independent control. Transforms are definitely the future of animation because they can be GPU-accelerated and don't affect document flow (better than "top" and "left"). Compatibility - GSAP works back to IE6. Web Animations aren't fully implemented in any browser today, but are partially implemented in Chrome and Opera. Microsoft may never implement them. Not sure about Apple either. There is a polyfill that's considered "beta", but when I tested it there were huge performance problems and garbage collection bugs that crashed the browser in my tests. It didn't seem ready for production use. Keep in mind that the spec itself is in flux, so you may write code today that'd break when the spec gets finalized. Works beyond the DOM - GSAP can be used to animate pretty much anything JavaScript can touch including canvas library objects, generic objects, or whatever. The Web Animations spec is for DOM elements. Solve SVG (and other browser) bugs and inconsistencies - GSAP solves problems with things like transform-origin behavior and harmonizes it across browsers. See http://css-tricks.com/svg-animation-on-css-transforms/Web Animations don't solve problems like that. GSAP "just works" where standards fail. Plugins and conveniences for real-world problems - there are all sorts of problems that animators face and GSAP solves. The spec won't do that. For example, overwrite management, physics, scrolling, relative values, directionalRotation (clockwise, counter-clockwise or shortest), rounding, labels, etc. More easing options - GSAP offers RoughEase, SlowMo, and more. See http://greensock.com/ease-visualizer/ One of the biggest promises of Web Animations is that it'll tap into the browser's native power to make things perform better, like layerizing things and shoving them to the GPU efficiently. I sure hope that happens and that it translates into real-world gains. GSAP already does some of that by leveraging 3D matrices during tweens, although I'd bet it could be faster if it was done directly by the browser. The problem is that in tests I've done with CSS animations (which use the same engine under the hood), they really weren't much faster in most cases, and JS was often faster. I know, it sounds crazy. JS execution is super fast these days (when written well). But if the browsers do indeed make things faster with Web Animations, that'd be amazing and GSAP can just tap into that under the hood. Again, I don't mean to criticize the Web Animations spec at all - I think it's a cool initiative and I hope the browsers get better and better an animation. The more tools they give us, the more GreenSock will leverage them and create even more refined tools for that special breed of top-notch animator out there who needs to solve real-world problems. GSAP + Web Animations could be a great combo eventually. And I'm confident that Web Animations won't supplant GSAP. Feel free to correct me about any assertions above. I'm admittedly no expert on the Web Animations spec.
  20. Hi, i have working in cargo collective website then i've added smooth scroll lenis.js and my requirement also one section use animation like card scrolling pin effect horizontally then i have implement gsap scrollTrigger but i have scrolling then smooth scroll lenis.js working perfectly but when enter the section they are hold card's not see only white background showing so please check it and help me.
  21. when user scroll I'm trying to make first image to fullwidth, by the it met top 50vh. after expanding it should reach top 0. then if it scroll up, then image back to normal position. initially making all the image to device width & height, so that it behaves fullwidth. when scroll slightly, then it should auto scroll to next image to make that image fully visible on viewport & same for the all the images. Issues 1: After expanding first image it should reach top 0, so that its perfectly fullwidth to the viewport. But it's not happening. Issues 2: when scroll, it should scroll to net image center, so that it's fully visible to the viewport, but here it's scrolling all the way to bottom. sometime it is auto scroll to center of the viewport when page load. I attached the code pen url, please help me on this. import { gsap } from "gsap"; import { ScrollToPlugin } from "gsap/ScrollToPlugin"; import { ScrollTrigger } from "gsap/ScrollTrigger"; document.addEventListener('DOMContentLoaded', function() { const textBoxes = document.querySelectorAll('.feature-takeover-hero-card'); const takeoverFirstCards = textBoxes[0].getBoundingClientRect().left; const images = document.querySelectorAll('.feature-takeover-storytelling-scroller-section:not(:first-child) img'); const firstImage = document.querySelector('.feature-takeover-storytelling-scroller-section img'); function setDimensions() { const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; const allImages = document.querySelectorAll('.feature-takeover-storytelling-scroller-section img'); allImages.forEach((image, idx) => { if (idx != 0) { image.style.width = `${viewportWidth}px`; } image.style.height = `${viewportHeight}px`; image.style.objectFit = 'cover'; }); } const isMobile = window.innerWidth < 768; if (!isMobile) { textBoxes.forEach((each, idx) => { if (idx != 0) { each.style.left = `${takeoverFirstCards}px`; } }); setDimensions(); } const options = { root: null, rootMargin: '0px', threshold: Array.from({ length: 101 }, (_, i) => i / 100) }; const observer = new IntersectionObserver((entries, observer) => { const windowHeight = window.innerHeight; entries.forEach(entry => { const image = entry.target; const index = Array.from(images).indexOf(image); const textBox = textBoxes[index]; const overlay = image.nextElementSibling; const rect = entry.boundingClientRect; if (entry.isIntersecting) { const scrollPercent = entry.intersectionRatio; const scale = 1.15 - (scrollPercent * 0.15); image.style.transform = `scale(${Math.max(1, Math.min(1.15, scale))})`; if (!isMobile) { const imageHeight = image.getBoundingClientRect().height; const imageMidPoint = imageHeight / 4 const textBoxOffset = (rect.top < windowHeight - imageMidPoint) ? -10 - ((scrollPercent - 0.25) * 40) : 0; textBox.style.transform = `translateY(${Math.max(-10, Math.min(0, textBoxOffset))}vh)`; } const overlayOpacity = Math.min(0.64, (1 - scrollPercent) * 0.64); overlay.style.background = `rgba(0, 0, 0, ${overlayOpacity})`; image.style.filter = 'blur(0px)'; overlay.style.background = 'rgba(0, 0, 0, 0)'; } else { if (entry.boundingClientRect.top < 0) { image.style.filter = 'blur(10px)'; overlay.style.background = 'rgba(0, 0, 0, 0.64)'; if (!isMobile) { textBox.style.transform = 'translateY(-10vh)'; } } else { if (!isMobile) { textBox.style.transform = 'translateY(0vh)'; } image.style.filter = 'blur(0px)'; overlay.style.background = 'rgba(0, 0, 0, 0)'; } } }); }, options); images.forEach(image => { observer.observe(image); }); gsap.registerPlugin(ScrollToPlugin, ScrollTrigger); const firstSection = document.querySelector('.feature-takeover-storytelling-scroller-section'); ScrollTrigger.create({ trigger: firstImage, start: 'top 50vh', end: 'bottom top', onEnter: () => { firstSection.classList.add('first-image'); textBoxes[0].classList.add('visible'); textBoxes[0].style.left = `${textBoxes[1].getBoundingClientRect().left}px`; }, onLeaveBack: () => { firstSection.classList.remove('first-image'); textBoxes[0].classList.remove('visible'); textBoxes[0].style.left = isMobile ? '0' : '-64px'; }, markers: true, // Remove this line in production scrub: 1 }); // Scroll to next image images.forEach((image, index) => { if (index > 0) { ScrollTrigger.create({ trigger: image, start: 'top center', end: 'bottom center', onEnter: () => { gsap.to(window, { duration: 1, scrollTo: { y: image, autoKill: false } }); }, onLeaveBack: () => { if (index > 0) { gsap.to(window, { duration: 1, scrollTo: { y: images[index - 1], autoKill: false } }); } }, markers: true, // Remove this line in production scrub: 1 }); } }) // Smooth scroll to adjacent image on user scroll let lastScrollTop = 0; let isScrolling = false; function handleScroll(event) { if (isScrolling) return; const st = window.pageYOffset || document.documentElement.scrollTop; if (event.deltaY > 0 || event.type === 'scroll' && st > lastScrollTop) { // Scroll down const nextImage = Array.from(images).find(img => img.getBoundingClientRect().top > window.innerHeight / 2); if (nextImage && nextImage !== images[images.length - 1]) { isScrolling = true; gsap.to(window, { duration: 1, scrollTo: { y: nextImage, autoKill: false }, onComplete: () => { isScrolling = false; } }); } } else if (event.deltaY < 0 || event.type === 'scroll' && st < lastScrollTop) { // Scroll up const prevImage = Array.from(images).reverse().find(img => img.getBoundingClientRect().bottom < window.innerHeight / 2); if (prevImage) { isScrolling = true; gsap.to(window, { duration: 1, scrollTo: { y: prevImage, autoKill: false }, onComplete: () => { isScrolling = false; } }); } } lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling } window.addEventListener('wheel', handleScroll); window.addEventListener('scroll', handleScroll); });
  22. Hi, I have a problem. I want to apply fade in and Fade out Animation to my slides here :https://www.judexaya.com/anomalies#INFERNUM I want my slide to fade in and fade out on scroll and on click on each slide. If this is possible?
  23. Hi, I want to create text animations similar to the ones on this website: https://yourcodebuddy.dev/ I’ve tried inspecting the site but couldn’t figure out how the animations are implemented. It seems like the developer might have built them custom, or I couldn’t detect any animation library using Wappalyzer. I want to know if it’s possible to achieve similar effects using GSAP. Specifically, how is the text switching between phrases like "website," "mobile app," and others? I’d like to replicate this type of animation for my project. Could you guide me on how to achieve this?
  24. Leo Barbosa

    Animated Timeline Gsap

    https://codepen.io/leandrobarbosafr/pen/XWvvbWY Timeline animated with GSAP, HTML, CSS and JS
  25. Hi everyone, I am working on a project where I want to create a blob effect using GSAP. I have animated two blob SVGs using GSAP as you can see in codepen attached below, but I am still learning, and I don’t know how to do everything. I have tried everything, mask-image, -webkit-mask-image but I'm not getting the result that I want. My goal is to mask an image into the blobs, like in the image I have attached. Can anyone please help me with this? How can I use GSAP to mask an image into the blobs? Thank you in advance for your help and suggestions.
×
×
  • Create New...