Jump to content
Search Community

All Activity

This stream auto-updates

  1. Past hour
  2. Yesterday
  3. Thanks in advance Rodrigo. I created Pen: https://codepen.io/javier-herrera-the-selector/pen/JjqMEzb Clearly is Wordpress, maybe Elementor, compatibility issue. Tried disabling all plugins but Elementor, but anyway couldnt get it to run prop. on WP; i got exactly the same.
  4. Notice you've actually got TWO scrollbars on the right side. This looks like a CSS issue in the way you set it up. Just remove the overflow-x: hidden from the html element. body { /* NOT html, body */ font-family: "Rock Salt", cursive; width: 100%; height: 100%; color: #fff; overflow-x: hidden; } Does that clear things up? Basically, your scroller wasn't what you thought it was.
  5. For anyone wondering I worked around this by replacing <br> tags with a custom <span> that simulates a <br> based on this solution. Codepen: https://codepen.io/sombrilla/pen/jOoYyqp
  6. Hello there, I created some scrolling animations with ScrollTrigger in a react app, while it works fine on desktop and mobile emulation in the DevTools, the animation won't play at all when viewing the page on a mobile device. Another thing I noticed is that the markers are kinda messed up, but the animation still works on desktop after turning the markers off. Here's the minimal demo on codepen. I've tried googling with keywords like "scrollTrigger not working on mobile" but couldn't find anything that seemed related to my problem. Still learning react and GSAP, so maybe I missed something there. Would really appreciate for any help!
  7. Hello Everyone, iam new to gsap and still learning day by day.. but in this i got stuck and not able to find any answers. what im trying to do is that i have crated a pinned Panels where panels of same class will overlap one by one, im trying to animate the full animation first rquired of that pinned element and after all the animation of that pinned element get completed then only it should start overlapping Please watch this youtube video To know what i want ; its only 10sec long video
  8. hey, I think I can manage without a POC or logic solutions, no worries there, thanks. Rest, I think we're both saying the same thing in terms of solution, I just need a bit guidance for the below. Sorry If I seem to ask the same questions again n again, but I don't think I understand if you've tried to answer these doubts. 1. Is there a way to do the above for a scroll trigger? 2. I have what I want, but I'm doing it by initializing a SECOND scrolltrigger onEnter of the first one. (Which takes care of forcing the NEW scroll trigger's animation progress). So, is this a bad thing to do (i.e creating and killing a second scrollTrigger on onEnter and onLeaveBack of the first one) ? In terms of performance, etc? 3. I was also thinking about the approach where I control the initial animation manually using onUpdate of the scrollTrigger, but is this approach better or the one with two scrolltriggers?
  9. Hello everyone, I hope you're doing great! I've just started using GSAP and have encountered a question that I'd appreciate your help with. I have a scroll slider and I want it to have an animation before it reaches a point where it moves right and up. Then, as I scroll, I want the slider to start functioning. After the slides finish, I want the slider to move upwards and left. I've tried a few things but couldn't achieve this, and the animations conflicted with each other. I'd be grateful if you could provide a solution or any guidance.
  10. My bad, it is a page transition indeed. Thanks for your replies, I will look at it.
  11. Strange I would have assumed it was routing between pages seeing as it's using barba.js https://barba.js.org/ That's the first place to start, GSAP can help you animate things, but barba (or a similar solution) is what you need to animate things between pages This example from the Barba docs shows how it works https://barba.js.org/docs/advanced/third-party/#Scroll-Trigger
  12. Thank you for this one. Client's project is actually also in Webflow and the demo has the same direction I would think of. The biggest challenge is that I need to make a seamless transition between to url's/pages (hp to CMS item and back). This demo is essentialy just one page with clever css to mimick the feeling of more pages/layouts and thus the interaction looks so smooth (no FOUC, script loading issues etc.). I will need to look at some examples of FLIP being used on interaction between actual pages. I will be happy for any tip or hint.
  13. Hi there! I'm looking to extrude a line in the way that I've shown in the attached CodePen, but when the line is revealed I then want to shrink the height of the line back to zero from the opposite end of the line. I've had a look through the documentation and tried a couple of bits out but they either don't seem to be quite right for my use case or I might be wrong in the way that I'm applying them (I think I looked at using reverse for this and changing the transform origin). It could be that I'm also using the wrong tool entirely or that there might be a suitable GSAP plugin for this, so I'd be really grateful for any pointers in the right direction here! Many thanks in advance for your help here. Sam
  14. Thank you! I went ahead and applied those changes but my events still seem to be firing twice. I moved the component to stackblitz so you could take a look. https://stackblitzstarterskgd3hx-gyvp--3000--9e2d28a3.local-credentialless.webcontainer.io UPDATE: Figured it out. The solution, for my anyway, was to: 1. attach the event listener directly on the element 2. create and leverage a ref array to grab the correct instance via index. const itemRefs = useRef([]); const timelineRef = useRef(gsap.timeline({ paused: true })); const activeItem = useRef(null); itemRefs.current = []; const addToItemRefs = (el) => { if (el && !itemRefs.current.includes(el)) { itemRefs.current.push(el); } }; const toggleClick = (clickedItem) => { if (activeItem.current === clickedItem) { timelineRef.current.reverse(); return; } // timeline code... <div className="skew-container grid grid-cols-4 gap-5 p-5 items-center h-full w-full"> {items.map((image, index) => ( <div ref={addToItemRefs} key={index} onClick={() => toggleClick(itemRefs.current[index])} className="skew-item bg-slate-500 min-h-[300px] h-full border-2 border-gray-900 rounded-lg overflow-hidden bg-cover bg-no-repeat" > <h2>{image.title}</h2> </div> ))} </div>
  15. I would appreciate it if someone can give me some hints or samples. Thank you 😭
  16. Hello, @Rodrigo. You, having a cape on your avatar, is more that accurate. You're a life savior I've done all you said, but I still have some issues. 1. In the section #4 there is a list (10 points). It's going smooth till point 3, and then it's stuck. So we can not see the whole list. 2. For example, on mobile version (vertical orientation) the sections look good. But on changing to horizontal orientation they get a bit deformed. Too much negative space and it all looks a bit stretched. Video demo of the issues: https://www.awesomescreenshot.com/video/28665812?key=75663bc5d76b436ce55c9a4088477252 https://codepen.io/arekuki/pen/gOJXbOq If you can help with these two issues, I'll be enormously happy
  17. There is no css etc. It seems that React-Three fiber does not cast the values of the mesh correctly, so that i have to use threejs and inject it
  18. Hello everyone, Right now, I'm trying to learn how to make sticky panels that get pinned one on top of the other. My main concern is that I want to animate some of the contents within the specific pinned panels. I want the next panel to start overlapping the previous pinned panel only after all the animation of that specific pinned panel is completed. Right now, everything works fine in my CodePen code, but the next panel starts overlapping too quickly, before the entire animation of the respective pinned panel contents is finished.
  19. https://www.loom.com/share/3c67d92abc98401aa18cab3191cfddf8 For the demo I record a loom for you. this is my figma animation
  20. https://www.loom.com/share/3c67d92abc98401aa18cab3191cfddf8 For the demo I record a loom for you. this is my figma animation
  21. Hi, I'm making project with React and GSSP. I want to make header effect that connect with scrolling. This is my project with codesandbox. https://codesandbox.io/p/devbox/cocky-ben-fgwh9p?file=%2Fsrc%2Futils%2FdataUtils.tsx%3A11%2C29 In my project I have got issue when click the navbar. When I click the navbar link, the navbar animation replay.
  22. Hi, Again, this is not the simplest thing to achieve. TBH I can't think of a simple way to do this without spending quite some time. Unfortunately we don't have the time resources to provide general consulting and resolve complex logic issues. The main issue is this, you have a running animation then scrolltrigger will take those elements and start animating them in the same way that the animation is working. By default ScrollTrigger will take the animation from progress: 0 to 1 for the scroll amount defined by the start/end points in the ScrollTrigger config. The problem arises to move the progress smoothly to one or somehow force the ScrollTrigger instance to start with the progress the animation has when the ScrollTrigger instance becomes active. Maybe another way is to just forget about animating the same properties with ScrollTrigger and just find a way to update the time value of the looping animation using ScrollTrigger's onUpdate callback and pause the looping animation using the onEnter callback and resume the animation using the onLeaveBack callback. I came up with this option as I was writing this, but unfortunately I don't have time right now to create something a quick proof of concept. I'll see if I can create something in the upcoming days and in the meantime you can get a crack at it and see what you can come up with. Happy Tweening!
  23. Hi, The simplest thing is to disable the scroll while that initial animation is running to prevent the user from scrolling, like a loading/splash screen, is just a 1.4 seconds wait, I don't think that there would be such a bad UX especially since the user can see some sort of initial setup. Other than that, yeah that would require a bit of custom logic in order to achieve that. Unfortunately we don't have the time resources to provide free general consulting or solving complex logic issues. Also I would advice you to use contextSafe for that method you're using to create the ScrollTrigger instance: const { contextSafe } = useGSAP(() => { gsap.fromTo(".selector", { //... onComplete: setUpScrollTrigger, }); }, { scope: container, dependencies: [isOpen, isReady] }); const setUpScrollTrigger = contextSafe(() => { gsap.fromTo(element, { //... scrollTrigger: { //... } }); }); Hopefully this helps. If you keep having issues, please create a minimal demo, using one of the starter templates we have on Stackblitz: https://stackblitz.com/@gsap-dev/collections/gsap-react-starters Happy Tweening!
  24. Hi, Maybe something like this: https://codepen.io/GreenSock/pen/jOoYEXr Still you need to have some control, at least over the styles of the footer element. Without any level of control over that, there is little that can actually be done. Hopefully this help. Happy Tweenin!
  25. Last week
  26. Hello Rodrigo, in advance, I apologize for having asked another question almost similar to this one in another forum, I am new to gsap and also to next js, but nevertheless I appreciate the advice and the solution given, therefore other problems arose with the solution 1. In this case, there are other sections above and below apart from the ones we already have, the scroll is bugged, this was the question I asked in the other forum, and I don't know how to find the solution 2. In this case there are more than 4 tabs and sections and it also fails when clicking Example code attached Example code attached
  27. Rodrigo


    Hi, This most likely has to do with cleanup after the transition is completed. I would loook into Barba's API, most specifically hooks and lifecycle in order to know exactly where to remove all GSAP & ScrollTrigger instances after the leave animation of the current view are completed and when the enter animation of the new view is completed to create the GSAP & ScrollTrigger instances. https://barba.js.org/docs/advanced/hooks/#Base-hooks https://barba.js.org/docs/getstarted/lifecycle/ Unfortunately I don't have any experience with Barba. On the other hand @Ihatetomatoes created a series of videos that integrates GSAP into Barba's transitions, so I would recommend you to check it out: Finally you could look into Stackblitz for creating a demo of your app so we can have a better look: https://stackblitz.com Hopefully this helps Happy Tweening!
  1. Load more activity
  • Create New...