Jump to content
GreenSock

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

Leaderboard

  1. PointC

    PointC

    Moderators


    • Points

      345

    • Posts

      4,811


  2. OSUblake

    OSUblake

    Administrators


    • Points

      304

    • Posts

      9,196


  3. Cassie

    Cassie

    Administrators


    • Points

      215

    • Posts

      2,396


  4. akapowl

    akapowl

    Moderators


    • Points

      185

    • Posts

      1,624


Popular Content

Showing content with the highest reputation since 04/17/2022 in all areas

  1. Hey @hastalavistababy welcome to the forum! `scale` is part of the `transform` property of CSS and it does not interact with the flow of your content, so if you do want it so that elements are pushed around when things are scaled I would use the property `fontSize` https://codepen.io/mvaneijgen/pen/ExoBoaz?editors=0110 I had to change your code a bit and had to set a fixed height on the `.logo` block, otherwise the block height would get recalculated based on the font size and you want it to stay at the bottom. Also know you can use the plugin SplitText to dynamically split text on the fly no need to manually split any text https://codepen.io/mvaneijgen/pen/XWVLVLm
    7 points
  2. Let me just throw this one into the mix... ... which was based on this one by @PointC ... ... and also has some good advice by @Cassie that in the end using a clip-path might be more performat than using a mask as in the demos there. Happy tinkering!
    6 points
  3. But to do it the way you currently have it setup (no sprite sheet), you'd just make one small change. gsap.set(Div,{attr:{class:`icon${(i%2) + 1}`},x:R(0,w),y:R(-100,-150),z:R(-200,200)}); https://codepen.io/PointC/pen/popBLja/146de3244e0f33f09731512c7b81c796 Happy tweening.
    6 points
  4. I don't how familiar you are with arrays, but knowing that arrays are zero-based is key to understanding all that. Zero-based means the first item has an index of 0. So the second item would have an index of 1, the third item would have an index of 2, and so on. And think about it in terms of math. How many screen widths is the first panel away from the viewport? It's already in view, so that would be 0. The second panel is 1 screen width away, the third panel is 2 screen widths away and so on. And that's why you'll commonly see this calculation to do horizontal effects. xPercent: -100 * (sections.length - 1), We subtract 1 from the length because length is not zero-based. So if there are 5 sections, i.e. the array length, then the last section will have an index of 4. Yes, it can be confusing, but that's just how it is. First off, that section is not being pinned. What is being pinned is the trigger you set here. let tl = gsap.timeline({ scrollTrigger: { trigger: ".main-container", // this is what gets pinned pin: true, scrub: 0.1, end: "+=2000" } }) Throughout this thread, I've been trying to make it a point that you need to approach it as an animation problem and not a scrolling problem. So here's essentially what a horizontal animation would look like if you could scale it down. The red box is meant to represent the viewport of your screen. horizontal animation (codepen.io) And ScrollTrigger is very similar to GSDDevTools in that it can scrub animations. If scrubbing that animation looks fine in GSDevTools, it will look the same if we hook it up to ScrollTrigger. horizontal animation (codepen.io) So I would suggest trying to make a timeline just like I did. If it works without ScrollTrigger, it will work with it. That's a hint that you should not have any nested ScrollTriggers inside your timeline, like I see here. tl.to('.list-left ul', { scrollTrigger: { // !!! you should never have a nested ScrollTrigger trigger: '.list-left ul', start: "83% center", scrub: true, markers: true, }, ... }) See the most Common ScrollTrigger Mistakes for more information. And for the images, I would not change the src as you can't animate that. To do a crossfade you need to have all the images inside the DOM, and then absolutely positioned on top of each other.
    5 points
  5. 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
    5 points
  6. Here's just a quick demo. I'm just animating scale on the 3rd slide to show that is where you do the animations for the vertical movement. Horizontal "containerAnimation" - ScrollTrigger (codepen.io)
    5 points
  7. I didn't get why there where two ScrollTriggers in your demo, so I removed one and combined the logic to just one. In your timeline I've .add(`label${I}`) which adds a label to a point on the time line and if I'm correct this is the place to which you want to snap. After that it was just a question of adding `snap: "labels"` to the ScrollTrigger object and now it will snap to those labels. There are a lot more settings within snap, but you can check the docs for that https://codepen.io/mvaneijgen/pen/WNMwoMr?editors=0010
    5 points
  8. Hello @Jack7cz There are a couple of things off with your code - the most impactful of them being, that you are nesting ScrollTriggers in individual tweens of a timeline. That is not valid and actually one of the most common ScrollTrigger mistakes, as you can read more on in this article: That is the main reason why you are having that issue you mentioned on refresh. So you will definitely need to refactor your code with that regard. And here are some additional notes: I think the immediateRender: true should rather be inside the to-part of a fromTo-tween and not in the from-part If you are using the invalidateOnRefresh: true because at some point the height of your nav might be changing and thus the calculations for the clipPath-tweens need to be done from scratch, make sure to also use function-based values - otherwise the invalidateOnRefresh will not have much of an effect When tweening on clipPaths make sure to always include the units - even and especially when the value is 0 - so in your case 0px instead of 0 e.g., to avoid any possible misinterpretations by GSAP I'm not 100% sure if I caught everything in there or if there might be an easier or more concise way to do it but here is a working fork of your demo. I hope that'll help a bit - happy tweening! EDIT: I just now noticed there still being a problem when you first scroll past the button and enter the 'navbar-from-white1' ScrollTrigger, then back up to the button and the nav becoming black again and then click the button to change the height of the red box - the nav will turn white on click. But I'm running out of time now, so if anyone sees something obviously wrong in my codepen or has an idea what that might be realated to in the first place, please chip in. https://codepen.io/akapowl/pen/KKQVBNo EDIT 2: I've had some more time to tinker with it - and it appears that not setting immediateRender to false and setting the 'initial state of the headers' after the creation of the ScrollTriggers (instead of doing it beforehand) does seem to resolve that issue mentioned above. Since my brain is in sunday mode, I couldn't say I really get around why exactly that is the case though πŸ˜… https://codepen.io/akapowl/pen/gOvPBQp
    5 points
  9. You could use .getBBox() and set the svgOrigin accordingly: https://codepen.io/GreenSock/pen/KKQwWrv?editors=0010 But obviously that's animating the SVG <g> rather than the <svg> itself. The reason your svgOrigin wasn't working is because that's only for SVG elements (ones inside an <svg>). Another option is to use the MotionPathPlugin.convertCoordinate() method. You can animate the pedal the opposite direction too (as seen in the demo) but you'll obviously need to adjust the artwork of the crank to extend more. Good luck!
    5 points
  10. From the docs: ScrollTrigger.addEventListener("refreshInit", function() { // this code will run BEFORE the refresh }); ScrollTrigger.addEventListener("refresh", function() { // this code will run AFTER all ScrollTriggers refreshed. }); https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh() Happy tweening.
    5 points
  11. I've created a timeline instead of just a `gsap.to()` tween and add the dot appearance to that timeline, gave it a relative position parameter of `-=0.3` which means it will appear 0.3 seconds before your lottie animation finishes. https://codepen.io/mvaneijgen/pen/VwQZVjx?editors=0010 The default tween value of GSAP is 0.5 seconds, this doesn't really matter, because you're using scrollTrigger with `scrub: true`, but the position parameter still works like that. So the dot will be visible on 2/5 of the scrollable height, if that make sense.
    5 points
  12. Using the text-anchor and alignment-baseline that I linked to, it shows centered up for me all across the board. <text x="50%" y="50%" text-anchor="middle" alignment-baseline="central" class="svg-text">Beautiful Place</text> Again, I can not identify any different behaviour on Firefox compared to Chrome. The codepen demo you linked is showing a 404 Error btw, so I'm not sure how exactly you were trying to handle things, but for me it works as I would expect it to work. https://codepen.io/akapowl/pen/zYpgMOw I also can not identify any issues with the pinning of the code provided earlier when adding some space before the section in question (neither on Chrome nor on Firefox). But I am on a Windows machine and it looks like you are on Mac - so maybe someone else can have a look and tell if they see the behaviour you are describing / showing in your video. https://codepen.io/akapowl/pen/vYdBJwy If it works in codepen but not on your live website, the chances that something else on your website is causing the problems are pretty high. There is just too much involved on live websites that could cause the problem, that's why we ask for minimal demos. The only thing that comes to my mind after a quick look, is maybe try to change the order of your ScrollTriggers and see if that changes anything - the pinning one should actually be created first as it comes first on the page. Other than that, I can not offer any more help if you can not provide a minimal demo recreating your issue, I'm afraid. Maybe somebody else can. And of course you are welcome to try and hire someone to help you with your live website in the Jobs & Freelance forum. Happy scrolling!
    5 points
  13. Hi @Chybosky It'll be best to use CSS variables to animate pseudo elements. It gives you much more control. Here's a demo with the basics of how to do it. https://codepen.io/PointC/pen/rNpXXWq Hopefully that helps. Happy tweening.
    5 points
  14. These should help https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline That could have multiple reasons - but I don't see any different behaviour in FF compared to Chrome with that codepen example. We don't have the capacity to debug live websites, so it would be best if you could re-create your issue in a minimal demo if you need help on this.
    5 points
  15. Yup, I'm with Cassie there - before jumping in on the deep end, it might be better to get familiar with how GSAP works in general first (tweens, timelines etc.) and then with the basics of how ScrollTrigger works and then all the SVG stuff, masking, clipping etc. - otherwise you will only just run into one roadblock after the other. And as Cassie mentioned, these forums are not intended to deliver tutorials on how to achieve certain effects. That said, you could alternatively to Cassie's suggestion maybe just make it SVG text instead and position it in the markup in a way that it would be covered note: I mainly just copied over the CSS styles from your text - you might want to look up what properties are actually valid for SVG text change the to part of the fromTo tween to 0 instead of what was calculated with regard to the innerHeight use a timeline to be scrubbed through instead of a single tween - and add a reveal of whatever you'd want after the tween on the cover Especially for 3 you'll want to get familiar with how durations and the position-parameter work on scrubbed tweens/timelines. Happy learning and good luck with the project! https://codepen.io/akapowl/pen/yLpWRzJ
    5 points
  16. Welcome to the GSAP forums @ELmanuelito Technically it will never be, as there actually is no horizontal scrolling here at all ...but I get what you meant. The problem is, that you set the end to an absolute value of 6000. For what you want you would need to make the end dependent on the container's scrollWidth. Something like this - the substracted clientWidth is to make it equal to the amount you are tweening the panels to the left. end: () => "+=" + (container.scrollWidth - container.clientWidth) The other thing is probably just some styling issues. Especially when working with flex and expecting the flexed elements to be of fixed dimensions, it would be best to set their flex-properties ( like flex-grow, flex-shrink and the flex-basis, or use the flex shorthand ). https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex Alongside that I set the width of the container to auto and the height to 100vh. Also, sometimes it will be neccessary to set overflow-x to hidden not only on the body but also on the container element that has overflowing content, because it can create issues with the viewport on mobile - but here it seems to be the exact opposite so it is not set on the container. Sometimes you'll just need to tinker with things a bit. All things considered this should work a bit better now - it does for me. I hope it will help. There are lots of other fake-horizontal demos on the ScrollTrigger demos page and in this and this showcase over on codepen - slightly different requirements just need different approaches sometimes. https://codepen.io/akapowl/pen/KKZLMZo
    5 points
  17. Yeah, that sounds like the correct behavior. There's really no way to normalize that, so you would have to manually listen for events and do the scrolling yourself. You could definitely leverage the new Observer plugin to help out. Just a quicky demo showing how. Modal with scrolling text 90 rotated (codepen.io)
    5 points
  18. Hi @kodralex Looks like that's an old one from our own Diaco. I made an updated version of his idea a few months ago that takes advantage of GSAP 3 syntax and the new random utility method. I used a sprite sheet for mine which should work well for you too. Hopefully it helps. Happy tweening. https://codepen.io/PointC/pen/BadPdXx
    5 points
  19. pretty sure you are only supposed to have one ScrollSmoother instance for the entire page found this in the FAQ in the docs Can ScrollSmoother be applied to the contents of individual elements instead of the whole web page? No, ScrollSmoother is intended to be used to smooth the scrolling on the overall page, not individual elements.
    5 points
  20. Hi @Idas, That's one of the Most Common ScrollTrigger Mistakes - creating .to() logic issues. When you target the same property of the same element in multiple ScrollTriggers, you need to use immediateRender: false, .fromTo() tweens or a timeline. https://greensock.com/st-mistakes/#to-issues https://codepen.io/PointC/pen/yLpZJBG/c5debd87e814df47d92a60f751467d55 Happy tweening.
    5 points
  21. Edit: Snap, @mvaneijgen was seconds faster than me πŸ™ƒ Unless I'm missing something obvious, I don't think that would be possible with the .reverse() method, as you can only pass from where to reverse but not to where. What you might need for this is either to tween the progress of the timeline (note that the explanation on that linked page still uses old syntax, but it is still possible with GSAP3) or to use tweenTo / tweenFromTo and base things of on something like the timeline's .totalDuration()/2 e.g. https://www.snorkl.tv/gsap-tweento-and-tweenfromto/ Depending on your exact expected outcome / scenario, one might be more suited than the other, but I think the latter might be what could be most helpful here. https://codepen.io/akapowl/pen/xxpMKaK Click anywhere in this example to toggle changes: https://codepen.io/akapowl/pen/WNdPNbg
    5 points
  22. Hi @serotoninene a minimal demo would have been nice, I now had to create one from scratch. But here is an example that uses `.tweenTo()` too animate to a label I've defined in a timeline. I've placed the label in the middle of the timeline, but you can put it anywhere you want. https://codepen.io/mvaneijgen/pen/Exorxoy
    5 points
  23. Happy to help. Thanks for your Club membership. We appreciate the support. Yep - it's a phenomenal community. I wouldn't know much of anything about JavaScript and GSAP had I not started hanging out here. I found the best way to learn was to try and help other users and answer questions. You'd be surprised how much you pick up just by trying to figure out someone's code problem. Have fun and happy tweening.
    4 points
  24. Split your text into lines, loop through those targets and create a ScrollTrigger for each one. Boom - you're good to go. Happy tweening. https://codepen.io/PointC/pen/qBxaJyX/3e64dc369cd5e8a71235b7d123180339
    4 points
  25. 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
    4 points
  26. The quickest workaround to the image-jump problem would probably be to just leave the creation of the ScrollTriggers where you have it currently and instead of calling ScrollTrigger.refresh() in the onComplete callback of the tlLoaderOut timeline, call it in the onUpdate callback of that timeline. Now since the .refresh() is a rather costly operation, it may not be the best idea to do it onUpdate of that tl because it might cause performance issues, but I actually did not notice much of a difference in the demo linked below, if any - of course your mileage may vary. Other than that I think you might have to somehow 'manually' calculate where to tween the image to in between, so it would end up at the exact position where the ScrollTrigger's progress would set it to when things have settled. https://stackblitz.com/edit/web-platform-guoahm Welcome to the GreenSock forums by the way As a sidenote: I would highly recommend to update your GSAP / ScrollTrigger to the latest versions because the version 3.4.2 that you are using in that demo of yours is rather old and by now (the latest is 3.10.4) there have been heaps of new things integrated and lots of bugs fixed. Since version 3.10 GreenSock also has its very own smooth-scrolling plugin for club-members - ScrollSmoother. Maybe have a look and see if it could be a suiting replacement for locomotive-scroll for you - it sure is awesome.
    4 points
  27. It looks like you were loading this one, which is not a GreenSock product: https://cdnjs.com/libraries/ScrollTrigger This here is where to get the links for all the GSAP related (non-club-membership) files: https://cdnjs.com/libraries/gsap
    4 points
  28. I've always used the ALT drag through the lines for individual line comments on the CSS.
    4 points
  29. Please give this a try. ease: condition ? "power4" : "none" https://codepen.io/PointC/pen/ExQVjbO/ea42ab4e6e542401ef5a8bab653c5b32 If you need it for your project, there's also a parseEase() method. https://greensock.com/docs/v3/GSAP/gsap.parseEase() Hopefully that helps. Happy tweening.
    4 points
  30. Hi @Vivodionisio Welcome to the forum. There is just far too much to look at there. If you're having trouble with just the shadow morph timeline, trim everything down to just that piece. Eliminating the extra pieces in the SVG would be very helpful too. We just need a minimal demo to see the issure. That being said, I'd recommend .set() over the zero duration tweens. https://greensock.com/docs/v3/GSAP/gsap.set() Instead of a delay on some of the tweens in the timelines, you'd benefit by looking at the position parameter. I'm not sure as I can't dive too deeply into all that code, but you may also want to look at immediateRender. If you can trim it down to just the necessary bits, I'm confident we can point you in the right direction. Happy tweening and welcome aboard.
    4 points
  31. Looks like a good job for the Modifiers Plugin. https://codepen.io/PointC/pen/rNJNMGK Hopefully that helps. Happy tweening.
    4 points
  32. I've never worked with a switch statement before, so forgive me for not using it. What you want is to have a trigger at each section right, so the easiest way is to just crate a scrollTrigger for each section. Then you don't need to calculate anything weird and can just use the top and bottom of the section you're working on. I've just used some random gradients colors, but it shows you it working. I've used a wrap function this loops through an array and it doesn't matter if there are 10 sections, it will just keep looping the the array of the three I've set. https://codepen.io/mvaneijgen/pen/BaYBGOa?editors=1011
    4 points
  33. Heya! Not a GSAP issue here. Firefox doesn't like percentages in SVG. It's always best to go with a viewBox and use SVG units. Hope this helps! https://codepen.io/GreenSock/pen/KKZOYeB?editors=1010
    4 points
  34. Hi and welcome to the forum. Sure you can do that with GSAP. Check out ScrollTrigger. Lots of demos here: https://greensock.com/st-demos/ This one in particular will get you close to that example page. https://codepen.io/GreenSock/pen/YzyqVNe Happy tweening and welcome aboard.
    4 points
  35. And if you don't want the flash of green in-between you just have to flip around the position parameter from ">" to "<" than the second tween will start at the same time as the previous tween! https://codepen.io/mvaneijgen/pen/zYpgGZB?editors=1010
    4 points
  36. Welcome to the forums @AlesS I would recommend starting out by solving the animation first. Once your animation like you want, then all you have to do is hook it up to a ScrollTrigger and you should be good to go. I'm assuming you're trying to do a crossfade, so you'll probably need to absolute position the second section over the first section. Then use a Timeline and the position parameter to do your fading. If you get stuck along the way, just a post a demo of your work and we nudge in the right direction.
    4 points
  37. This doesn't really matter, but I would like to point out that instead of: gsap.set("#arrow", { xPercent: -50, yPercent: -50 }); You can add this `alignOrigin: [0.5, 0.5]` to the `motionPath` object to align it motionPath: { path: "#aboutPath", autoRotate: true, align: "#aboutPath", alignOrigin: [0.5, 0.5], }
    4 points
  38. Okay... I see - you'll have other controls that will pause/resume. That makes more sense now. Often times I'll just set up a global toggle variable that I can flip from true/false, 0/1 or whatever that I use to keep track of the timeline state. You may want to take a look at the position parameter. I think it would greatly enhance your project. Happy tweening.
    4 points
  39. You'd create a timeline instead of a single tween. Something like this should work. https://codepen.io/PointC/pen/zYpQVxj Happy tweening.
    4 points
  40. Hey there Davide. This is quite a list of requirements - we're happy to answer GSAP specific questions but these forums aren't a place to get people to make changes and additions for you. 1) you will need to mask/clip the HTML content. Here's an example of an SVG clip path being used on HTML content https://www.sarasoueidan.com/demos/css-svg-clipping/html-img-clipped-with-css-svg-clippath/ And an article explaining how to scale SVG clip paths for HTML use https://css-tricks.com/scaling-svg-clipping-paths-css-use/ 2) You may need to add some markers to your animation to debug where the start and end are Here's a video to watch that may help you understand scrollTrigger. 3) Here are some demos you can learn from https://greensock.com/st-demos/ Maybe the layered sections demo is what you're looking for? https://codepen.io/GreenSock/pen/KKpLdWW Hope these links help.
    4 points
  41. A web component connection is going to be similar to an iframe, so you should use the pinSpacer property. It looks like you were on to the right idea, but it's not a boolean. GSAP Starter Template (codepen.io)
    4 points
  42. Hey @null and @OSUblake. Thanks a bunch for figuring this out. I am currently in the research phase for a new project we kicked off yesterday. Your example basically answered all of my open questions for solving animation and page transitions in next. I gotta say it really feels good seeing an engaged community and support team working together to create awesome projects. Kinda forgot how that felt. Totally worth the money. Thanks a lot!
    4 points
  43. Like this: https://codepen.io/PointC/pen/JjMVJxY/e68373e8ab31f5a91f56abc3a9ea524f Happy tweening.
    4 points
  44. Hello @Ramzdam If I understand correctly, what it is you are trying to go for, you will probably not want to use ScrollTrigger for that but create some sort of slider logic listening to events like 'wheel' and 'touch' instead, sort of like this one below. For that, the new Observer Plugin will be a great base, but keep in mind that it only is a helpful tool for listening to the neccessary events - all the logic you'd need around that, you'd have to create yourself. https://codepen.io/collection/KpNYOd https://codepen.io/GreenSock/pen/XWzRraJ This older post of mine here shows one possibility of how to include a delay for the goToSection function being called to allow other animations to be played before moving - but it also clearly shows, why ScrollTrigger (and the basis of native browser scrolling) is not the right choice to achieve something like that.
    4 points
  45. Great use case for GSAP's wrap util! https://codepen.io/GreenSock/pen/BaJMeOW
    4 points
  46. Hello @charlie_sage Welcome to the GreenSock forums and the wonderful world of web development πŸ™ƒ The path data in your HTML is not within quotation marks and it needs the d attribute to be recognized as path data. // bad <path id="path" fill="none" M8,102 C15,83 58,25 131,24 206,24 233,63 259,91 292,125 328,155 377,155 464,155 497,97 504,74 /> // good <path id="path" fill="none" d="M8,102 C15,83 58,25 131,24 206,24 233,63 259,91 292,125 328,155 377,155 464,155 497,97 504,74" /> Also, here I set the alignto the path too, and set an alignOrigin instead of the initial transforms you set beforehand. Works better now https://codepen.io/akapowl/pen/KKZJLzq
    4 points
  47. Welcome to the forums @codeSanjay I'm not sure what exactly it is you are after, because you have scrub as well as toggleActions in your code there, and those two do not work alongside each other. They are different methods for how to control a tween via a ScrollTrigger - if you had both set, the scrub would always take over control. Now if what you want is the scrubbing through the Lotties, you might want to consider having a look at the LottieScrollTrigger helper function in the docs https://greensock.com/docs/v3/HelperFunctions#lottie You can adjust the start of every other ScrollTrigger to be equivalent to the end of the one before like so... start: self => self.previous().end ...and have it look something like this in the end. Your Lottie-animations do appear to be actually finished halfway through their total time though. Maybe that is something you'll want to adjust. I hope that helps. Oh, and I also updated your GSAP and ST versions to the latest, because in your demo you are using relatively old and differing versions, which you should avoid if you can. https://codepen.io/akapowl/pen/VwyggZR Edit: Here is an alternative that seems to work better with resizes - this one is not pinning the wrapper in a seperate ScrollTrigger upfront, but with every individual LottieScrollTrigger instead (and has a min-height set for the wrapper instead of a height in CSS). https://codepen.io/akapowl/pen/WNdPPME
    4 points
  48. You might want to look at: https://greensock.com/docs/v3/Plugins/Observer or https://greensock.com/docs/v3/Plugins/InertiaPlugin They can both track velocity. You could use the new gsap.quickTo() to animate to the mouse position. This was a fun challenge for me, so here's a helper function that might be very useful: https://codepen.io/GreenSock/pen/ExorRXO?editors=0010 Does that help?
    4 points
  49. Hello @celli If you were going to do this with the CSSRulePlugin, things might become rather complicated - I think you would have to first create a specific rule targetting every specific container in CSS and then in the loop for every of those containers get its specific rule then. With many containers / pseudo-elements that might end in a lot of code/enumaration. As the docs for the CSSRulePlugin already hint to up top, it is a lot easier getting this done with the use of CSS variables. Maybe something like this. Would that work for you? https://codepen.io/akapowl/pen/yLpGzxG Edit: Of course, it would be even easier if you could use regular elements, like maybe spans instead of those pseudo-elements. But if you can not compromise on any of it, here's how it would look with pseudo-elements and the CSSRulePlugin. Better don't take a look at the CSS https://codepen.io/akapowl/pen/yLpGPpL
    4 points
Γ—