Search the Community

Hello, I'm encountering an issue with my GSAP/ScrollTrigger animation on Webflow. The glitch seems to be related to DOM changes, likely due to external resources loading after ScrollTrigger has already initialized. I assume ST then wrongly calculates the triggers (start and end) causing the glitch. I've tried using scrollRefresh() and wrapping the entire script in an eventListener for DOMContentLoaded, but the issue persists. 1. Video with the issue: https://youtu.be/_M-Q6dcT9S0 - Funnily the animation works correctly the first time, but on subsequent attempts, a glitch appears. 2. Triggers shift video: https://youtube.com/shorts/fCR3IKiSsQI - With markers turned on, I can see the trigger points shifting while the site is still loading probably causing the glitch 3. Temporary Workaround: As a temporary fix, I set the section meant to be animated to display: hidden until the DOM is fully loaded and then script changes it to the "block". This resolves the glitch, but I believe there should be a better solution how to handles this without a need to hide the entire section. Live URL: Link to one of the talent pages (The issue can be replicated on other talent pages as well). Current Code Snippet: <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); // Wait for the entire window, including images, to be fully loaded window.onload = function () { // Temporary workaround: Make the projectpage-image visible by setting display to block //document.querySelectorAll('.projecttalent').forEach(function(element) { //element.style.display = 'block'; //}); // Create your ScrollTriggers and animations here gsap.from(".projectpage-image", { scale: 0, duration: 3, ease: "power2", scrollTrigger: { trigger: ".talent-work", scrub: 2, start: "bottom +=400", invalidateOnRefresh: true, onEnter: () => { // Attach the scroll event listener when the ScrollTrigger enters the viewport window.addEventListener('scroll', redirectHome); }, // markers: true, }, }); // Call ScrollTrigger.refresh() at the end ScrollTrigger.refresh(); }; let redirectTimeout; const redirectHome = () => { if (window.scrollY + window.innerHeight >= document.body.offsetHeight) { clearTimeout(redirectTimeout); redirectTimeout = setTimeout(() => { window.location.href = '/'; }, 800); } } </script> Webflow Build URL (FF-TALENTs TEMPLATE within CMS collections, code shown above inserted within this page) I would greatly appreciate any advice or solutions, as this is my first experience working with GSAP. Thank you in advance!

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.

Hello Community. First of all, thank you very much for this very beautiful platform. I am very new and first time posting a question and sorry If I make any mistakes. I found one codepen as per my requirement but I found one issue in it. While scrolling in the horizontal section there is some glitch in the last section it distorts for a fraction. Help is appreciated. Please check the scroll between Horizontal 1 and Horizontal 2 sections. Here is the pen and loom link also. https://www.loom.com/share/d089bea672d7443d8af6394175f91f66?sid=ee6348c6-754d-479c-9cd4-784a8ff4d331

hi, I have a problem on ios devices with scrollTrigger, when I scroll, scroll suddenly skips or jumps, I have no idea why this happens because the code I wrote is only this. There's a video at the bottom that you can see what I mean. Thank you for your attention:) gsap.timeline({ scrollTrigger:{ trigger:'#s0', scrub:true, start:'top top', end: 'bottom -220%', pin: '#s0', } }) // .to('#photo1',{maskImage: 'linear-gradient(rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 0) 50%)'}) .to('#photo1', { opacity: 0 }); idk.mov

Brand new to this, but I'm not seeing the answer out there (maybe I'm looking up the wrong terms). Anyway, I'm doing a few tests, and I'm seeing a flash of the unanimated objects before they come on. For instance, if they animate from 0% scale to 100, they appear for an instant at full size before they disappear and the animation begins. It's only local at the moment, but I see it in both chrome and firefox. I'm using jquery for selectors, and both jquery, TweenMax, and the function to animate are all being loaded in the head before any of the elements are defined in the body html. Is there a typical way to resolve this or most likely cause to look at?

Hi guys ! I made a sample using the latest GSAP 3.1.1 and Vue.js 2.6.11, I must admit I haven't done any web in years and I was wondering why it displays correctly on the browser while effect on the divs' background is quite different. I know it's probably quite a lame question, probably related to some CSS properties not being supported on mobile, but I couldn't figure out which one(s) by looking at Chrome developer console and thought that you guys might surely know at first sight. Any hint would be very much appreciated ?

Hey guys! I'm relatively new to GSAP, and I've search the forums for image glitch effects on hover to no avail. I'm looking to make an images on the page glitch on mouse hover similar to the effect on the text in the codepen. Is this possible with GSAP? Thanks in advance!

Hi all, I'm having some issues when I animate text using gsap and scrollmagic. The screenshot shows where I'm in the middle of a tween that has a duration. Any thoughts? Thanks;

I'm currently using GSAP to create a few banners with SVG shapes (text from Illustrator outline since I can't get Webfonts for these). They work and look fine on my machine, but when tested on a PC in Chrome, there is a small issue where the moving SVG element leaves a sort of "trail" graphically, but only when viewed at 100%. I've attached a mocked up version of the issue (I tried getting the user to provide a zoomed in screenshot but she says the issue vanished when zoomed in). Has anyone encountered this when animating SVG elements? I am imagining it is probably a hardware issue.

Hi, I have tried searching around for this issue but seems like no one ever encounter this. There is a visual glitch when I'm tweening z property of a jpeg loaded with ImageLoader. If I remove the z from the argument, the image will display fine. The glitch is like broken image (if you google 'visual glitch image', most of it display almost same as what I have now). What is more confusing is that the glitch only appear on Windows but not on Mac OS. If if test the movie in a Windows computer, it will display just fine, only when it is published as air application the glitch will show. I use Adobe Air for Desktop v23. Does anyone have clue about this?

Hi Guys, I was just playing with some really nice text effects from another codepen, and using GSAP to tween the filter values. I'm getting a glitch when the animation starts/resets though, so I think I need to set something at the start to get rid of it! Any ideas where the glitch is coming from? Note that it doesn't work in IE at all! Cheers, Paul

Chrome isn't very happy with my transition-rich page. When the site is rendered in a large window (>= 1080p maximized) and transitions are initiated, one or more elements temporarily disappear. DEMO (this is early-dev -- layout is far from complete, so please ignore the scaffolding) I've been poring over stackOverflow and the like for possible solutions, but I've yet to run across anyone with this issue. Any clues would be greatly appreciated.