akapowl

Hello there, @thunderfoot. As Mitchel showed above, it sure is possible to implement that functionality. GSAP is a toolbox that provides all the tools that you'd need for that - combining them will come down to your creativity as a developer in the end. For getting a grip on individual plugins, the docs for sure are the right place to look, as they mainly focus on how to use each and every single one of those plugins (or the core of GSAP). But if you want to combine multiple of those tools, just having a look at the documentation might not be enough anymore. I personally (although I can not speak for GreenSock) don't think having examples for any given combination of plugins in the documentation would make too much sense, as that would bloat it up quite a bit - and it's a good thing to keep the docs as concise as possible. If you ever need inspiration for how to possibly get a grip on something that you might not find examples for in the documentation, I'd strongly suggest bookmarking GreenSock's collections on codepen. You'll find some neat examples in the showcase collections, and lots of usecases regularly asked about on the forums in the How-To Collections. This example using Draggable, for instance, is from the ScrollTrigger How-To Pens. https://codepen.io/GreenSock/pen/ZELQqeJ And this example using Observer is from the Observer Showcase. This one does include ScrollSmoother on top - but you could probably use the basic approach of the logic and re-work it slightly for useage with native scroll. https://codepen.io/GreenSock/pen/NWMxRvM You see, there are multiple options you have - finding the one that best suits your needs will be up to you, though. And depending on how exactly you want things to behave, you might even run into some roadblocks, that you'll need to work around by utilizing tools outside of GSAP or with some accompanying logic of your own, as touched on in the thread below with regard to multi-touch support. I hope this will help get you started. Stay curious and good luck with the project.

Hello @Gourav Mukhija You've already got a basis for what you plan on doing with the codepen example you provided. In the demo it is animating horizontally from left to right because you have set it up like that. I'm not sure I understand exactly what it is you want, but if you want it to animate vertically instead of horizontally, you can just tweak the values neccessary for it to work that way. Those are e.g. the rotation of the gradient from 90deg to 0deg and in your CSS as well as the JS the values for background-size and/or position to be appropriately set for it to work vertically instead - the first parameter of those always refers to the horizontal axis and the second to the vertical axis. https://developer.mozilla.org/en-US/docs/Web/CSS/background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-position https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient I just tinkered about a bit and got it working like I imagine you'd want. Hooking this up to ScrollTrigger the way you imagine, I'll leave up to you though. Good luck and happy tweening. https://greensock.com/docs/v3/Plugins/ScrollTrigger https://codepen.io/akapowl/pen/PoXEgNz

As far as I know, for performance reasons FLIP will only ever automatically target properties that are relevant for positioning of elements on the page. If you want it to also tween on properties that might not be relevant for that - such as border-radii - you'll have to manually add them as props to the Flip.getState() method. This is from the docs: Flip only concerns itself with position, size, rotation, and skew. If you want your Flip animations to affect other CSS properties, you can define a configuration object with a comma-delimited list of props, like: https://greensock.com/docs/v3/Plugins/Flip/ Does that work like you had in mind? https://codepen.io/akapowl/pen/dywZzEW

Nice catch, Mitchel - I didn't even notice since I didn't even check - the pinning just instantly worked for me nonetheless. Please in future make sure that besides the part you are having problems with on the GSAP related side of things, your demos are working / without mistakes @EVA CORPORATION. It can become quite tedious and time consuming trying to help with one thing while there are mistakes on a whole different level that go unnoticed. Fortunatelly this wasn't the case here - well, at least for me it wasn't. Also worth mentioning, that ease is not a property of ScrollTrigger - it is a property of tweens for the most part and that's where it would belong on; setting an ease on the scrollTrigger object is not where it belongs.

Hello there. Sounds to me like you want to just pin it with pinSpacing set to false (?). You'll find more information on those properties in the docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger https://codepen.io/akapowl/pen/bGOYwqv

Hello there. A way to get working what you intend is to change the eventListeners from the canvas to the window e.g. - because when it is on the canvas, pointer events will not get registered if your h1 e.g. is sitting on top of your canvas. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener change the values used in the eventListeners from e.offsetX/e.offsetY to something else like just e.x/e.y https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event Also - if you are going to use this in any form, please make sure to mention the original author of the code. He's the one who put in all the time and work into this - and he chose to distribute this for free. All he's asking with the license model he chose, is for people to mention where they got the code from - but sadly that apparently already is a step too big for people to take, in the vast majority of cases. Good luck with the project. I hope this will help. https://codepen.io/akapowl/pen/qBLPypG Edit: Since this ended up in the Jobs & Freelance forum but got replied to without the intent of that forum (and by now likely solved), I'm going to move it to the general GSAP forum, as this might be of interest for others at some point, and will probably be easier to find there; even though this doesn't make use of GSAP in any way.

Hello @cbourne This is nothing really GSAP related - and we like to keep this forum focussed on GSAP specific questions. Please just keep that in mind. Maybe @PointC's guide on how to create SVGs dynamically with JS can help get a better general understanding. https://www.motiontricks.com/creating-dynamic-svg-elements-with-javascript/ Also here's a codepen demo by somebody else showcasing how to add text to an existing SVG. https://codepen.io/kaykay/pen/XYXNwq This could then result in something like this for the earlier example within this thread. I hope this will help. https://codepen.io/akapowl/pen/rNozJOm If you want the text to appear inside the appended blue rect, you will probably need to just position it properly, as I don't think you can nest it inside the rect. Something like this maybe. https://codepen.io/akapowl/pen/vYvJdxb https://stackoverflow.com/questions/6725288/svg-text-inside-rect

Welcome to the GSAP forum @thetobiterra If you're speaking of the scroll-driven animations apple appears to be using a lot (which look like you are scrubbing through a video on scroll); they usually do not use a video as direct source for those afaik but instead a split up sequence of images (where video probably is only the source for that). There is a rather popular forum thread about that type of technique - and it appears to be linking the images directly from apple's website; so you could have a look on that. Considering this from apple's perspective though, I'm not sure how happy I would be with all that extra traffic. Just maybe one thing to keep in mind when linking directly to sources on other people's servers. If you're having trouble seeing through all those posts within that thread when trying to re-create things, you could have a look at this thread, where I explained the approach of that technique, a bit more isolated. Good luck!

Hello John. I removed the link to your public repository for now because it looks like you uploaded the gsap-bonus.tgz in there, which - if I am not mistaken - would technically allow any user to install the bonus files without any form of authorization. Please make sure to not make access to club-members bonus files easily available publically like that. I'm going to forward it to the admins though, so one of them can come and try help with your issue once they find the time.

Hi there @mhkey That likely is because you never update the values that you only set once initially via your setHeight() function. You could e.g. do so in a ScrollTrigger 'revert' eventListener. More on that in the docs. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener() https://codepen.io/akapowl/pen/rNowpwL

Welcome to the forum, BeEnder. That is because: You didn't include the pinnedContainer property as I mentioned above would be neccessary on any subsequent ScrollTriggers in the same wrapping element. You are using older versions of GSAP / ScrollTrigger (3.11.4) that might have had issues with pinning at some point. The current versions are 3.12.2 I updated to the latest versions and added the property as mentioned above and it looks to be working as intended. https://codepen.io/akapowl/pen/zYyZVyK

Welcome to the GreenSock forums, @Wolfcoding The actual source of your problem, is that you are pinning the parent-element of both the elements that you have ScrollTriggers on - thus they will both be inside the same pin-spacer element created by ScrollTrigger. The pin-spacer actually is the one thing that can make subsequent ScrollTriggers aware of prior pins - but if they both are in the same one though, that can't work as intended. ScrollTrigger does have a built in property though to adapt to scenarions where pinning is done like you do - pinnedContainer If you're going to pin that parent element of both those elements at some point you will have to make sure to set that element in that property on any ScrollTriggers subsequent to the pinning one. This is from the ScrollTrigger docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger I hope this will help. https://codepen.io/akapowl/pen/PoXWLbd

Welcome to the GSAP forum Rick. You'll probably want to have a look at ScrollTrigger its pinning feature and all the options that come with it for something like this. Then you could do something like this, e.g. I hope that will help get you started. https://codepen.io/akapowl/pen/bGOgWZm

Hello again Bjarne. It definitely is - you just need to put in some time, first and formeost to get an understanding of how things work. I see in your demo, that you tried to do something like this: Arch.setAttribute("x-271", p.x); Arch.setAttribute("y700", p.y); That will not work, because there are no attributes on SVG named "x-271" or "y700". The attribute you will need to change is the d attribute that has all the path data. You already found out by yourself that you needed to set the p.x in one place of that path data and the p.y in another - so good job on that ? Now you will just have to make sure to keep that whole string of the d attribute but only change the values in those places needed. For that you could either 'break up' the string in the places you need and feed in the numerical values you got in the right spots via concatenation... Arch.setAttribute("d", 'M100, 100 A671 671 0 0 0 ' + p.x + ' ' + p.y); ...or you could use a template literal / template string to achieve basically the same. Arch.setAttribute("d", `M100, 100 A671 671 0 0 0 ${p.x} ${p.y}`); That would then result in what you probably intended to do, right? Make sure to have a thorough look at the ressources linked. Even if they might be overwhelming at first, they will for sure be helpful for you going forward. https://codepen.io/akapowl/pen/qBLRrLG

Hello there. As the user mentioned, the onEnter callback of ScrollTrigger was what she needed to make it be triggered on scroll. Here is a codepen demo listing all of ScrollTrigger's available callbacks. What you call within them is up to you; you can e.g. play or pause some audio within these callbacks... https://codepen.io/GreenSock/pen/qBdeVJY ...like so, e.g.. https://codepen.io/akapowl/pen/qBLaoQQ You'll find information you need going forward in the ScrollTrigger docs. https://greensock.com/docs/v3/Plugins/ScrollTrigger And you'll find a whole lot of information for how to use audio in your code on the MDN Web docs. https://developer.mozilla.org/en-US/search?q=audio I hope this will help.

Hello Elicrespo. I don't think any of this is GSAP related - it's more about SVG, layout in general and CSS styling. We actually like to keep this forum focussed on questions about GSAP, but here are some pointers. If I am not mistaken, you don't see the 'orange' ball because it is set up as a mask - technically it isn't orange at all. I can not give you a proper explanation for this, but if you want it (the mask) to show what it does the other sections, you will probably have to give your .svg_40vh a background-color - in the fork below, I added the same as is on your ._100vh Maybe the MDN docs can help understand better. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask It is not - your SVG sits on top of it - you said it yourself here: For it to be clickable it is not important that the SVG sits on top of it - you are not somehow replacing your OS's mouse-cursor by moving around an element to imitate cursor movement. And actually the SVG sitting on top of your div is what makes your div not clickable because it now sits between the actual cursor and the div that you want to click on, so the OS's cursor's clicks can not get through to that element. You can see that by right clicking the area you want to click and select 'Inspect element' (or something along those lines) and it will make dev-tools pop up and in the DOM structure tree show you which element it is you have selected. To work around that problem, I set pointer-events to none on the whole SVG via CSS in the fork below, and only set them to auto on the elements that you actually need/want pointer-events - i.e. your ._100vh elements. I hope that works more like you had in mind. If you have any more GSAP related questions, let us know. https://codepen.io/akapowl/pen/xxmOoPa

I'd say: No and Yes. While my problem was similar, it was also very different, because I never needed to play my timeline from a specific point other than the start. The gist of that older thread you linked to is, that by making a shear mistake, in an older version I somehow got things to work as I intended them to work, although the methods I used for that apparently were never supposed to do what I intended it them to do in combination, in the first place. As Jack said in that thread: So the suggestions Carl made in that thread, would probably be a way to go for you to make it work like you intend. Now, in my case, technically both would have worked just fine; because as I mentioned, I only needed my timeline to play delayed from its start. But in your case, since it looks to me like you want it to play from a label at some point into the timeline, that of course won't be an option, because .delay() only ever would set a delay at/from the start of a timeline (and not somwhere in between the tweens on that timeline) - this is from the docs: https://greensock.com/docs/v3/GSAP/Timeline/delay() So the one option out of these to go with, for you would be to use a delayedCall - which is nothing but GSAP's own and very much refined version of a setTimeout() call and should always be preferred over a setTimeout when working with GSAP. https://greensock.com/docs/v3/GSAP/gsap.delayedCall() I ended up using this for my purposes back then, too - it worked as it should have, and still does. https://codepen.io/akapowl/pen/GRPZwrJ

Welcome to the forum, Bjarne! If you're going the set the coordinates via the onUpdate callback of your timeline, there is no need to also tween on the x of your line (or rather that whole group containing both your elements) additionaly - and actually that is just bound to throw things off for you because you will have two tweens update values that are relevant. But maybe you also just included that tween to showcase what you're trying to do - in this case; thanks, it helped understand your question Also, just as a sidenote - although you're not going to need it; something like an outIn version of eases doesn't exist - for most eases the available versions are in, out and inOut Now on your actual issue: If you only want to update the horizontal position of the line, you wouldn't want to update any of the y values of the line as they are supposed to stay the same as they are. But what you'll want to do instead is to also update the x2 attribute of your line (the x of where the line ends). ...and technically you already said yourself what you needed to do // So basically you just need to... // ...replace this... Left.setAttribute("x1", p.x); Left.setAttribute("y1", p.y); // ...with this... Left.setAttribute("x1", p.x); Left.setAttribute("x2", p.x); That should already do what I understood you wanted? Does it? https://codepen.io/akapowl/pen/JjwGLpP

That is a matter of logic first and foremost. Have you taken a look at the link for the utils I used in my pen that I included above? https://greensock.com/docs/v3/GSAP/gsap.utils This is what the docs say about .clamp(), the first method I use in the onDrag callback: https://greensock.com/docs/v3/GSAP/UtilityMethods/clamp() I used that in my example because I specifically did not want the moved-value to go beyond 0 in one direction and beyond the window's innerWidth in the other direction at any given point - so now it won't update beyond 0 if you drag to the left e.g . Now from a logical point of view, when wanting to have it loop seamlessly in any direction, that is exactly the behaviour that you will not want then. You'll want to allow that value to update further when you drag to the left e.g. - but you also need to wrap it around to the opposite edge of your given range once it hits any of the edge values. And there is another handy util that will do exactly that for you - .wrap() - please have a read in the docs. Here's a broken down explanation of what it does iny my own words, leaned on the explanation for clamp: It also technically 'clamps' a number between a given minimum and maximum - but with a twist. If the number you provide is less than the minimum, it will return the maximum instead. If it's greater than the maximum, it returns the minimum instead. If it's between the minimum and maximum, it returns the number unchanged. https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap() So actually for my example to become inifinitely looping in any direction, it would be as easy as replacing the method clamp() with wrap() [and of course change the frames in the .fromTo lottieTween accordingly, like you already did on your own]. That should work more like you had in mind, right? https://codepen.io/akapowl/pen/dywoEOL

Edit: I forgot to mention this before: At some point there might be other people re-visiting this thread when having issues with ST and video. Some of them simply might not want to see people in hospital beds or anything related to medical operations and for some others that might actually trigger traumatic memories to resurface which can lead to severe problems up to a point. So for the next time you have a question regarding anything media related, I gently ask you to please include some more neutral media to showcase your issue. Back on the topic from here on out: I'm not 100% sure, but I think what you're experiencing is just related to browser limitations for handling video, tbh. Have a look at this pen, it doesn't include GSAP or ScrollTrigger in any way. Clicking anywhere on the body will change the muted state of vid1 - but when clicking while the video is not in viewport, it will change the muted state, but it will also pause the video at the same time. https://codepen.io/akapowl/pen/wvRaxvP I think something like that is what is also happening in your scenario. It might work for the first video because you are animating it slightly into view before you create the ScrollTrigger(s), and when the ScrollTrigger is created the 1st video will already be slightly in view and thus it will be playing unmuted - but the second one will not be in viewport then, so it will get automatically paused. This pen sort of confirms the above. It will create the ScrollTriggers on click of the body. Here, before clicking scroll down until the second video is in view and the click the body to create the STs - you will see the video will keep on playing and become unmuted. When you scroll back up to the first video though, you will see that one has been automatically paused. https://codepen.io/akapowl/pen/wvRaxom So you might have to additionally handle playing and pausing the videos yourself via ST's callbacks to work around that limitation - that would of course make the autoplay on the videos redundant then. And I would definitely implement changes onEnterBack and onLeaveBack too, or else you may end up with two videos playing with audio at some point - which can be very annoying from a user's perspective. I hope that will help - if not, maybe someone else has better insight or a better idea. https://codepen.io/akapowl/pen/dywoKwP

Hi there, let me just quickly jump in. That is not what Rodrigo said - have a look at the syntax. And now have a look at the console.log()s in following pen. $("#vid1") // <-- This is a jQuery Object where you can not access the muted property just like that $("#vid1")[0] // When targeted via jQuery this will be the actual DOM element where you could access the muted property https://codepen.io/akapowl/pen/abPOVep Also targetting multiple elements like this won't work if I am not totally mistaken. // Not going to work like that $('video').muted = false // This will do the job $('video').each( (i, el) => { el.muted = false }) Again, have a look at the logs in this other pen. https://codepen.io/akapowl/pen/WNLvdQV This might help get a better understanding about jQuery Objects: https://learn.jquery.com/using-jquery-core/jquery-object/

Hello @thehaes That should definitely be possible... ... and sure, Observer could also be leveraged for doing something like that. What the ScrollTrigger driven example/s (e.g. the LottieScrollTrigger helper function) do in the end is just update a tween that updates the lottie-animation's visible frame via an object, depending on the scroll-position within certain parameters. What you could do with Draggable e.g. is create a proxy element that you use as the target of the Draggable, similar to how the demo for updating a fake-horizontal-scroll-tween via Draggable does... https://codepen.io/GreenSock/pen/ZELQqeJ ...and implement some logic onDrag to update that aforementioned tween setting the lottie-animation's visible frame. Here's a quick stab at some logic for that. It's not tested to the fullest and I don't know if it works how you expect it to work - so this is mainly just to get you inspired. GSAP delivers all the tools you need to create something like that. What you do with those tools and how to handle them / the underlying logic so they work how you expect them to work is up to you as a developer to find out in the end. What will definitely come in helpful is having a look at GSAP utils alongside Draggable itself. https://greensock.com/docs/v3/Plugins/Draggable https://greensock.com/docs/v3/GSAP/gsap.utils I hope this will help a bit. Happy Dragging. https://codepen.io/akapowl/pen/LYMVNxo

Yes, Nick is right ? In your case you definitely need to register ScrollTrigger because you are loading the ScrollTrigger JS first and then the GSAP JS in your demo. You could also just flip the order of the scripts to be loaded, so you load the GSAP JS before you load the ScrollTrigger JS. And even then, registering the plugin can't hurt. Welcome to the forum by the way, @uxyi

Hello Antonio. If I do not totally misunderstand what it is you're going for, I'd say your code does exactly that. The one thing that is throwing everything off in your example is that you are not using your unit for the 0 values everywhere, which you should always do because GSAP can not wildly guess which unit it is you want to use there. So just add % to your 0 values of that first tween and you should be good to go, right? https://codepen.io/akapowl/pen/KKbwZPd

To be correct, that is actually a fork of a demo of mine; this one right here. https://codepen.io/akapowl/pen/Vwppzqb Just like in fake-horizontal-scrolling scenarios, you won't be able to just pin anything because you are not actually scrolling this part of the page; and I'm afraid I don't have the time to dig into your alternative approach. What you can do instead though, is set up another ScrollTrigger that scrubs a y-tween on the heading - e.g. use the same values for the tween and ScrollTrigger's start & end, as the fake-horizontal-scrolling part uses, to make it pin/wander over that exact distance with the fake-horizontal scroll. If you want it to behave different, that is going to become quite a bit more complex and it will be up to you to properly calculate the values that you'll need for it to behave like you intend. This should help at least give you an idea for how to approach it though. Good luck and happy scrolling. https://codepen.io/akapowl/pen/JjeqZev