Jump to content

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

GreenSock last won the day on July 23

GreenSock had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by GreenSock

  1. Since we want to only allow one menu to be open at a time, we create a globally-scoped openMenu variable to store a reference to the currently open menu (if there is one). The && is just a shorter way to do some conditional logic: // short openMenu && openMenu.close(); // longer if (openMenu) { openMenu.close(); } // longest if (openMenu !== null) { openMenu.close(); } Whatever is after the && only runs if the first part is truthy. Without that global variable, we could loop through the menus Array and call close() on all the other ones but tha
  2. Yes, @akapowl is exactly right. We simply renamed ThrowPropsPlugin to InertiaPlugin because it’s more intuitive. There are some other improvements we made in InertiaPlugin too but overall functionality is very similar.
  3. Welcome to the forums, @ladybytez You'd probably need to clone the first panel to enable seamless looping. And then you'd need to use a non-passive scroll event listener to handle things in a special way when it hits the top or bottom. Here's what I'd do: https://codepen.io/GreenSock/pen/VwbywPd?editors=0010 Is that what you're looking for?
  4. I'm not entirely sure how you want this to work exactly because I see you've got scrub: 1 in your code but you're creating independent animations inside callbacks (those don't really go together). Plus logically-speaking, you can't have your trigger points set to 30% and 70% AND ALSO make 2nd element only fade in as the first one is fading out unless the screen is exactly a certain height that'd happen to line those up perfectly. So you'd have to decide if you want those trigger points or if you want the sequenced animations where both are never opacity: 1 at the same time. And you've gotta de
  5. ScrollTrigger is extremely optimized for performance because scrolling and animation are the most performance-sensitive parts of UX. Part of that is using passive scroll event listeners which basically means promising that our event handlers won't call .preventDefault(). That can really help the browser speed things up. Otherwise, it has to wait until the function is called (tied to the main thread) and see if .preventDefault() is called before it can perform the scroll. The behavior you're trying to implement is directly contradicting that. And your code is running out of that ev
  6. It's because that timeline's playhead is already at the end when you call .play() so there's nowhere for the playhead to go in the forward direction. It's a logic issue. I'm also not a fan of this approach where you set up the open and close animations ahead of time because: It won't allow things to be dynamic and fluid. For example, what if a user clicks quickly so that when the "open" animation is halfway through, you call the "close" animation? If all the starting/ending values are pre-recorded, you'd see a sudden jump to the open state and then the animation would conti
  7. It's just a matter of tweaking the logic in the code, like adding a delay to the gs_reveal_fromRight class animation and the checkmark delays associated with the ones on the right: https://codepen.io/GreenSock/pen/YzVEbVV
  8. Hi @Mustana. I'm not sure - these forums are for GSAP questions but that sounds like more of an Adobe Animate CC question. Perhaps try their forums?
  9. You can set scrub: false and pin: false on the helper function, just so you know. I noticed several things: You were loading in Lottie files that were getting swapped in AFTER the page loaded and those elements shifted the layout around because of the space they took up. That's why things seemed to disappear prematurely - the start/end positions were calculated BEFORE you loaded all that stuff in, so the shifting threw it all off. You need to call ScrollTrigger.refresh() AFTER you're done shifting the DOM around. You can do that in a DOMLoaded event on the Lottie animation
  10. GreenSock

    Gsap not working

    Welcome to the forums, @Kalim. As mentioned throughout the docs, SplitText is a membership benefit of Club GreenSock ("Shockingly Green" and higher). It looks like you haven't signed up yet for that. Once you do, you'll gain access to bonus plugins like SplitText, MorphSVGPlugin, DrawSVGPlugin, and many others. See https://greensock.com/club You can try out all the bonus plugins on CodePen for free as much as you want - see Happy tweening!
  11. Hi @jimkill. Welcome to the forums (and GSAP)! Did you know there's a helper function in the docs that makes it very easy to hook up Lottie to ScrollTrigger? See https://greensock.com/docs/v3/HelperFunctions#lottie It's a bit much to dig through almost 700 lines of JS/CSS/HTML, but if you still need some help after seeing that helper function, please post a minimal demo and we'd be happy to take a peek and answer any GSAP-specific questions. 👍
  12. No, if you plan to morph like that you'd need the end value too. You can't just have a start value You could probably reduce that value quite a bit by limiting those numbers to 2 or maybe 3 decimal places. You've got a LOT of precision built in there which nobody will notice visually. And like I said, you could probably do this with variable fonts but it's totally up to you. Enjoy!
  13. Sure, in your onUpdate(), put this at the bottom: gsap.to(tl, {timeScale: 1, overwrite: true});
  14. Hey @skipper42. I read your post a few times and...sorry, I'm lost. If you need more help with a GSAP-specific issue, please provide a minimal demo. Like I said, you definitely should not be nesting timelines with ScrollTriggers inside of a master timeline that also has a ScrollTrigger. It's logically impossible (not a limitation or bug in GSAP/ScrollTrigger). See Good luck!
  15. From my cursory glance, the basic concept is to just set them up in a circular pattern (like I said, an offset transformOrigin and then rotate them) and then animate them (either all at the same time, or put them into a container whose rotation you animate) in a timeline from right to left and hook that up to a ScrollTrigger with scrub: true (or a number to smooth it out). Feel free to give it a shot and if you have an other GSAP-specific questions, feel free to ask. If you want someone to build it for you, you're welcome to post in the "Jobs & Freelance" forum to hire someone
  16. It's because your custom scrolling code isn't updating its "limit" value properly when ScrollTrigger adds padding for pinning. So your wrapper element's height grows accordingly, but your calculations aren't taking that into account. I assume you can add a "refresh" listener to call onResize() on your app: https://codepen.io/GreenSock/pen/abWVEYr?editors=0010
  17. Happy to help! Yeah, this was delightfully simple in the end and a very interesting use case for CustomEase. I'm so glad it came together. I love challenges like this. 🙌
  18. Hi, @DLong. If you'd like some help, please provide a minimal demo. 400+ lines of code is a lot to ask someone to dig through. Please isolate things in a different codepen that only shows that one issue very clearly and we'd be happy to take a peek to answer any GSAP-specific questions.
  19. I noticed a few things: You didn't set the scroller. By default, ScrollTrigger uses the main window/body as the scroller but your setup has no scrolling at all on the body. Your content is inside another <div> that does the scrolling. As a quick fix, I added this to your ScrollTrigger: scroller: start.current.parentNode. You're animating the opacity of start.current but that element has a height of 0, so you won't see anything Maybe you meant imageTwo.current? Both of your images are using the same URL, so you won't really see anything when you crossfade. Be c
  20. Yep, you'd need to hook it up to a ScrollTrigger.scrollerProxy(). Exactly. Also, a little performance tip: almost all of the utility methods allow you to create a function that remembers the parameters you feed in and then you reuse that function inside your update() function that runs a LOT: // BEFORE update() { this.scroll.target = gsap.utils.clamp(0, this.scroll.limit, this.scroll.target); } // AFTER const clamp = gsap.utils.clamp(0, this.scroll.limit); update() { this.scroll.target = clamp(this.scroll.target); } https://codepen.io/GreenSock/pen/RwVjNGW?edit
  21. You could do morphing but that link you provided looks to me like they're just using a variable font. Maybe put each letter into a <span> and animate its fontWeight. If you still need help, please provide a minimal demo and we'd be happy to take a peek.
  22. Welcome to the forums, @gihan22603. I don't understand your question. Can you please be more specific? If you just want to rotate things, you can animate the "rotation" property. You can offset the transformOrigin really far down to get the look from that screen shot, like transformOrigin: "center 500px" for example. If you still need help, please make sure you include a minimal demo. We really try to keep these forums focused on GSAP-specific questions and not general logic issues or CSS markup, etc. See the forum guidelines. Happy tweening!
  23. It's fine if that's what you want, but be aware that you're simply adding a callback into the timeline at that spot. You're not embedding any animation, so it won't scrub or be controlled at all with the master timeline. If it were me, I would definitely be embedding it unless there's a clear reason why it needs to animate independently.
  24. I'm not sure exactly what you're asking, but those callbacks are indeed being called properly. You can add a console.log() to verify. I wonder if you're just using the wrong color. At every point, you're animating to exactly the same color, so it would make sense that you don't notice anything changing after the first time.