Jump to content
Search Community

Carl last won the day on December 24 2023

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,821
  • Joined

  • Last visited

  • Days Won

    546

Everything posted by Carl

  1. Hi and welcome to the GreenSock forums. Thanks for the clear demo. It shows you're really trying. You did a good job of setting things up. However, getting this done right takes a bit of experience with the subtleties of the API. You'll need to really understand things like pinning, function-based values, dealing with responsive settings etc. I've done something similar in a recent lesson so I was able to quickly make some modifications. https://codepen.io/snorkltv/pen/JjwMBmm?editors=0110 Note: a big part of what you need is to figure out how far the yellow boxes need to move. I did this in the getScrollDistance() function. With invalidateOnRefresh set to true that function will re-run automatically on resize. Hopefully this demo is enough to give you something to experiment with. Be sure to study all the ScrollTrigger properties in the docs as that will help greatly. If you want to do more with ScrollTrigger and GSAP I encourage you to check out my GSAP course bundle, I cover all these things in detail. Good luck on the project! Carl
  2. thx for the demo. I've never had to use this but check the ScrollTrigger docs for pinnedContainer. i think setting it to "main" on the second ScrollTrigger solves your issue. https://codepen.io/snorkltv/pen/MWZoEgp?editors=0010 be sure to thank @GreenSock for adding all these wonderful features
  3. update. I did end up making a complete tutorial on this effect and it's on YouTube: Here's the finished demo too: https://codepen.io/snorkltv/pen/poxvOLL/36e8db0379aa8cbac7608b0ff0d1f46d
  4. Hi and Welcome to the GreenSock forums, Thanks for the demo. It seems you might want to take a few steps back here and get 1 card to flip the way you want before you worry about a lot of cards or even hooking up ScrollTrigger. Here's a demo from one of my courses, perhaps it will help you get your cards setup in a simpler fashion https://codepen.io/snorkltv/pen/VwKGVjb?editors=0010 And to add ScrollTrigger you can do something like this https://codepen.io/snorkltv/pen/gOZWaQj?editors=1010 Hope this helps. If you want to learn GSAP inside and out, check out my complete GSAP course bundle, it will guide you through all this and so much more.
  5. @Toso has a great idea. I found this interesting so I did this with a clipPath on a group. I'm just animating an orange rectangle's scaleX inside the clipped group. https://codepen.io/snorkltv/pen/gOZmQVZ?editors=1010 If you need help hooking it up to ScrollTrigger and making it work with that curve going down, it's going to be a bit more work, and not something I can do for you, but hopefully you've got some ideas now to get started.
  6. Hi and welcome to the GreenSock forums, Typically it is best to provide a minimal demo showing what you have attempted. This way we can help guide you. However, I had recently shared this demo with my students, perhaps it will help you get started. https://codepen.io/snorkltv/pen/QWJNmQb?editors=0010 If you need help learning ScrollTrigger be sure to check out my comprehensive GSAP training.
  7. Hi and welcome to the GreenSock forums, It seems you found a demo from my ScrollTrigger Express course (38 video lesson) where I teach all the necessary features of ScrollTrigger. This demo is part of a 5-part video series that goes over every line of code. The reason why the images aren't fading is because you have the animation set to be controlled via scrubbing (scrub:true) but your start and end values are identical so there is no distance to scrub. //bad start:"top 50%", end:"top 50%", //better start:"top 50%", end:"top 40%", Here is the modified demo https://codepen.io/snorkltv/pen/XWoMpdb Frankly I'm not a fan of scrubbing through opacity changes like this as the user can stop while the image is only partially faded in and it looks bad. I prefer controlling these animations with toggleActions which force the animation to play through in both directions as the trigger enter and leaves. https://codepen.io/snorkltv/pen/zYyZNBv If you need more help understanding the basics of ScrollTrigger and GSAP check out my complete GSAP course bundle. I think you will find the lessons extremely helpful Good luck on your project! Carl
  8. I don't know. You seem to have a lot of custom logic that hijacks the normal scroll behavior and inputs and I can't really dig into that.
  9. Do you have a fork of your fix working? I'm curious what a comms issue is. check this update. you should be able to see the magenta right border on the last item after resizes https://codepen.io/snorkltv/pen/LYMxvra?editors=0010 Look at the tween() function this.sc = ScrollTrigger.create({ end: () => `+=${this.getScrollAmount() * -1}`, trigger:this.DOM.element, animation:this.tween(), start:this.start, pin:this.DOM.pin, markers:this.markers, scrub:1, invalidateOnRefresh:true, }) tween(){ console.log("new tween returned") return gsap.to(this.DOM.wrapper, { x: this.getScrollAmount(), ease: "none", }); } if you check the console logs while resizes you will see that "new tween returned" only gets called once on initial load... not on resize. On resize we have invalidateOnRefresh set to true. This means that the animation associated with the ScrollTrigger will have its values flushed and reset. It doesn't mean that the function that returned the animation will be called again. When tween() first runs this.getScrollAmount() runs and returns the x value. That x is sort of hard-coded into the tween. The only way that value will change is if it was originally a function-based value, not just a value returned by a function. I found this fix to do the trick tween(){ console.log("new tween returned") return gsap.to(this.DOM.wrapper, { x: ()=> this.getScrollAmount(), //function-based value ()=> ease: "none", }); } An odd side issue however is that somehow the getScrollAmount() is slightly off and I had to subtract an arbitrary number of pixels. return -(racesWidth - window.innerWidth) -20 hope this gets you close enough. Its always fine to ask questions but I'm confident that with the more lessons you do you'll be able to figure out more on your own. This one was a bit tricky for sure.
  10. Yup, @alig01 is exactly right. The trigger elements should not be what you are animating especially along the y axis. Their positioning is crucial for ScrollTrigger to get proper measurements. Perhaps you can run a script that wraps your text in wrapper divs (to be used as triggers) PRIOR to ScrollTrigger running.
  11. if you were to remove everything except for the motionPath animation you would see that it slows down at the end because all tweens have a default ease of "power1.out". Try using ease:"none" and see if that works better. section_2.to(rec, { motionPath: { path: path, align: path, alignOrigin: [0.5, 0.5], }, immediateRender: true, ease:"none" })
  12. glad to hear you enrolled in the courses! For debugging I would suggest you log all the dynamic values you are using whenever you expect them to update. I added some logs in the tween() and getScrollAmount() functions. Also it's good to outline all the items you are getting measurements from. It seems something funky is happening with your wrapper. Its border doesn't seem to enclose all of its child elements I'm guessing this is affecting the measurement values you're getting. take this demo and resize it and scroll up and down. you'll see things break out of the red outline https://codepen.io/snorkltv/pen/JjwEvYZ?editors=0010 I'd suggest going through the css and seeing if there is an alternate setup you can use. also play around with pin spacing on and off to see if that changes anything.
  13. Hi, As the person who created that demo originally, I think it's a very solid base. https://codepen.io/snorkltv/pen/PoxojaO?editors=0010 I really don't know what you mean by "it doesn't respond well". Perhaps you can be more clear. the getScrollAmount() function gets called when the window is resized or the ScrollTrigger is refreshed. Those values are neccessary for all the configuration work to happen. You most likely should not delay those calculations. If you need more flexibility look into gsap.matchMedia() as it will allow you to run custom code when you hit certain break-points in browser size and do whatever cleanup or configuration you deem necessary.
  14. Great job! Thx for posting the working demo. I'm sure it will inspire others too.
  15. Hi and welcome to the GreenSock forums. Thanks for the demo. It looks like you are only creating 1 timeline with all the animations in it. The approach I recommend is to create a timeline for each element and then that element can play and reverse its animation on enter/leave here is a demo from a lesson in my Free GSAP Beginner's Course https://codepen.io/snorkltv/pen/WNZLoNg Check out the course as it will get you up to speed with the latest syntax too. TimelineLite still works but isn't recommended.
  16. so in the previous version you'll notice that you have to scroll a bit before the next section slides up. This means that there was some dead space in the beginning of the timeline. Since the loops were skipping the first panels when i === 0 then that means the first elements to be animated were being inserted at a time of 0.5 from the (i * duration) position parameter. We want the first position parameter to be zero so we can just use (i-1) * duration https://codepen.io/snorkltv/pen/QWzEKbm?editors=0010
  17. thanks for the clean demo! that's a neat effect. yeah the problem is that your first loop runs all the way through before the second loop runs. note that both loops now use i*duration when every tween is added to tl. https://codepen.io/snorkltv/pen/YzdWqmB?editors=0010
  18. Hi and thanks for the demo. A yoyo is added when you need a repeating timeline to animate forwards and backwards the same way. If you want to do something different in the reverse direction then using yoyo isn't going to be a manageable solution. From looking at the code you provided it looks like it's a bit over-engineered for something that should be a bit simpler. Unfortunately I'm really not following exactly what should happen. In a case like this I would suggest you build a single timeline that ONLY plays forward and clearly shows how everything should appear and disappear. Put all the tweens in the timeline and don't use any function calls or conditional statements to build the animations. At that point we can look at it and see common patterns and then advise you on how some of it can be optimized with functions that return timelines or loops or whatever. While reading your description it kind of reminded me of this lesson from GSAP 3 Beyond the Basics where dynamic content shows and hides throughout a timeline. Perhaps something like this will help https://codepen.io/snorkltv/pen/XWmdPBv
  19. Yes, building a sequence as @alig01 suggested is what I would also recommend to anyone starting out. As you get more comfortable with GSAP you may want to look into CustomEase https://codepen.io/snorkltv/pen/QWzyZXp I added scale as a property too as the change to opacity:0.7 is fairly subtle Click here to see the ease graph Also if you want a single-tween solution you could explore CSS Keyframes in GSAP
  20. I would create a single animation that has an onUpdate function that is used to update the slider value and the displayed number https://codepen.io/snorkltv/pen/qBLOwZR?editors=0011
  21. Carl

    Pin problem

    The white space is caused by the pin-spacer. this creates the necessary scroll distance for the user to continue scrolling while the elements are pinned. Please see the docs for my pinSpacing video https://greensock.com/docs/v3/Plugins/ScrollTrigger (which is also in ScrollTrigger Express) Yes, and it is fixed in place in the demo above as that is the one that is being pinned. Do you see it moving? When dealing with pinning, I've found for the best visual result you can just give the pinned element a height of 100vh. This way you don't see what's happening above or below as the page is scrolling: https://codepen.io/snorkltv/pen/RwEWjMV Another option is to put the section that comes after the pinned element inside the pinned element. So in your case take the last section and put it in the pinned section. Another option is to explore giving surrounding elements or the body the same background color so you don't notice a gap. you can also style the pin-spacer with .pin-spacer { background:green; } Also, ScrollTrigger Express has a "Pinning Deep Dive" lesson (members only) that shows more about pinning too.
  22. Carl

    Pin problem

    This was a little tricky due to how you were applying your css. when you pin elements they get wrapped in a pinSpacer div. this messes up your nth-of-type selectors. so once the second section got pinned, it no longer had height auto. now the 3rd section is the 2nd that gets selected with section:nth-of-type(2) { background: #8c75fe; height: auto; } I added inline styles to each section so you can now see what's happening. the second section has the class of .pinMe and is working as expected. https://codepen.io/snorkltv/pen/qBLOPdy?editors=1100
  23. Carl

    Pin problem

    Thanks for the clear demo. the image is in content. I gave content a red background. content appears to be pinned correctly. I extended the end value so there is more time to scroll https://codepen.io/snorkltv/pen/vYvNJRa perhaps you meant to pin the purple section? or maybe I'm misunderstanding the issue.
  24. @Rodrigo that looks like the original code. oddly enough it's off a bit on desktop safari but fine on iOS ?‍♂️
×
×
  • Create New...