akapowl

Like this? https://codepen.io/akapowl/pen/abGYGXG

I've been tinkering with it a bit, but I don't want to judge wether this is a bug or not. One thing I found is that if you do not set box-sizing: border-box inline (as in 1.: deactivate it via dev-tools or 2.: alternatively overwrite/clear it in a refresh callback and refresh the smoother instance) on the pin-spacer of the first ScrollTrigger it appears to work as intended by @thei. Maybe this can serve as a workaround for now and if this atually is a bug, help find the root of the problem. Works for me in both, the OPs codepen and @Cassie simplified demo. https://codepen.io/akapowl/pen/rNvJXbd https://codepen.io/akapowl/pen/xxjWxRV

Welcome to the forum @tahirw I'm not sure if there is a dedicated method for that, but what you could do is use the .iteration() to determine wether the yoyo is moving 'forwards' or 'backwards'. // e.g. in an onRepeat callback onRepeat: function() { if (this.iteration() % 2 === 0) { console.log('yoyo is moving backwards') } else { console.log('yoyo is moving forwards') } } https://codepen.io/akapowl/pen/XWqZwyw

Hello @kovle I think that's a logic issue you are having - as you are hit-testing on a jQuery object that contains multiple elements, similar to an array/nodelist, it will probably only ever target/work on the first element in that list, so you will probably have to modify things to be targetting specific elements instead. Since you appear to want to have the hit-testing on each of your elements in the drop area, you could e.g. do that with an each-loop. I'm not sure how heavy this will be on the performance in the long run, as it will be happening for each of those elements on every drag-event, but this seems to work much more like what I understood you want to happen. onDrag: function(e){ const dragged = this drop_area.each(function(i,el) { if(dragged.hitTest(el, hit_detection)){ $(el).addClass("hit"); }else{ $(el).removeClass("hit"); } }) }, https://codepen.io/akapowl/pen/mdLXgqY Since it looks like you were mixing vanilla JS with jQuery a bit in that example of yours, I just wanted to mention that of course you could also do all that without jQuery involved - but that is up to you of course. Here is that example with the latest GSAP / Draggable in vanilla JS. https://codepen.io/akapowl/pen/GRdQaqo

Hello @Akamiaxx Actually, I think it does provide that. https://greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTop() https://codepen.io/akapowl/pen/wvjyreq

Hello Sascha. You will probably have to put the key in your tween in square brackets. https://stackoverflow.com/questions/11508463/javascript-set-object-key-by-variable Like this https://codepen.io/akapowl/pen/oNdEGvr

Hello there, welcome to the forum. It's really tough to really understand your problem without a minimal demo - those also make it a whole lot easier to give proper advice. When applied like this, you can see there are 3 bounces in and 3 bounces out - maybe this will help already (more on that in the thread linked below). If it doesn't help, please include a minimal demo of your own for us to tinker with. https://codepen.io/akapowl/pen/eYVZbNo

Welcome to the forum, Lorenz. Yep, as it says in the docs ( see Special Properties > ease ) there actually is an ease applied by default. If you want no ease to be applied, meaning tweens to be linear, you need to set ease: 'none' ease Controls the rate of change during the animation, giving it a specific feel. For example, "elastic" or "strong.inOut". See the Ease Visualizer for a list of all of the options. ease can be a String (most common) or a function that accepts a progress value between 0 and 1 and returns a converted, similarly normalized value. Default: "power1.out".

Might be related to this:

Welcome to the GrenSock forum! There's lots of ways to do that - and depending on what exactly you want to do, one is suited better than another. You will probably best want to look into either timelines or callbacks (everything starting with on... in the Special Properties section of the docs). https://codepen.io/akapowl/pen/KKRXYXo

Not that I know of at least; but maybe somebody else knows better. What you could also do is just take that section with the fixed background out of your .wrapper - since the pin starts 'top top' of the next section anyway, you wouldn't notice any visible difference with regard to the pinning. https://codepen.io/akapowl/pen/ExLwmYj

Hello Jacky. That is the case because you are later pinning the .wrapper that contains everything, so for the pinning to work reliably it gets quite some properties applied - amongst those are transforms that are being set to 0px on X and Y. And position or background-attachment fixed on elements that have an ancestor with transform applied, don't work the way they 'usually' do because the context changes. One way you could ommit that from happening is to set transform to none !important on the .wrapper yourself via CSS - although I'm not sure if if this really is recommendable as I don't know if or in what way this might interfere with ScrollTrigger's pinning later on, or in other scenarios. Other than that you will probably have to find a different styling / layout solution for your elements, working around not being able to use fixed position or background-attachment in this scenario. https://codepen.io/akapowl/pen/rNvzXoX

Hello there. The posts linked in this thread should be helpful to get the panel-reveal to work with sections taller than 100vh. If you then still need help on adding anchor links to it, please provide an updated demo with what you have tried so far.

While you clear the timeline on that breakpoint (meaning you empty it of all the tweens, timelines, and callbacks it contains), I suppose the timeline instance itself, which has the ScrollTrigger with the pin (!) attached will be present no matter what the viewport size is because you created it outside of any matchMedia call beforehand - so you will probably want to change that. Does that work more like what you intended? https://codepen.io/akapowl/pen/dyezGJO

If I understand correctly what it is you want to do, transformOrigin will not be helpful here, @amit95 Instead, you might want to use the stagger as an object, so you can define its settings in more detail. I changed the stagger of your closing tween to this e.g. // old stagger: .2 // new stagger: { each: .2, from: 'end' } So, did you mean like this? https://codepen.io/akapowl/pen/gOzxPgx

Hello Marty, welcome to the forum! Smooth-scrollbar.js is not a GreenSock product, so support for it is not really offered here - and I think your attempt of combining it with ScrollTrigger mainly doesn't work because of not implementing it properly in the first place. So that would be something you might want to read up on over on their end. If you want the whole page to scroll smoothly, you'll need to set it up wrapping / working on the whole page, not just a portion of it. https://idiotwu.github.io/smooth-scrollbar/ https://github.com/idiotWu/smooth-scrollbar https://github.com/idiotWu/smooth-scrollbar/tree/develop/docs Additionaly you'll need to stick to the order of things (creation of the scrollbar-instance, setting up the scrollerproxy, creating your tweens, etc.) as it is in that example from the .scrollerProxy() docs-page that you included. That said, Greensock has its very own smooth-scrolling solution with ScrollSmoother that of course is much easier to combine with ScrollTrigger - but it is for Shockingly Green members and above, so maybe you'll want to consider joining the Club. Here is your fake-horizontal-scrolling pen with ScrollSmoother included. https://codepen.io/akapowl/pen/JjvJLde Also, here is an older fake-horizontal pen of mine using smooth-scrollbar.js to give you an idea for how to get started if you still want to go the 3rd party library route - maybe it will help. https://codepen.io/akapowl/pen/xxqxaQE ...and here it also is in a ScrollSmoother version. Scroll responsibly and happy twenning! https://codepen.io/akapowl/pen/OJZgvwp

Hello Jacky, since you are creating the first sets of your ScrollTriggers in forEach loops at the beginning of your code, they can not know about the pinning that is being created later in your code - and because some of those elements you target appear on the page after the pinning happened, they won't trigger where you'd want them to. So you will probably have to add the pinnedContainer property to those ScrollTriggers too, for them to work as expected after the pinning occured on the page. Also it looks like you'd need to add a refreshPriority to those for them to work properly even after the second time you pinned the wrapper. You can read more about that in the general ScrollTrigger docs... refreshPriority number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to ...and in the docs for the sort() method. Hope this will help. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort() https://codepen.io/akapowl/pen/oNdYvWX

Actually on that website (you meant about-us, right? ...looks like you forgot the hyphen) the section doesn't animate at all for me on desktop, and while it does animate on mobile, it gets triggered way too late. But debugging live-websites is not really within the scope of this forum, as there is too much involved apart from GSAP, so I can't really help with that - just thought I'd let you know. Also, your codepen doesn't reflect the issue you mentioned, so this will be more of a guess of mine for now. What you could do with regard to sections overflowing/intersecting, is set pin: true instead of pin: '.grid' - which will then pin the .grid-container that is set as the trigger and should help with pin-spacing being applied properly. With regard to the overflowing, in CSS you could set overflow: hidden on that .grid-container and maybe an additional overflow-x: hidden on the body could also be helpful. https://codepen.io/akapowl/pen/rNvOzoO I'm not sure how helpful this is going to be for you though, since I can not really make out what the issue is on your website. Some additional sidenotes: If you have additional questions that deviate from your original question, usually it's best to create a new topic for those, so other users that might run into the same problem can easier find help and benefit from your question asked, too. I saw that you were using the latest beta files from the codepen demo for both GSAP and ScrollTrigger on your website. I would suggest not doing that when you are going live with that website, since those are beta files after all, so they get updated frequently and might introduce breaking bugs to your website. Here's where you can find CDN links to the latest versions, that you can include just like you did before https://cdnjs.com/libraries/gsap

Here's an idea for how you can approach this @Ficus Media Set up a ScrollTrigger that starts at the top of the page and ends the height of your headline/logo after that. Over that distance scrub a tween, transforming each of the letters upwards by a certain amount multiplied by a certain value you wish for its 'speed', stored in e.g. a data-speed attribute of each letter. I chose the height of the title itself in this demo as the 'base value' for the y transform and multiply it by that data-speed attribute of each letter - the higher the value you choose as your basis, the faster it will move up of course. Maybe this can get you started. If you have still have any questions, it would be best to create a new topic and add a minimal demo, that makes it easier to help. Happy tweening! https://codepen.io/akapowl/pen/abGOebz

Try setting overflow to hidden !important on the data-scroll-wrapper for the case that locomotive-scroll smooth-scrolling is active. .has-scroll-smooth [data-scroll-container] { min-height: 100vh; overflow: hidden !important; } https://stackblitz.com/edit/web-platform-ukzmm8?file=index.html,styles.css

Hello Anna, welcome to the GSAP forum! In JS, instead of the line that sets the random image from lorem picsum, you could create an array with all your image-urls and then adjust that image-setting line to target the element with the respective index, like so maybe: // instead of this.. gsap.set('.gridBlock', {backgroundImage: i => `url(https://picsum.photos/${size}/${size}?random=${i})`}); //... you could do this for your pre-stored images const imageArray = [ 'url(https://picsum.photos/id/231/400/300)', 'url(https://picsum.photos/id/232/400/300)', 'url(https://picsum.photos/id/233/400/300)', 'url(https://picsum.photos/id/234/1600/1200)', 'url(https://picsum.photos/id/235/400/300)', 'url(https://picsum.photos/id/236/400/300)', 'url(https://picsum.photos/id/237/400/300)', 'url(https://picsum.photos/id/238/400/300)', 'url(https://picsum.photos/id/239/400/300)' ] gsap.set('.gridBlock', {backgroundImage: i => imageArray[i] }); Then you'll probably also have to change the bigImg url to e.g. the url of your largest image, so the 'pre-loading' type of functionality of that pen will still work out as intended. https://codepen.io/akapowl/pen/oNdXpOE Or, since after all, all that line does is set a background-image to the respective div-element, you could just do it manually via CSS instead. .gridLayer:nth-child(1) .gridBlock { background-image: url(https://your.url/image1.jpg) } .gridLayer:nth-child(2) .gridBlock { background-image: url(https://your.url/image2.jpg) } ... https://codepen.io/akapowl/pen/VwxLybz

You can; have a look at gsap.matchMedia() It was added in GSAP 3.11 and replaces the older ScrollTrigger.matchMedia() from now on. Here is an example with ScrollTrigger from the collection over on codepen. https://codepen.io/GreenSock/pen/KKoMpMv

Hello @soma That probably is because you are feeding the NodeList you stored in your triggerElement variable as the trigger-element into each of your ScrollTriggers - the NodeList is not a single element, so when you do that it will probably always only just refer to that first element in that NodeList and take that as the trigger in every case, which would result in the behaviour you described. So I would say this is more of a logic problem you are having, not really related to GSAP. Instead you'll probably want to get that one specific element that you need as the trigger in every specific case of the each-loop. I don't know how you have things set up with regard to your html markup, so I can't really give you any solid advice on that unless you add a minimal demo of some sorts, but if the trigger is a parent of your data-txt-wrapper, in jQuery you'll want to use $(this).parent(selector) or maybe $(this).closest(selector) and if it is a child, use $(this).find(selector) siumilar to what you did for the listTxt Maybe this will help already - if it doesn't, please add a minimal demo that makes it easier to help.

Hello there @sscash It looks to me like the following is your problem: toggleActions determines how ScrollTrigger is supposed to handle the playstate of your animation onEnter, onLeave, onEnterBack and onLeaveBack - these are the parameters of toggleActions in that order. Now you tell ScrollTrigger to play the timeline onEnter but then onLeaveBack (when your element passes the start when scrolling back up) you tell ST to reset it to what it was before the tween started. So you will probably want adjust your toggleActions so it doesn't do that. This is from the docs. If it doesn't help, it would be best to put together a minimal demo, that will make it much easier to help. toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". And here is a codepen demo for better visualiziation of the concept https://codepen.io/GreenSock/pen/qBrRaeX

Welcome to the GSAP forum! Since your .container__content has position: fixed anyway there really isn't much use pinning it with ScrollTrigger - since it is already fixed - and I think this is also where your problems originate. The only thing in your scenario that would need to be pinned is your .container__bg, which also makes sense to be used as the trigger element for the text going the other direction. If you need mulitple animations to be triggered at the same time and/or scrubbed along the exact same distance like you would here then, best just use a timeline instead of setting up multiple ScrollTriggers, and use the position parameter to tell GSAP that they should both start right away. https://codepen.io/akapowl/pen/MWGWezY