Leaderboard

Hi! I have come across the same issue and have created a workaround that works for me. It's definitely not perfect and is achieved by trial and error, but I thought I would post it here, maybe it can help someone. Context: Long mobile sections with scrub true (scroll-linked timelines). Without normalization, scrub jittered on iOS. With normalizeScroll always on, Low Power Mode made scrolling feel heavy and laggy. 1. Global ScrollTrigger config ScrollTrigger.config({ ignoreMobileResize: true, limitCallbacks: true, }); 2. Mobile-only conditional normalizeScroll Probe once at startup before creating ScrollTriggers. Re-probe on visibilitychange when the tab becomes visible again. If profile is full: ScrollTrigger.normalizeScroll({ allowNestedScroll: true, type: 'touch', }); If profile is reduced: ScrollTrigger.normalizeScroll(false); Full: fixes scroll/animation desync and jitter in normal power. Reduced: turns normalization off so native scroll stays responsive in Low Power Mode. 3. LPM / reduced-performance detection (heuristic) There is no official LPM API. We mark reduced if any of: prefers-reduced-motion: reduce navigator.connection saveData Apple: setInterval average interval about 1.3x longer than expected (roughly 500ms probe) Any device: median requestAnimationFrame delta greater than about 34ms (roughly 30fps cap) 4. Softer scrub when reduced scrub: profile === 'reduced' ? 0.6 : true Numeric scrub with about 0.6 seconds lag smooths timeline motion when normalizeScroll is off and scroll is choppy. Use scrub true when normalizeScroll is on. 6. Mobile only Probing, normalizeScroll toggling, and reduced scrub apply only on coarse-pointer touch devices. Desktop stays scrub true and no normalizeScroll. Result: Normal power on phone: stable scrub and acceptable scroll (normalize on, scrub true). Low Power Mode on phone: lighter scroll (normalize off) and smoother animations (scrub 0.6). Desktop: unchanged from a non-normalized baseline. Again, this has worked for me, it's by no means perfect. Hope I could help someone.

Hello everyone, I’m currently looking for a senior front-end / Vue developer to help finalize and maintain the infrastructure of an existing cinematic transmedia project website currently in development. The website is already built and functional. I’m specifically looking for someone comfortable stepping into an existing architecture and continuing development from the current base. Current stack: • Vue 3 • Firebase (Hosting, Auth, Firestore, Cloud Functions) • OVH (domain + SMTP) • GSAP animations The website functions as a private cinematic presentation environment for selected collaborators, industry partners, and investors, and is part of a larger interconnected narrative and systems architecture. What I’m looking for: • Strong front-end + implementation skills • High attention to detail • Ability to execute existing creative direction precisely • Comfort working with cinematic/editorial aesthetics • Organized communication and autonomy • Comfort navigating an English-based project environment and content structure • Comfort signing an NDA • Experience with premium artistic or storytelling-driven projects is highly valued This is initially a freelance collaboration focused on finalizing and stabilizing the current website structure, with possibility for future ongoing collaboration depending on project evolution and alignment. Remote collaboration is completely fine. International applicants are welcome. If interested, feel free to reach out with: • portfolio / previous work • relevant experience • stack familiarity • availability Contact: [email protected]

Hi, The issue here could be in the fact that as you scroll down the center column moves down as well and since the scroll and JS run in different browser threads, there is a small catch-up soto speak, that could cause that feeling of it being janky. A solution for that is to use ScrollSmoother and normalizeScroll in order to have the scroll and JS in the same thread and prevent that. That being said, I don't like the fact that the demo is basically always showing the same image in the center column, that kind of defies the purpose of that particular setup. Based on the demo and using our Vertical Loop helper function I created a couple of demos that solve that particular situation in a couple of different ways: https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop#vertical-loop-with-draggable This demo uses a similar approach where the loops are paused and their direction is controlled by the scroll direction: https://codepen.io/GreenSock/pen/GgNWozR This demo uses the Vertical Loop helper, but the loops are active, so they don't depend on the scroll direction. The loops pause on mouse enter and also it uses the ScrollTo Plugin to keep the columns wrapper in the viewport, the reason for this? If an image is past the top or bottom only a small part of it is visible, but from the moment the Flip animation for the full screen element starts the entire image becomes visible: https://codepen.io/GreenSock/pen/Wbopwbp You can add a opacity tween to it in the Timeline in order to avoid that or make it less drastic, but still should be noticeable. Another alternative is to keep the modal in the columns wrapper but still you need to scroll up/down to have the full size image visible, so the solution with the ScrollTo Plugin seems like the best in some way. Finally the first demo avoids the jittering from happening when scrolling up/down. Hopefully this helps Happy Tweening!

Hi @ccharondev and welcome to the GSAP Forums! You can use our Seamless Horizontal Loop helper function: https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop Hopefully this helps Happy Tweening! 💚

Is it a variable font? Because if not, animating the weight won't be smooth - you'll be restrained to the weights available in the font itself. So it may *jump* between available steps Performance wise though - it will be harder for the browser to animate than other properties like transforms and opacity, yes. So I wouldn't be surprised if browsers struggle with long text strings. It's unfortunately a notorious one for bad performance.

Hi @saz welcome to the forum! Seems pretty smooth to me. Tested on Safari and Chrome. Any particular browser or version you’re using? You might run into browser rending issues when updating the font weight so many times.. I'm not sure how CSS handles font weight changes, but again to mee this seems pretty smooth. Hope it helps and happy tweening!

Hi @FalconG2001 and welcome to the GSAP Forums! That most likely is achieved using THREEJS and GLSL Shaders, you can use either ScrollTrigger or the Observer Plugin for that. Here is a demo from our Demos Hub: https://demos.gsap.com/demo/shader-on-scroll/ You can have a look at this collection of different shaders in order to find the effect you prefer: https://real-world-shader.jankohlbach.com/ Finally this article in Codrops can help you getting started with this: https://tympanus.net/codrops/2021/01/05/creating-an-infinite-auto-scrolling-gallery-using-webgl-with-ogl-and-glsl-shaders/ Here is the demo of that article: https://codrops.com/Tutorials/InfiniteAutoScrollingGallery/ Hopefully this helps Happy Tweening! 💚

Indeed, in the odd cases that a parent element is pinned and then a child element is pinned as well, pinnedContainer is a good solution because it tells ScrollTrigger that it has to take into account the pin space (or the amount of pixels for a simpler explanation) of the parent element, otherwise the calculations will be off and you'll get some odd behaviour. As for being lucky I wouldn't call it like that, you researched the API and found something that was intuitive and applied to your situation, so I would say that you learned something by going through the available resources 🥳🙌 Let us know if there's anything else we can do to help! Also remember we have a Discord server as well: https://gsap.com/discord/ Happy Tweening! 💚

We are looking for an experienced Senior Front-End Developer to join an existing iGaming web platform. Requirements - Strong experience with React.js - Strong experience with Next.js - Good knowledge of GSAP animations - Strong experience with Framer - Strong understanding of responsive design and cross-device compatibility - Ability to identify and fix UI/UX issues independently - Backend experience is a plus Scope of Work The website is already developed. Main tasks include: - Fixing responsive and scaling issues across different devices and screen sizes - Implementing UI/UX improvements and visual refinements - Modifying existing components and layouts - Improving animations and interactions - Fixing bugs throughout the platform - General front-end optimization and cleanup - Backend bug fixing (optional but preferred) - You must do it for all the pages of the website Budget $600 - $1,000 (depending on experience and scope) Hiring Process - Applicants must provide relevant portfolio/projects. - Communication and payments will be handled through a trusted third-party platform or middleman service for security. - Direct deals will not be considered. Please send: 1. Portfolio 2. Years of experience 3. React / Next.js projects you've worked on 4. GSAP examples (if available) 5. Estimated availability Only experienced developers should apply. contact me on tg- @decaprio32

Hey everyone! I love this card expansion animation with the curvature / warp effect, see here: https://www.fromanother.love/work to https://www.fromanother.love/work/oneplus-powered-to-play-all-day. Does anyone have an idea how to do that? Thanks!!

Thank you! This makes sense and is exactly the solution I needed. Really appreciated

smooth.mp4 Not really sure I have much more to suggest here. It's very smooth for me. (not helpful I know) You could try adding will-change: transform on the columns. Sometimes animating transforms in the opposite direction to scroll gets a bit jittery on some devices, you could try using ScrollSmoother or Lenis for smooth scrolling?

Hi, Maybe something like this using Flip and GSAP Context: https://gsap.com/docs/v3/Plugins/Flip/ https://gsap.com/docs/v3/GSAP/gsap.context() https://codepen.io/GreenSock/pen/qEqdWwW Hopefully this helps Happy Tweening!

Less specific help case here and more a general query into how files are structured/organized when doing bigger builds. As of late I've been using the approach provided ya'll folks in my various code pens. I generally keep vars/timeline vars/scrollmagic scenes at the top, then preloader and intro animation, then timelines/media query watcher goodness and lastly misc helpers/stuff. However this has been for single pages with tons of scroll based animations. I've recently figured out how to use barba.js with wordpress and am now trying to figure out best approach to structure all this for multiple pages with animation. I generally am just building eye candy websites and dont use vue, react or angular. Should I just have one massive js file? Should it be broken up into a few different files? Should those files be broken up based on functionality? ie: scroll.js, gsap.js, misc.js, barba.js I will assume like most code related issues there is many ways to skin this cat. Mostly looking to see how the big boys do it and incorporate the parts that make sense to me. Any pointers or suggestions will be greatly appreciated

If you want to fire a function 1 second after resizing has stopped you could do console.clear(); var tween = TweenLite.delayedCall(1, update).pause(); window.addEventListener("resize", function() { console.log("resizing") tween.restart(true); }); function update() { console.log("resize stopped 1 second ago so let's update") } open the console: