Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation since 06/23/2022 in all areas

  1. Setting dragClickables: false in your Draggable alongside data-clickable="true" on your element would make that possible,@Its_Lefty https://greensock.com/docs/v3/Plugins/Draggable dragClickables Boolean - By default, Draggable will work on pretty much any element, but sometimes you might want clicks on <a>, <input>, <select>, <button>, and <textarea> elements (as well as any element that has a data-clickable="true" attribute) NOT to trigger dragging so that the browser’s default behavior fires (like clicking on an input would give it focus and drop the cursor there to begin typing), so if you want Draggable to ignore those clicks and allow the default behavior instead, set dragClickables: false. https://codepen.io/akapowl/pen/JjLPQde
    3 points
  2. Hello @Creek This has been a problem for many, many years now and if you just google something like "100vh mobile" you will find lots of different approaches trying to somehow work around or fix that. https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/ https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/ https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html https://dev.to/rachelg/a-javascript-fix-for-the-100vh-problem-on-mobile-screens-9im https://dev.to/admitkard/mobile-issue-with-100vh-height-100-100vh-3-solutions-3nae https://ilxanlar.medium.com/you-shouldnt-rely-on-css-100vh-and-here-s-why-1b4721e74487 I tried a couple of those myself, and while I stuck with the JS / CSS-variable hybrid approach mentioned in at least one of those articles (e.g. on css-tricks.com), I found that none of them worked 100% reliable all across the board (your mileage may vary) - because, and that is the best thing (it's not actually good at all), different mobile browsers handle vh units very diffferently. So there probably is no 100% fail safe silver bullet solution to this for now. On the bright side; slowly but surely, there are new vh units on their way into browsers, which will hopefully make things a bit more controllable - which doesn't necessarily mean it will get less complicated, as there appear to be a lot of those on the horizon, some for rather specific scenarios. https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4 https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/ https://www.terluinwebdesign.nl/en/css/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw/
    3 points
  3. Hey there! Are you maybe looking for something like this? https://codepen.io/GreenSock/pen/ExQqejP?editors=0011 You were creating three timelines, all of these were playing at the same time and each transition was at an absolute time in seconds. I've moved the timeline out of the loop, changed the times to relative and then each loop I'm adding new tweens on to the end of the global timeline in order to sequence them. You can also use gsap.set() instead of 'to' tweens - it's essentially a zero duration 'to' tween. Hope this helps.
    3 points
  4. This is a good place to start if you're stuck too!
    3 points
  5. A few things: afaik there will never be an official react module, GSAP is framework agnostic. There are currently features in the work that will make working with GSAP in react easier The best way to deal with strict mode until (2) is fully released is to disable strict mode. Store timelines in refs. I do not know why your program is bombing when you do that, but it shouldn't. An effect with GSAP in it pretty much never needs to rerun and should have an empty dependency array unless you need an animation to run on some state change.
    3 points
  6. 2 points
  7. @Tony Song I've set the `curviness:` property of your path to `3` and now the path seems much more curvy, see the docs for a more detailed explanation https://greensock.com/docs/v3/Plugins/MotionPathPlugin https://codepen.io/mvaneijgen/pen/vYRYvrZ?editors=0010
    2 points
  8. Or a percentage/progress value, like this: https://codepen.io/GreenSock/pen/bGvGYWB?editors=0010 (I figured that might be easier than a frame number because you may not know ahead of time how many frames there are).
    2 points
  9. You were feeding motionPath a <g> instead of a <path>. That won't work. The warning in the console was telling you that. You also seemed to be linking to a bunch of bonus plugins with invalid URLs. But if those are legit URLs, please do NOT post links to unrestricted, members-only plugins. That would make them free for anyone with those links. It doesn't look like you have a Club GreenSock membership either, so you shouldn't be using those plugins. You didn't load MotionPathPlugin either. Is this more like what you wanted? https://codepen.io/GreenSock/pen/ExExwro?editors=1010
    2 points
  10. @Its_Lefty international number, or just numbers that don't fall in the norm are always difficult. I've now changed the comma `,` to a dot `.`, set the snap value to `0.1` and then the code works as expected (only the first one is edited). I've also updated the `onUpdate` function to get the number of the tween and then replacing the dot with a comma and that seems to work. https://codepen.io/mvaneijgen/pen/PoRoqzV?editors=0010
    2 points
  11. Hello @BC Development Pretty much the same was asked in the two threads right before this one just a couple of minutes ago - one of those even has the convenient name ScrollTrigger Trackpad issues I'm not actually sure if this will help, but you coul try @GreenSock's suggestion from this thread and see if it helps.
    2 points
  12. Cool, glad to help! I think that is a bit of a miss understanding, a demo with code that is not working are the best once! Then anyone can see what your thought proces is and all they need to do is update some values to help you out. With out one anyone that wants to help first needs to put in the time to create a demo, now I had 10 minutes to spare and whipped up a codepen, but keep in mind that most of the contributors here are volunteers and help others for free.
    2 points
  13. Just wrap the scrollsmoother code in an if statement that checks if a page has a class, something like `.applyScrollSmootherToThisPage` and add that class to the pages you want scrollsmoother on. That's all you need right? if(document.querySelector('.applyScrollSmootherToThisPage'){ ScrollSmoother.create({ smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices) }); }
    2 points
  14. Nah, I don't think it's feasible because you cannot know moment-to-moment what other load the CPU might be under from other sources. For example, let's say when your page loads you hammer the CPU with some test and then you measure how long it takes for the purpose of categorizing the device (fast or slow). Multiple problems with this approach: When a page first loads, there are a ton of CPU-heavy tasks like loading, parsing, painting, initializing libraries, etc. You can't just assume that if there's any struggle, it must be a slow machine There could be other tasks that the device is handling in the background, like video rendering or they just got a multimedia message texted to them or the system's backup routine just started but it'll be done in 3 seconds. You just can't know. Your test is purposefully adding load to the CPU, making your site seem even slower. Yuck. I suppose you could look at screen size or something if you want to just assume that phones are slower than tablets which are slower than desktops/laptops. But of course there are blazingly fast phones that beat out an old laptop. 🤷‍♂️
    2 points
  15. Here's a version that uses Flip plugin. Notice how much easier it is! And you could just change the ".active" class to make styling changes: https://codepen.io/GreenSock/pen/LYdPVoa?editors=0110
    2 points
  16. Thanks for being a Club GreenSock member, @danosaur! You created one big repeating timeline in which you were scrambling the text for all the elements simultaneously and you were playing that timeline on mouseover. I think you meant to do something like this: https://codepen.io/GreenSock/pen/WNzevxv?editors=1010 Notice I'm using mouseenter and mouseleave - be very careful about mouseover and mouseout because those fire on any child elements too (usually problematic). You only need to do one loop through those elements, and add the listeners in there. Does that clear things up?
    2 points
  17. If you can please post what you have now. Not only so I know what you where looking for, but so when anyone comes here with a Google search.
    2 points
  18. I'm having a difficult understanding what you are asking, but let me try to offer a few comments/suggestions: You can shorten this: // long tl.add(gsap.to(elem, {...}),`label${i}`); // short tl.to(elem, {...},`label${i}`); And // long const staplers = document.querySelectorAll('.stapler'); Array.from(staplers).map(...); // short const staplers = gsap.utils.toArray('.stapler'); staplers.map(...); Usually it's best to animate transforms (x/y) rather than top/left because those are cheaper for the browser to render (transforms don't affect layout). It sounds like an engineering problem - there's no need to put all your animations into one timeline if your goal is to be able to independently control them. By doing so, you'll make everything linear rather than dynamic. I assume you wanted something more like this: https://codepen.io/GreenSock/pen/bGvbGYY?editors=0110 Based on what it looks like you're trying to do, you may want to look into Flip plugin because that might make your life much easier for a case like this. You could just capture the state, set the new one, and then let Flip do all the work for you of transitioning between them. Good luck!
    2 points
  19. Here's a different approach that simplifies various aspects: https://codepen.io/GreenSock/pen/dydxgaB?editors=0010 It sets up the trigger start/end evenly based on wherever the parent_container's ScrollTrigger starts pinning. This way, we don't even need to worry about reverting other animations that may have shifted the trigger elements around. Uses GSAP to dynamically tween things. No CSS transitions (though you probably could switch back to CSS transitions for at least some of this if you prefer now that it uses the strategy mentioned in #1 for positioning). Uses transforms instead of marginTop in order to boost performance (marginTop affects layout which is bad for browser rendering performance) We normally don't rework projects like this for people, but I wanted to spend some extra time to get you on your way. Maybe it'll help someone else in the future too. Good luck!
    2 points
  20. I don't know what a proxy is in this context. But here's a webflow forum thread about this - https://discourse.webflow.com/t/implementing-greensock-gsap-club-member-bonus-plugins/82427/2 'I uploaded the assets to my CDN (AWS, digital ocean spaces, etc) and they set a referrer policy to only allow loading from the Webflow project URL.' Your CDN/Hosting provider will know how to sort out the referrer policy. Hope this helps!
    2 points
  21. Okay, Got it, I haven't killed the ScrollSmoother, Everything is working fine now, Thank you very much @SteveS & @GreenSock for your kind support.
    2 points
  22. Hi @Adarsh Srivastava welcome to the forum! ScrollTrigger just animates a timeline, so remove ScrollTrigger and just focus on the animation at hand. Only when you think the animation is perfect introduce ScrollTrigger back. I removed the first html block, disabled ScrollTrigger and GSDevTools to get a handy debugging tool to easily scrub through the animation. Having your animation play this way, do you find that it is doing what you want? If not, just fix them first and only when they are correct enable ScrollTrigger again. There were no `onEnterBack` and `onLeave` callbacks in your code, so I don't know what you want with them, here are the docs on those https://greensock.com/docs/v3/Plugins/ScrollTrigger https://codepen.io/mvaneijgen/pen/MWQNOyB?editors=1010
    2 points
  23. It looks like you you forgot to follow Steve's advice and put an empty dependency Array on your useEffect(), so that was getting called every render. Also, you weren't cleaning up your ScrollSmoother. Apparently Next.js re-fires that useEffect() when you return to the page. You never called .kill() on your original ScrollSmoother. Multiple ones were being created on every reroute there. useEffect(() => { let smoother = ScrollSmoother.create({ ... }); return () => smoother.kill(); // <- IMPORTANT! }, []); // <- Also important (empty Array) https://codesandbox.io/s/long-cherry-fpouf3?file=/components/Layout.js:386-854
    2 points
  24. Hey there. GSAP isn't a renderer - it's just for animating things ☺️. You can use GSAP alongside three.js, to animate elements in a scene - but not 'instead of' Hope this helps!
    2 points
  25. When I open the app I'm getting an internal server error. The first thing I noticed is that in your Layout component you don't have a dependency array on the effect that generates the ScrollSmoother. Any time the layout re-renders, it will create a new ScrollSmoother that will inevitably cause problems. Something with the CSB is causing tons of errors, making it difficult to debug. I don't see any other outright errors though.
    2 points
  26. Consider putting your animateButtonRight function in a useCallback. Currently, any time your component re-renders, it will recreate that function. Changing component state will cause that component to re-render. So every time you are changing state, you are creating a new animateButtonRight function with a new timeline, etc. const animateButtonRight = useCallback(() => { // gsap here }, []) // <- empty dependency array so that your function never re-renders While your solution to set the button to disabled works, it's better to handle this with state to keep the DOM and VDOM synced.
    2 points
  27. The way you are trying to make the image appear won't work. There's a number of ways to do this, but I animated a clip-path. Definitely needs some tweaking, but this is the general idea: https://codepen.io/SteveSDaBest/pen/abqedjy
    2 points
  28. Looks like the following animation by our @Carl this is a great tutorial to get you of the ground
    2 points
  29. A long time ago I wrote this Gulp task: https://github.com/dipscom/zipping-task/blob/master/gulpfile.js Don't really remember the ins and outs of it but I do remember it worked back then.
    2 points
  30. Ah, then it gets a bit more complicated. The animation can stay kinda the same, but I would change the layout. Instead of them overlapping by default I would lay them out how they should look like if there was no animation. Then with the animation code calculate how much they need to move until they overlap each other and animate from that position. Instead of using known values you can use function based values in the animation. I know the height of the card (maybe you want to calculate that on page load if the card height changes when with page size, but for now its 500px) here is the line of code that gets a bit more complicated y: (index) => height * (cards.length - (index + 1)) The height of the card is `500`, there are in total `3` cards and the `index` is the number of the card (`1`, `2`, `3`), so for the first card this calculation is `500 * (3 - 1) = 1000`, so this card moves from a `1000px` to its end value. And the second one `500px` and the last one `0px`. Then I do the same with the duration, something that needs to move `1000px` needs more time than something that only moves `500px` and the stagger is also calculated to be timed with the duration of each card. You can still do a lot with the timings of the start and end values of ScrollTrigger, but I leave that to you and maybe you want to get the height of the card dynamically, because for the end product I don't thing `500px` is the perfect size for all screen sizes. Good luck. https://codepen.io/mvaneijgen/pen/NWyZewQ?editors=0010
    2 points
  31. Hello! I run an established WordPress agency (https://freshysites.com/) and we are looking for ongoing reliable GSAP development support! Here is an example of a previous project that we worked on that would be an example of the type of thing we're looking for: https://bravogroup.us/ Opportunity to work PT or even FT depending on other front-end development skills. Project basis as well if that is preferred Feel free to reach out to me here or via email (ben@freshysites.com) if interested! Thanks! Ben
    2 points
  32. No ETA exactly, but I'll DM you with a beta version of a new feature we're working on that should be a big help in working around the double-call stuff (and also streamline several other things). 👍
    2 points
  33. I noticed several problems: You're using a VERY old version of GSAP. Ancient. I would strongly recommend updating and using the newer, more modern syntax. See You've got custom code for the scroll smoothing which we can't really support here. You might want to look into ScrollSmoother. The main issue (from what I can guess looking at the custom code) is that you aren't updating the smooth-scrolling size when you open/close the accordion. It changes the size of the <body>. You only have a "resize" event handler on the window, thus it will only adjust when the user actually resizes the viewport but in your case you want it to happen when the click on the accordion (AFTER it is done animating open/close). You'll have to adjust that in your code.
    2 points
  34. That's because you have custom logic driving all the smooth scrolling that's not taking into account the resizing. You might want to consider just using ScrollSmoother instead: https://codepen.io/GreenSock/pen/JjLojVq Otherwise, you'll need to fix your custom logic.
    1 point
  35. Yep, seems like a good solution. Another way to do it (not "better") is to split it apart into the center horizontal line that you can animate the scaleX from 0 to 1 with transformOrigin: "50% 50%", and then the two vertical lines you could animate scaleY from 0 to 1 where their transformOrigin is appropriate (top for one, bottom on the other). No drawSVG needed at all in that case. I hope that helps.
    1 point
  36. You could extend the helper function with an argument/parameter for the targetted frame you'd want to end on. Something like in the pen below - but please note, I just quickly threw it in there without thinking of it too much, i.e. without thinking of side-effects that might possibly come with it. Also from a GSAP API perspective this sort of feels weird, because that place where I set the frame to target there, usually (in timelines) is reserved the position parameter - so just think of this as a suggestion for now LottieScrollTrigger({ target: "#natural-gas", path: "https://assets3.lottiefiles.com/packages/lf20_hr1knadb.json", scrub: false, pin: false, duration: 2, delay: 0.4 }, 120); // <---- You've got 240 frames in total, so 120 would go to 50% // If you don't set anything here, it will go to 100% as before // helper function function LottieScrollTrigger(vars, targetFrame) { // <----- don't forget to add the parameter // ... gsap.to(playhead, { // ... frame: targetFrame || animation.totalFrames - 1, // <----- // tweens to either the targetFrame you defined // or to the end, if none was defined // ... }); // ... } https://codepen.io/akapowl/pen/oNqNjpK Edit: Also, here is an idea for an approach with drawSVG ... https://codepen.io/akapowl/pen/xxWxwMv ... with this as a basis. Maybe it will help. https://codepen.io/akapowl/pen/poLogwY Edit 2: And just to show how to possibly extend this even further, here is another version where you can also feed in a value for the start percentage from where to tween. Happy Tweening! https://codepen.io/akapowl/pen/VwXweJy
    1 point
  37. HI @Its_Lefty is this something what you are looking for. I've updated `textContent` instead of `var` and set `snap: { textContent: 1 }` to snap to whole numbers. https://codepen.io/mvaneijgen/pen/ZExzjRq?editors=0111
    1 point
  38. That's totally fine. I've had literally thousands of tweens running simultaneously before. 5 timelines is nothing. Just make sure you're not creating conflicting tweens/timelines where they're trying to control the same properties of the same elements at the same time to different values.
    1 point
  39. tl.to('.box1', { some Animation}, 'sameTime') tl.to('.change1', { backgroundColor: 'red' }, 'sameTime') that's all you need. Please make a full minimal demo. All the demos you post do have an animation. An you talk about changing background colors but nothing changes colors in your demo
    1 point
  40. Then why not add them to the timeline? If they are on the timeline they will always be insync. The code you show has nothing to do with changing the backgroundColor, so I'm lost at what this should do. Please add it to a minimal demo. I have the feeling you're overcomplicating things, it is not to be mean, but things are rarely complicated using GSAP. I would recommend just building the timeline (quick and dirty), just with the knowledge that you have right now and then come back with the question: at second XX I want the animation to ... but it is doing ... Right now I don't know what you are trying to do, so I can't see what is wrong.
    1 point
  41. I'm not sure I understand the effect you are trying the achieve or the problem you are experiencing. Could you describe the issue more specifically?
    1 point
  42. I'm not at all familiar with Heroku, but I know yarn has long-standing bugs related to private repos (unrelated to GSAP). Maybe these posts will help: You may need to ask Heroku for their help. You could switch to npm instead of yarn. We're happy to answer any GSAP-related questions, though.
    1 point
  43. That's because you're creating a bunch of conflicting tweens that are fighting with each other for control on every mousemove event. Just set overwrite: true on your line tweens and that fixes it.
    1 point
  44. Yeah, I highly recommend the tutorial @mvaneijgen posted. That being said, here is what I was imagining: https://codesandbox.io/s/cranky-hodgkin-o86p0l Again, go the stagger example by carl is overwhelmingly preferred.
    1 point
  45. Thanks this has put me on the right track now and this has helped too https://codepen.io/PointC/pen/rNpXXWq
    1 point
  46. MotionPathHelper is a membership benefit of Club GreenSock ("Shockingly Green" and higher). It is not in the public repository. It doesn't look like you have joined Club GreenSock yet. There's a special trial version that you can use locally, on CodePen.io and CodeSandbox.io (it won't work on other domains) here: https://www.npmjs.com/package/gsap-trial. So you'd install that and then import from "gsap-trial/MotionPathHelper". Again, do not deploy that file - it's just meant for trial use. Once you join Club GreenSock, you'll get access to the private repository and the zip download that has the unrestricted files. Join at https://greensock.com/club Happy tweening!
    1 point
  47. Hello there, @Volt 22 As the forum guidelines state, we can not troubleshoot live websites, as there is just too much involved with that. If you do have GSAP specific questions and ideally post a minimal demo alongside your question, you'll immensly increase your chances of getting a solid answer and be helped. If you want to re-create the effect on that website you linked as a reference, I honestly don't think, ScrollTrigger would be the best tool of choice, as it very much looks to me, like they are not basing things off of normal scroll-behavior at all, but are probably listening to the neccessary events like mouse-wheel scroll, key events etc. and animate things based on those - similar to what these following examples do (one of them even has a very similar effect going on). Maybe they can help getting closer to what you want to achieve. Happy tweening! https://codepen.io/BrianCross/pen/PoWapLP https://codepen.io/PointC/pen/MzWzyv https://codepen.io/bassta/pen/kDvmC
    1 point
  48. If you need a primer on SVG masks and clip-paths, I have one on my training site. https://www.motiontricks.com/svg-masks-and-clippaths/ Happy tweening.
    1 point
  49. Yes, @mikel is right. Here are a few examples: https://codepen.io/GreenSock/pen/vYNNvMj https://codepen.io/GreenSock/pen/QWjjYEw https://codepen.io/GreenSock/pen/OJyPmgX
    1 point
  50. Hi cocacrave, Welcome to the forums! Every time I think I am getting the hang of JavaScript and being able to read code, someone throws me off my little horse... Is this the fabled ES6? Do forgive my ignorance, I never get to play with the shiny new web toys.... So, assuming it is and that's a function that's being called on a user click I would say the following (which may or may not be right): The reverse is never going to work because every time you click, you are creating a new paused timeline. Regardless of the state of your menu. If your menu is active, it plays, if your menu is not active it reverses - but the timeline already is at the start so, it won't move. You need to create your timeline outside of the click event to stop it being overwritten. const menuLine1 = document.getElementById('menu-line1'); const menuLine2 = document.getElementById('menu-line2'); const menuLine3 = document.getElementById('menu-line3'); const menuLayout = document.getElementById('menu-layout'); const onClickMenuTL = new TimelineMax({ paused: true, }).to(menuLine1, 0.3, { attr: { d: 'M0 29h100v2H0z' } }, 'menuCollapse') .to(menuLine3, 0.3, { attr: { d: 'M0 29h100v2H0z' } }, 'menuCollapse') .set(menuLine2, { opacity: 0 }) .to(menuLine1, 0.3, { rotation: 40, transformOrigin: '50% 50%' }, 'menuRotate') .to(menuLine3, 0.3, { rotation: -40, transformOrigin: '50% 50%' }, 'menuRotate') .to(menuLayout, 0.3, { opacity: 1, display: 'block' }); export const onClickMenu = (menuIsActive) => { if (menuIsActive) { onClickMenuTL.play(); } else { onClickMenuTL.reverse(); } };
    1 point
×