Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

akapowl last won the day on May 10

akapowl had the most liked content!

akapowl

Moderators
  • Posts

    1,639
  • Joined

  • Last visited

  • Days Won

    80

Everything posted by akapowl

  1. Hello @Maddy - welcome to the GreenSock forums. I'm not familiar with Angular at all, but it sounds like you are in an SPA-environment, and the fact that you are seeing the markers multiple times is a sign for you probably having to kill all the old ScrollTriggers when leaving a page and then create them from scratch when you enter the new page. This is from an article on the most common ScrollTrigger mistakes: If you have a single-page application (SPA; i.e. a framework such as React or Vue, a page-transition library like Highway.js, Swup, or Barba.js, or something similar) and you use ScrollTrigger you might run into some issues when you navigate back to a page that you've visited already. Usually this is because SPAs don't automatically destroy and re-create your ScrollTriggers so you need to do that yourself when navigating between pages or components. To do that, you should kill off any relevant ScrollTriggers in whatever tool you're using's unmount or equivalent callback. Then make sure to re-create any necessary ScrollTriggers in the new component/page's mount or equivalent callback. In some cases when the targets and such still exist but the measurements are incorrect you might just need to call ScrollTrigger.refresh(). If you need help in your particular situation, please make a minimal demo and then create a new thread in our forums along with the demo and an explanation of what's going wrong. For how to kill them, have a look at this answer... ... and maybe this thread can help when it comes to specifics of Angular.
  2. That is very much testable. The pen below has HTML and CSS from this bootstrap 5 example (and it loads bootstrap css 5.1.3 - not the js though). The only thing that comes to my mind that would make it be deemed as 'not compatible' is that bootstrap tends to add scroll-behavior: smooth which could likely interfere with ScrollTrigger/ScrollSmoother in some way (and definitely will interfere with the ScrollToPlugin). But it looks like ScrollSmoother automatically sets scroll-behavior: auto; inline on the body, so not even that you'd need to worry about. https://codepen.io/akapowl/pen/VwQbEqe
  3. Well I don't think there is a need to delete them now, but if you insist I can still do that for you. Edit; ...and apparently it is done already
  4. Yep, ST was just short for ScrollTrigger It is nobody's intention to not answer somebody. Except for the Admins who do have a great deal of work with crafting the tools, maintaining the website, creating learning-content etc. etc. besides answering questions here, it is widely volunteers helping people in this forum, who also do have work to do outside of it - so if it takes a bit longer for someone to reach out to you, please don't create duplicates but instead be a bit patient. Close to not a single question has remained unanswered (at least from what I can tell since I've been around here), but it simply just is not possible to reply to everybody sometimes even within one day. Creating duplicates of the same question will only make the helpers lose overview in the end, and things might even take up more time. Like now, I'm not sure which other thread of yours you are referring to. This one...? ... or this one? To answer the question why your markers are moving up there; it is simply just because you are scrolling down and that is the native flow of things and ScrollTrigger's markers will not be somehow stuck to the trigger element (because that is just not how it works unless you were to use the containerAnimation property as you can probably see in the pen in my post above) but follow that native flow. I linked this thread here in your other threads to keep things in one place.
  5. Working with labels, as @mvaneijgen suggested is a good idea. And ScrollTrigger even does have a .labelToScroll() method. So what you could do as an alternative is slap some data-attribute with the label you want to scroll to on your <li>s, add some labels to your timeline, and get that data-attribute on click. You might have to adjust things a bit though. It looks like you have two tweens tweening the autoAlpha of '.content-one' to 1, so I had to remove one of them to make things allign properly with that other function of yours, that is setting the active class. That's just an idea - maybe it will be helpful. Happy tweening! https://codepen.io/akapowl/pen/abqWYjm
  6. You could just call everything you call on click of the hamburger on click of the links, but first thing you would have to prevent the default behaviour of the event and then you would also have to add some logic to delay the changing of the page - but that is nothing we can really help with, as this forum is focussed on GSAP specific questions. As a starting point, this might help. https://stackoverflow.com/questions/11510478/click-delay-before-navigating I added an eventCallback onReverseComplete of the timeline there, so the window.location = goTo to does not rely on a timeout but will be called, once the reverse of the timeline is complete. You might have to extend the logic a bit (like make things not be clickable in between etc.) Happy tweening! $('.menu-links').on("click", function (e){ e.preventDefault() hamburgerMotion.reversed(!hamburgerMotion.reversed()); $('.hamburger.active').removeClass('active'); const goTo = $(this).attr("href"); hamburgerMotion.eventCallback('onReverseComplete', () => { window.location = goTo }) }) https://codepen.io/akapowl/pen/ZErKxEP
  7. I see you already do have the containerAnimation property in there @Xenex122 You should be able do do what you want with the help of that but there will be some things you'll have to consider. If you just aplly it to those STs in the forEach loop(s) you will notice the markers having a horizontal orientation - you can ommit that by just setting horizontal to false there; now they will have the vertical orientation you'd need (and thus should the STs you are creating). Next thing is, you are mixing toggleActions with scrub - which doesn't work. Those are two different methods for how to let the ST control an associated tween/tl. If you set both, scrub will always take control. Now since you have a duration on your tweens, I suppose you want to use toggleActions - but it seems you just copy pasted those from somewhere, so you might want to read up on how those work. 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". Now if you changed just those things, you should notice the left side already working - for the right side you will have to inverse your thinking a bit though, since the elements do come from the opposite direction. I just swapped out the vaalues of the start and end (in cmparison to the values for the left side) and it appears to be working quite well already. I also decreased the duration of the tweens to 0.25, because 3 seconds felt a bit long. I hope that will help get a clearer picture. Happy tweening! https://codepen.io/akapowl/pen/zYRwRpe
  8. No worries, maybe this will help somebody else in the future. Everything that is built in to Draggable can be found in the documentation - and it pretty much has all the basics you should need to create things with it - so if something you'd need is not to be found in there, it is very likely that it will require custom logic that is beyond those basic, or will have to be individualized to fit existing custom logic of yours - just like the helper-function in the demo you posted does. Speaking of 'basics' here does feel a bit odd though, because Draggable has been out there for a long time and like everything made by GreenSock is very refined - but I hope you understand what I mean. Next time just make sure to include a demo that resembles your scenario a bit better to guarantee you get the best answer possible Happy tweening!
  9. Hello @F.D.C.H - welcome to the Forums. You could extend that helper function by a new variable - in the demo below I added startIndex = 0 up top where all the neccessary variables are being set up. In the draggables onPress you could set the startIndex = curIndex so at a later point (like on throwcomplete e.g.) you could check wether the value of the new curIndex is equal to the value of the startIndex. From outside the curIndex is accessible via tl.current() and I made the startIndex accessible via tl.dragStart() - but you could of course change the names to whatever you'd like. Of course the tl part here you would have to then exchange with whatever variable you are applying that horizontalLoop helper-function to. Then from outside you could do something like this. That's just an idea - I hope that will help loop.draggable.addEventListener("throwcomplete", log); function log() { console.log(loop.dragStart(), loop.current()) if( loop.dragStart() === loop.current() ) { console.log('Same Index') gsap.to(document.body, { backgroundColor: '#f00000', overwrite: 'auto' }) } else { console.log('New Index') gsap.to(document.body, { backgroundColor: '#111', overwrite: 'auto' }) } } https://codepen.io/akapowl/pen/KKQmPxB Edit: In this following pen the startIndex is also being set in the toIndex() function, so calling the check will also properly integrate with click on the buttons - and at this point the naming of tl.dragStart() doesn't seem appropriate anymore https://codepen.io/akapowl/pen/zYRwxBd
  10. Hi Zofia, I don't think it not working anymore is related to GSAP or ScrollTrigger but rather to how Svelte works. I'm logging out the element that you are targetting as the trigger here and except for the first load it will always target the one on the page you left and not the one on the page you are going to. I can only speak from my experience with barba.js where both 'pages' will be in the DOM at the same time for a certain duration so you somehow have to work around that when wanting to target things on the new page - this looks like it might a similar case. So you might have to find out how to target only elements on the new page in Svelte when doing transitions. https://stackblitz.com/edit/sveltejs-gsap-220222-b-dtnpbb
  11. Ha, that demo is from an old post of mine. You had to pick the one that is not working correctly, @Cassie 😅 For anybody wondering why there are those nasty jumps on scroll check out this thread, it has the answer. Here is a more minimal demo https://codepen.io/akapowl/pen/rNJymbB
  12. Hello Elvin! The way you are handling the refreshes, you are creating more and more ScrollTriggers on every refresh - that is not good. There is no need for that, as ScrollTrigger does have built in properties/ways to handle those: You will need to use function-based values on the tween alongside invalidateOnRefresh: true on the ScrollTrigger if you want ScrollTrigger to get fresh values to work with every time dimensions change. invalidateOnRefresh Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values. Also overriding the values in an eventListener on "refresh" might be too late, so you may want to use "revert" instead. When those things are changed, you'd notice, that the tween on scroll would become faster and faster everytime you refreshed, because you are making the end dependent on the container that never actually changes height, so you might want to make it dependent on the height of the element of which the size is being changed instead, to guarantee a constant 'speed' of the scrub, e.g. something like this; notice how the end here also uses a function-based value, as that value is going to change and will need to be gotten from scratch for every refresh. end: () => "+=" + news_list_wrap.height() https://codepen.io/akapowl/pen/rNJyMxz Also as a sidenote not related to your question here: You might want to reconsider how you are handling resizes. I don't think the way you have things set up now will really work well - better have a look at ScrollTrigger.matchMedia() which is built for handling exactly those.
  13. Hello @Vineeth Achari My suggestion would be to check out GSAP's new ScrollSmoother. Not only will you be able to add that smooth-scrolling type of effect like on that page you linked with it, but it will also make it very easy to implement parallax type of scroll-effects similar to those on that page. It is a plugin for Shockingly Green club-members and above - but with the time it will save you compared to creating those effects that come with it on your own, you will quickly find that it will be a great investment - and of course you will be able to also use all the other tools that come with that club-membership. So consider joining the club https://greensock.com/scrollsmoother/ Outside of that you will want to have a look at ScrollTrigger. You will find some examples here, here or here and lots of threads regarding parallax effects if you search the forums for 'parallax', like this one right here. I hope that will help - happy scrolling!
  14. I was just wondering, why that codepen of mine wouldn't work with ScrollSmoother, so I quickly reworked it - and it appears to work just fine Blake is totally right, though - It will be a lot easier thinking of this as one long animation that you can easily hook up to one ScrollTrigger, instead of creating a bunch of ScrollTriggers, i.e. one forEach of the images. Nonetheless, here is that linked example working with ScrollSmoother instead of smooth-scrollbar. https://codepen.io/akapowl/pen/jOZVrZM
  15. Yes, that looks to be the case - the box needs to be clicked in the demo below. This should be helpful, too... https://greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTo() ...and this in particular https://codepen.io/akapowl/pen/LYQRKRr
  16. Welcome to the GSAP forums @yasurev86 That is probably because by default there is an ease of 'power1.out' set to all gsap tweens. Setting the ease to 'none' should resolve this for you. By the way, there is no need to wrap the property you are going to tween on in quotation marks. https://codepen.io/akapowl/pen/gOvwgKp Edit: And in most cases, it is best to tween on transforms instead of top/left/bottom/right because those will most likely cause pixel-snapping, whereas transforms usually won't. https://codepen.io/akapowl/pen/dydpNqE Edit 2: I'm not exactly sure I understand what your end-goal is with this, but you could also keep the inner in place by pinning it. https://codepen.io/akapowl/pen/gOvwgZP
  17. Great that you've got it working! I was able to reproduce the issue shown in your video from your codepen demo - but very irregularly. In your demo the scrollHeight of the body was definitely still changing (only visible if the .dummy was tall enough to overflow the window - like it is in the previews here) - so if there were still any issues with that regard, you would probably still want to apply a wrapper with hidden overflow to that .dummy in a similar fashion, too. After doing that I couldn't reproduce the jump of scrollPosition on load anymore at all. https://codepen.io/akapowl/pen/KKQgNpY
  18. Hello @Ehsan.shv To me it looks to be working just how the ScrollTrigger is set up - starting when the container's top (which is your trigger) hits the top of the window. You can see that a bit clearer, when setting a background-color on the .parallax-image container and increasing the yPercent values of the tweens a bit. But maybe I'm just misunderstanding your question? https://codesandbox.io/s/strange-fermat-tyogs9?file=/src/ParallaxImage.tsx Edit: Oh wait, the default on non-pinning STs actually is 'top bottom' - so something definitely seems to be off here. Even when explicitely setting the start to 'top bottom', it still starts in 'top top' 🤔 Sorry for the confusion. Unfortunately I myself am not a React guy, so we'll have to wait for someone who is a bit more React savvy to jump in. Thanks for your patience!
  19. That sounds to me like you just might need to set overflow to hidden to one of your containers/wrappers to prevent potential overflow that is being created when your breadcrumb is being set to y: 20 (where it is supposed to tween from) from adding to the page's scrollHeight. But it is really hard to tell without seeing things in context of your HTML/CSS. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use.
  20. Welcome to the GreenSock forums @HimanshuW You are actually making one of the most common ScrollTrigger mistakes, nesting scrollTriggers in individual tweens of a timeline. How to best do it really depends on where you are going with this in the end, but if this one simple fade-in and then fade-out is all you are up to, then you could just do it like this - notice how there is only one scrollTrigger on the timeline object, which is the way to go with scrollTriggers on timelines: https://codepen.io/akapowl/pen/poabpOB
  21. Welcome to the GSAP forums, @Wiktoria Under the premise of how mikel's example works, I'm not sure if it would even be possible to get it working with centered text-align via tweening on the width, unless you were to wrap every single word in a div and set up a span inside every of those divs. I might be wrong, but I couldn't get it to work otherwise. I might very well be wrong though. https://codepen.io/akapowl/pen/zYRqbwm Now since that could/would potentially lead to a ridiculous amount of divs and spans with more text, like in your case, you might be better off just creating that effect by tweening on clip-paths instead. I hope that will help. Happy tweening! https://codepen.io/akapowl/pen/VwQaRGL
  22. Hello @DK7 - welcome to the GreenSock forums. As the docs state wih regard to containerAnimation, pinning things in this scenario will not be possible containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling [...] Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. However what you could do as a workaround, is counter-tween the x of the heading to the right for the same amount that the container is being tweened to the left - you will need to calculate that amount with regard to the point of entry of this fake-pinning-tween and how much of the scrolling-distance will be left - which would then nullify the movement and thus keep it in position. Sort of like this: https://codepen.io/akapowl/pen/BaYKMrB With regard to the fading-in of words on scroll: These forums can not offer custom-code solutions for all sorts of effects, but if you get started with that yourself and run into any issues, we will be glad to point you into the right direction. Best create a new thread for any seperate specific questions then. What may be helpful for splitting the text into seperate words in the first place, that you can then set up STs for to tween on to your liking, is the SplitText Plugin. Good luck and happy tweening!
  23. Hello @Lance Woolf - Welcome to the GreenSock forums! You will need to loop through all your '.row's and for each of those create the timeline and add the eventListeners, targetting only those elements within each '.row'. Something like this: https://codepen.io/akapowl/pen/qBxZQpz Edit: Some quick sidenotes/tips: eases don't go directly into the timeline object - they belong either on the individual tweens, or in the defaults of a tl with a duration as short as 0.1 you will not see much of the bounce ease as things will happen just too quickly instead of setting the position parameter to "-=0.1" to have both tweens play at the same time, you could also just use "<" which tells the second tween to start at the same time that the previous tween does. That way you wouldn't have to change the position parameter everytime you changed the durations https://codepen.io/akapowl/pen/oNExJvb Edit 2: Here is an extra bonus tip: You will notice now when reversing the tl on mouseleave, the bounce ease might not look very appealing. So if you wanted the bounce to always happen at the end of every event triggering the animation, you would have to tackle things a bit different, like e.g. tween on the progress of the timeline on mouseenter/mouseleave with the desired bounce ease, and have an ease of none set on the actual tweens themselves. https://codepen.io/akapowl/pen/eYVZbNo
  24. Just wanted to quickly also address this problem you are having. It is related to you tweening on the y of containers that are parents of the element that you want to pin. Since there will still be transforms set inline on those elements when they are done animating, those transforms will change the context for the position: fixed that is being applied for the pinning on mobile. So you will need to make sure there will be no transforms set on any parent of the element you are going to pin or else things will not behave as they should. You can do so by e.g. using clearProps. I just quickly threw it onto that tween of your tlLoaderOut timeline to show the difference it makes, i.e. that now after load things will pin properly on mobile. You will likely want to do something similar for the tweens that handle your transitions in between pages. tlLoaderOut .to(loader, { yPercent: -100 }, 0.2) .from('.site-main', { y: 150, clearProps: "transform" }, 0.2); // <----- https://stackblitz.com/edit/web-platform-gszrpg
×