Leaderboard

I would probably take an entirely different approach, like a recursive function call: https://codepen.io/GreenSock/pen/MWxVLdB?editors=0110 Since you've got all the items initially positioned in the upper left corner of that container, you can randomize the x distribution like: gsap.utils.random(0, wrapper.offsetWidth - item.offsetWidth) Is that what you're looking for?

I've restructured your setup a bit and used different triggers elements, removed your pinning ScrollTrigger and used function based values (these get recalculated on ScrollTrigger.refresh(), which gets called if the screen resizes) If you set up your trigger element and the start and end triggers correctly this is not needed. Correct, either the whole ScrollTrigger gets scrubbed or none of it does. You can, but that will require a lot of extra setup and thinkering, but if you're confidant in your skill you could surely get that to work. Personally I would just add labels to your timeline and then tell ScrollTrigger to snap to those labels, no setup required and will kinda create the same effect. See the docs for more info. https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Again everything is possible with GSAP, you just have to put in the time and effort to get it to work. There are a lot of features build in to the tools and if you check the docs they all get explained. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. So if you're set on getting it they way you want, give it a go, but keep in mind there is only so much we can give support of on these free forums. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/xxBjbNW?editors=0010

Hello there. To me this actually sounds a lot more like it might be an issue with your webpack configuration than anything related to GSAP. Which also makes me wonder, why you provide an example using vite, when you are actually using webpack in production 🤔 Below is an example that shows it working across multiple files. I just had to make sure to properly set the entry in the webpack configuration to an array of the pages I wanted to be bundled instead of just the default single file reference - because else webpack of course won't even know other js files you want to include do exist. Also since I wanted to access something stored in a variable in one file from another file, I needed to export it from that one file I created that varaible in, and import it in that other file I wanted it to be accessed in. That is just a small console.log of the smoother variable in header.js - but ScrollSmoother itself will still work without importing it there. Maybe that can help get you started finding the problem in your configuration. https://stackblitz.com/edit/webpack-webpack-js-org-fzollb?file=src%2Fmain.js

What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you understand the tools! Here I've created an extra ScrollTrigger that lists your requirements and then snaps to the that ScrollTrigger progress of 1 eg 100%, the snap value has a lot more settings, so be sure to read the docs everything you ever want to know (about ScrollTrigger) is in there! https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOEeNGG?editors=0110

You can change their duration to something smaller then the tweens with other durations. If you have more questions that is all fine, but try forking some code here and modifying it your self, that is the best way to learn! And when it is not working just post back here with the link to the Codepen what you've tried, that way we can see your thought process and thus better help you understand the tools. https://codepen.io/mvaneijgen/pen/GRexyxe?editors=0010

Thank you for suggesting recreating the issue, I found it and fixed it during the process.

This is a lovely video explaining toggleActions from @Carl

Seems like codepen is having some internal server issues as this pen won't load for me currently, but I'm dropping it here anyway as they'll hopefully fix it soon. If you're looking for horizontal and vertical scrolling sections, this is the demo for you! https://codepen.io/GreenSock/pen/YzgaJBy

Hello fellow GSAP-💚-loving friends! My name is Emmanuel Ulloa and I'm a Banner Developer with more than 20+ years of experience in the field (yeah I do remember the Pointroll action figures like Fatboy and Badboy that represented banner sizes) and also I've been working with GSAP since TimelineMax and TimelineLite (although my favorite always will be TimelineTiny, it always allowed me to squeeze the whole .swf under <40 kb). Today my employer let me go and I'm looking for the next opportunity. I'm a certified Doubleclick and Flashtalking developer and have also worked with other platforms like Sizmek. Although I'm located in beautiful Costa Rica 🇨🇷🌴🦥 I can work remotely with anybody around the world 🌐 (as long as you speak English too). My everyday job is taking art files (Photoshop, Illustrator, Sketch files) and turning them into animations for your Rich Media networks. If you are interested in my profile please visit me at https://www.linkedin.com/in/emmanuelulloa/ or DM me here. Thanks for your time.

It worked. I've updated it. Thank you both!

You can use a clipPath for that, check out this guide how to setup masking in different ways.

Probably because there were multiple scrollbars on top of each other and the one you clicked on was a different one than when you scrolled over some element. ScrollTrigger uses the default viewport as its scroll container (you can change this), so if you were scrolling some random other element it would not have been hooked up to your ScrollTrigger. Glad you've solved your issue!

@GreenSock Oh this is really cool, wouldn't have thought to make a recursive function for this - very clever. Thank you, appreciate the help here!

Yes, that's exactly what I was referring to, to avoid memory leaks and the kind of behavior I encountered with my bad practice using a simple ScrollTrigger. Thanks, Cassie, for your video; I'll watch it tomorrow.

You solved my pain, thank you so much! Sorry, I am a perfectionist in details, thank you GSAP~🫡❤️

A really crude and fast example is something like this. I’ve placed some comments in your JS to better explain things, please be sure to read through them! I've also changed some of your CSS so that every card has the same styles and sits right on top of each other. The ScrollTrigger code is commented out, but you can easily turn it on to see how it would work on scroll Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/BabrJyv?editors=1010

While you certainly can add those calculations to the start for each of your ScrollTriggers within that pinned element as shown above by Mitchel, actually you do not have to do that. ScrollTrigger does have a built in property to do exactly that for you in cases as such: pinnedContainer https://gsap.com/docs/v3/Plugins/ScrollTrigger/ So the demos below with that property on the ScrollTriggers set to the pinned wrapping element should technically behave exactly the same as those with the calculations for the start shown above. As I see he's been sharing that one demo a couple of times before, I'll also ping @Rodrigo just to make him aware. Of course there's absolutely nothing wrong with calculating things like that, it's just a different way to achieve the same result - but why do it when you can also let ScrollTrigger handle itself [Edit: except for maybe edge cases where you'd have to add some calculations anyway]. 🙃 https://codepen.io/akapowl/pen/mdoxqNL https://codepen.io/akapowl/pen/MWxVrgw

Thanks guys for your response. 🙏

Sure, that's fine. There's nothing wrong with that code. An alternate option: panels.forEach((panel, index) => { tl.to(panel.querySelectorAll("div:first-child, div:last-child"), { duration: 1, x: (i) => i ? "-80vw" : "80vw" }, index); }); You can also simplify this: document.addEventListener("DOMContentLoaded", () => { const liElements = document.querySelectorAll(".section .panel"); liElements.forEach((li, index) => { li.style.zIndex = liElements.length - index; }); }); To this: gsap.set(panels, { zIndex: (i) => panels.length - i }); https://codepen.io/GreenSock/pen/PoLRzpE?editors=0010 Have fun!

Hi, I'm having some issues following your code. For example why are you adding a mouse move event to the window object for every image? That seems quite wasteful IMHO. Why not just one mousemove event for all the images or a mouse move event listener for every image wrapper, seems a better and more efficient approach TBH 🤷‍♂️ I think this thread provides a solid starting point for this effect, especially the posts and demos by @nico fonseca and @akapowl Hopefully this helps. Happy Tweening!

Hi @Amna A welcome to the forum! How I like to think of scale is that it has a max value and a min value where 0 is the min and the max is 1. Scaling to a value of 2000 is really hard for the browser, so what will be easier is if you create the element as big as you want it to be when it is done animating and then scale it .from() 0 (GSAP is smart and if you use .from() it will animate to the initial value in this case 1 is the browsers default) Are you maybe trying to fill the screen witha circle? Check out our own @Carl's tutorial which shows you how you can do this with some magic math values! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/YzgedWO?editors=0010

No, it's still valid for Flip.from(), for example. It's just Flip.fit() that it wasn't really a thing for past versions. 🥳