Jump to content

Carl last won the day on September 11

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. Hi @PapaDeBeau I think the main problem was just the syntax / formatting in the eventlisteners. When using multiple lines in an arrow function you need the {} https://codepen.io/snorkltv/pen/eYbVPPm?editors=1010 item.addEventListener("mouseleave", () => { console.log("Still works") one.reverse() }); Also in your loop item is the button with a class of ".Amazing" so I don't think you need to do item.querySelector(".Amazing"), you just need to animate each item. also, be careful with from tweens on buttons. you don't want them moving away from the mouse when you enter them because then they could trigger the mouseleave immediately. Glad to hear you enrolled in the classes! I'm sure if you put in the time and practice you find a wealth of information in there. Carl
  2. I can't really dig into all your code, nor do I really understand the latest question. However, if you feel that markers are thrown off somehow this is usually a side-effect of animating the trigger. In other words, don't make the trigger (section) the same thing as the target of your tweens. ScrollTrigger needs to measure the y distance of the trigger in order to position the markers, start, and end values. Animating it causes trouble. use a structure like <section class=trigger"> <div class="thingToAnimate"></div> </section> ScrollTrigger.create({ trigger:".trigger", animation:gsap.to(".thingToAnimate", {y:200}); }) one way to test if this is the issue is to just make your animation change the opacity of the section. If things work well this way that means that animating the y of trigger is the issue.
  3. Hi and welcome to the GreenSock forums, Thanks for the demo. The right way in my opinion would be to use the MotionPath Plugin. Here are 2 demos I used in recent lessons in my course SVG Animation with GSAP. https://codepen.io/snorkltv/pen/zYyBKmG https://codepen.io/snorkltv/pen/JjwJrqq Hopefully these help
  4. glad to see you got the help you needed. here are a few additional examples from my GSAP courses that may help with the ScrollTrigger implementation. https://codepen.io/snorkltv/pen/jOVoYXg https://codepen.io/snorkltv/pen/KKNEYqw?editors=0100
  5. oh and here is a similar result with a different layout. notice the right side gets pinned while the rest of the page naturally scrolls by. there is no need to animate the content with a tween. This is the start of a much more elaborate lesson in my ScrollTrigger course, but maybe it helps too https://codepen.io/snorkltv/pen/oNaNgLg?editors=1010
  6. 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
  7. 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
  8. 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
  9. 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.
  10. @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.
  11. 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.
  12. 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
  13. 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.
  14. 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.
  15. 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.
  16. 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" })
  17. 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.
  18. 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.
  19. Great job! Thx for posting the working demo. I'm sure it will inspire others too.
  20. 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.
  21. 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
  22. 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
  23. 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
  24. 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