Leaderboard
Popular Content
Showing content with the highest reputation on 07/25/2021 in all areas
-
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 tha2 points
-
Hello there, @Nitro Interactive. From what I can tell you, in GSAP3, the InertiaPlugin does what the ThrowPropsPlugin did before. The GSAP3 MigrationGuide is a good place to look for relavant changes between versions or if have trouble finding something, you know was there before. I understand that it can be a tad confusing, if you don't know where exactly to look, though.2 points
-
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 conti2 points
-
Sounds like you might want to look at tweenFromTo(). https://greensock.com/docs/v3/GSAP/Timeline/tweenFromTo()2 points
-
My pleasure Well, I also just took a closer look at the website you linked to, and noticed that they don't even make use of clip-path. On there, it actually is a slightly different markup with regard to usage of elements from the one in my demo alongside changing the 'right' property of the projects section on mousemove, with some clever CSS positioning (a fair bit different from my demo, with overflow: hidden on the different sections as a key element) to make it work properly in the first place, when changing the projects section's 'right' value. So as in most cases2 points
-
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!2 points
-
@Cassie Unrelated to this thread, I just wanted to let you know I came across your blog not more than a few hours after you responded here, not realizing that you were one in the same as cassie.code until realizing your avatars matched up. Anyway I shared your blog with my team because of just how beautiful and well put-together it is. It's a great site and I just found some humor in that you also just so happened to assist me with my animation question here. Sometimes it can feel like a small world thanks to little interactions like that, thanks for everything you do!1 point
-
Hey, An attempt to achieve a dynamic per ease: "slow (0.2, 0.6)". https://codepen.io/mikeK/pen/qBmpbPw Happy easing ... Mikel1 point
-
Hey @therealfirefly, welcome to the GSAP forum! It's actually kind of tough to troubleshoot from just a screenshot, but from a quick glimpse, it looks like you might have just misspelled scrollTrigger. When you use it as an object in a tween or timeline like you do, it is supposed to be scrollTrigger in camelCase and not ScrollTrigger. If changing that doesn't do the trick for you, it would be awesome if you could create a minimal demo for us to look at. Hope it helps resolve your issue though1 point
-
Hye @ladybytez I guess you are referring to ScrollTrigger? Yes, it will return a number with a decimal point - and as you can see in the explanation below (which is from the ScrollTrigger docs), when you feed the snap a number between 0 and 1, it will snap to increments of that amount along the total progress (which is returned between 0 and 1) of the scroll-duration of that ScrollTrigger. Number - snap: 0.1 snaps in increments of 0.1 (10%, 20%, 30%, etc.). If you have a certain number of sections, simply do 1 / (sections - 1). Since it1 point
-
Thank you for explaining this to me and showing a great demo! I will definitely try this on the upcoming days. So far looks exactly how I need it to be done!!! Side note: this behavior really annoys me too...but it's not my choice to make🙃1 point
-
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?1 point
-
Hey there! I was interested myself and as it is the case just so often, this is a perfect example for why GSAP's utils are so useful - they make something like this a real breeze. I'm making use of a clip-path here in combination with mapRange() to get the correct percentage-value for where to set the points of the clipPath that need to be moved on mousemove. Clippy is a really useful tool for visualizing clip-paths and understanding how they work. I guess this can be optimized even further by making use of quickSetter() but I'm happy with it for1 point
-
This is my fave forum thread now. Easing is SO cool.1 point
-
This is my demo version. Currently I use svg but need 2 svg to change path. So is there a way to use 1 svg and still do the same thing? Thanks for your help <p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ExmbKmP" data-user="rk856321" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/rk856321/pen/ExmbKmP"> </a> by GióLangThang (<a href="h1 point
-
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.1 point
-
Ooh, this was a fun experiment. I just pasted the SVG <path> data string into the CustomEase editor to convert it, then copied the results into a CustomEase that's used in an animation of the dot's "y" value to -140 because that's the tallest peak and BOOM: https://codepen.io/GreenSock/pen/abWLgwY?editors=0010 🎉 That'll be much more performant than that StackOverflow post thing that constantly loops to try to find the closest x value.1 point
-
Ah. I guess the line shouldn't be moving at a consistent pace in the background. It would take longer for the dot to traverse the big peak than the long horizontal section. You can use SVG paths as easing curves with custom ease.... maybe there's a solution there.1 point
-
Your animation workflow is about to get a major boost. GSDevTools gives you a visual UI for interacting with and debugging GSAP animations, complete with advanced playback controls, keyboard shortcuts, global synchronization and more. Jump to specific scenes, set in/out points, play in slow motion to reveal intricate details, and even switch to a "minimal" mode on small screens. GSDevTools makes building and reviewing GSAP animations simply delightful. Get Started Load the JavaScript file //be sure to use a path that works in your dev environment <script src="./js/GSDevTo1 point -
SplitText is an easy to use JavaScript utility that allows you to split HTML text into characters, words and lines. Its easy to use, extremely flexible and works all the way back to IE9 (IE8 for GSAP 2's version). Although SplitText is naturally a good fit for creating HTML5 text animation effects with GreenSock's animation tools, it has no dependencies on GSAP, jQuery or any other libraries. Note that the video below uses GSAP 2's format. .videoNav { color:#555; margin-top: 12px; } 0:00 Intro 0:21 SplitText solves problems 2:01 Basic Split 3:34 Config1 point -
There were a few problems: You weren't loading the beta version of ScrollTrigger - scrollerProxy() is a new feature in 3.4.0 (soon to be released) You didn't actually set up the proxy stuff until AFTER you created your ScrollTriggers/animations. So at the time those get created, they look for any proxies and none exist, so they hook into the "real" element. I assume this is what you intended, right?: https://codepen.io/GreenSock/pen/84da4acf4cc292788d1099783ebbc685?editors=00101 point
-
Hello venn Say your element is already visible. Basically autoAlpha will animate opacity from 1 to 0 then set the visibility property to hidden. When you animate autoAlpha to 0. autoAlpha will set visibility hidden to visible then animate opacity from 0 to 1 (or whatever value you set it to.) You could try this, and see if GSAP will set visibility:hidden after animating opacity to 0. TweenMax.to(ABC, 1, {opacity: 0, visibility:"hidden"}); autoAlpha is part of the CSSPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ autoAlpha Identical to opacity except that whe1 point
-
You win "Jack's favorite post" for the week...or month...probably year. It's so nice to hear about your journey and the encouragement you give to fellow "lurkers" to wade into the pool and risk asking a question and/or help someone else around here. That's what makes this place so special. I agree that the vibe in these forums is very unique and positive. Rare indeed on the interwebs. Thanks for the way you've reinforced and contributed to that vibe (as this post demonstrates). We echo all your sentiments about the other moderators. Amazing guys. We're all lucky to have them hanging o1 point
