Leaderboard

here is a quick one you can add any effect you want or play with the other options, just 5-10 min to take a look at the seamlessloop documentation and you're ready https://codepen.io/ahmed-attia/pen/RwOpyVX?editors=0011 you can check Carl's courses here and GSAP3 Express is free by the way https://www.creativecodingclub.com/bundles/creative-coding-club https://www.creativecodingclub.com/courses/FreeGSAP3Express

We don't typically provide custom solutions like this in these free forums, but I was curious about this and decided to clean up your demo for you: https://codepen.io/GreenSock/pen/GRLWvGp?editors=0010 I assume that was what you're looking for, right? You just had various logic issues and overcomplicated things a bit in my opinion. 🙂 I hope that helps!

Thank you very much Rodrigo! It works great now, and I learned a couple of things new. 🙏🏼

Hi @Iischeese welcome to the forum and thanks for being a club member! We love to see what you can come up with in a minimal demo so that we can beter understand your thought process and thus better help you understand the tool. Above are some links to Stackblitz templates so that you can directly work in your frame work of choice. (here is the Next.js version) I've written a guide how you can create these kind of card stacking effects, see the blog post here. And a demo below that uses that logic with a similar effect that you want. If you still need help please show us what you've tried in something like Stackblitz and someone here will be happy to point you in the right direction. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/abMbwYd

Thanks so much Cassie! I made a small change to the script so that it can intercept the data-attribute and an array to insert multiple words at once. https://codepen.io/qurtopianodesign/pen/VwNpNyN?editors=0011

If you'd like some help beyond @Cassie's excellent advice, please make sure you provide a minimal demo and be more specific about what exactly is going wrong. You said "...inadvertently disrupted other animations..." but I have no idea what that means exactly. And "scrolling behavior became erratic" and "...unusual behavior even within the parallax feature...", but when I tested in the original demo you provided, I saw no problems whatsoever on my iOS device. What happened exactly and how can we reproduce it on our end? You might also want to try this in addition to the normalizeScroll(true) option: ScrollTrigger.config({ ignoreMobileResize: true }); And are you using the latest version of all the files?

Hi there! Almost there, you just need to check within the loop if the word has the data attribute that you're after, if so you can add a different tween to the timeline. https://codepen.io/GreenSock/pen/XWQMQdz?editors=0011 Hope this helps!

I have triple checked the code for any inconsistencies and no lazy loads are on the page or the website entirely to be exact. Hopefully I'll get you a sample in codepen soon. Thank you for you time either way!

Really helpful answer thanks @Toso 🥳

Honestly my first step here would be to use transforms instead of backgroundPosition, that'll be easier on the browser to render. Give this one a go? https://codepen.io/GreenSock/pen/JjVWmJj?editors=1010 debug link for mobile If that doesn't work, then maybe try smooth scrolling and transforms, (with the caveat that it's not a magic bullet and may not be appropriate for your project, it's a very aesthetic choice and I wouldn't add smooth scrolling on a website without consideration of the tradeoffs. E.g - You'll need to adjust your markup to allow for fixed elements to be outside of the smooth scrolling area https://codepen.io/GreenSock/pen/jORBeKe?editors=1010 debug link for mobile If those options don't work it's time to face the reality that sometimes animations can be a little much for mobile browsers, safari makes our lives difficult sometimes. I often remove certain animations or create more simplified fallbacks for mobile. You can do that nice and easily with gsap.matchMedia() https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ Hope this helps!

Hi, Try removing the lock file from your repo and pushing that again and see if the installation works. If that doesn't work you'll have to add your privjs token to the .npmrc file in order to install it for the first time, then you can remove the token from the .npmrc file and it should work for future deploys. Hopefully this is a private repo so your token doesn't get exposed. Hopefully this helps. Happy Tweening!

No, is totally fine to keep everything in a single timeline if you're carefully. In this particular case is better to move some animations out of the timeline. Is not a rule carved in stone is a case-by-case thing. Every project has it's own peculiarities and you should plan and develop them as you go based on the requirements of the project. In this case you can keep your timeline with the scrub in it just, instead of adding the menu part at the end, remove it and make that a different timeline, then you can use the onLeave and onEnterBack callbacks to play/reverse that timeline and then you can also reverse that timeline when clicking the buttons as well in order to hide that menu: // Timeline just for the menu elements const menuTimeline = gsap.timeline({ paused: true, }); // Add animations to the menu and buttons timeline const tl2 = gsap.timeline({ scrollTrigger: { // other configs scrub: 1, // use callbacks to play/reverse the menu timeline onLeave: () => menuTimeline.play(), onEnterBack: () => menuTimeline.reverse(), markers: true // shows the markers } }); // Then in your menu buttons btn.addEventListener("click", () => { menuTimeline.reverse(); // Then create other animations as well }); From the ScrollTrigger docs: onLeave Function - A callback for when the scroll position moves forward past the "end" (typically when the trigger is scrolled out of view). onEnterBack Function - A callback for when the scroll position moves backward past the "end" (typically when the trigger is scrolled back into view). Right now I'm on my way out so I can't take a good look to your demo, but hopefully this helps. Happy Tweening!

Thanks for your thorough response. I got it fixed now.

Thank you sir for doing it. You made my day. This is the exact thing, I was looking for.

Something like this: const tween = gsap.to(boxes, {yPercent:-50, repeat:-1, ease:"none"}); tween.timeScale(0); const eased = gsap.to(tween, {timeScale:1.5, duration:4, ease:"power4.in"}); Happy Tweening!

thank you glad you like that switch button 🙏 🫡 I found an old demo that may help, i cleaned all unnecessary code and created a repo https://github.com/Toosoo/laptop ps: the demo was created when I started Bruon's course so i left the i frame of his website as we did in the lesson and added the scrollTrigger animation to it i would highly recommend checking the course https://threejs-journey.com/ hope it helps

Hate to bump an old thread, but in case anyone else is led here by Google, the trick is to exclude GSAP from Vite's SSR bundler. This was enabled by default in SvelteKit and gave me a greasy headache as well. Here's the fix: // vite.config.ts import {defineConfig} from 'vite' export default defineConfig({ // --- ✁ snip ssr: { noExternal: [ 'gsap', '@gsap/shockingly', ], }, })

I think you might be over-engineering there. Normally we don't craft custom solutions like this in these free forums, but I was curious so I whipped together a different approach you could take: https://codepen.io/GreenSock/pen/jOvgrMG?editors=1010 Hopefully it at least gets you going in the right direction.

Hm, got a minimal demo? Did you kill() the old normalizer? Or are you trying to have it normalize two totally different targets simultaneously? Try this: // save the instance so we can kill() it later... let normalizer = ScrollTrigger.normalizeScroll({...}); // then later, kill() it: normalizer.kill(); // and then create your new one... normalizer = ScrollTrigger.normalizeScroll({...});

Hey @Carl Thanks so much for the input! That looks really nice and I just learned that there is a thing called wrap, amazing ? My website always has a burger menu, so it doesn't change hight on resize (and it has no background color, so I need to change the logo to stay visible) I've experimented a bit further myself and here is a solution that seems to work with reading out hsl values: https://codepen.io/tisign/pen/OJEoyVx For anybody seeing this, I take no responsibility regarding efficiency (Not because of GSAP, I just don't know what I'm doing ?), I myself am gonna use the color version, as I only use three colors on my site. Ouh, and it doesn't work without background color and/or transparent backgrounds.

Hi @ti-sign Very nice of you to stop in and offer up this example. It's always interesting to see how folks approach challenges like this. I really can't say there is anything wrong with what you did and certainly no "immediate stupidity" ? I came up with this approach in my lessons https://codepen.io/snorkltv/pen/wvqjmQq?editors=0010 The short explanation is that I store the section and nav colors in separate arrays. If you open the demo in a new window and resize you'll see the height of the nav can change size and yet the nav color always changes exactly when a new section hits the bottom of the nav. Perhaps you or someone else will have fun experimenting with this technique as well. As far as dynamically reading HSL colors to decide the appropriate nav color, that's not something that would come quickly to me, but it doesn't mean it isn't worth exploring further. Thanks again!

Removing normalizeScroll might help. It's a setting that can provide some value for some use cases but hinder others. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

@grommas ah yes, some browsers still handle those scroll event paints on a different thread. Okay, so I'm experimenting with making it possible to normalize the scrolling of a particular <div> like this: ScrollTrigger.normalizeScroll({ target: ".vertical-1" }); Seems to work relatively well from my early tests - would you mind hammering on it? Here's the beta file of ScrollTrigger with this capability: https://assets.codepen.io/16327/ScrollTrigger.min.js