Jump to content
Search Community

Rodrigo last won the day on May 15

Rodrigo had the most liked content!

Rodrigo

Administrators

  • Posts

    6,796

  • Joined

  • Last visited

  • Days Won

    290

 Content Type 

Everything posted by Rodrigo

66
67
68
...
271
Page 67 of 271  
  1. Rodrigo
    Well... not really, it was released in 3.11 over a year ago: https://gsap.com/blog/3-11/ Happy Tweening!
  2. Rodrigo
    Hi @Imran A and welcome to the GSAP forums! The main reason for the issue is that you are not using GSAP Context: https://gsap.com/docs/v3/GSAP/gsap.context() When working with React and React environments (Next, Gatsby, etc), always use GSAP Context. Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE. In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once. Here's the structure: // typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start. useLayoutEffect(() => { let ctx = gsap.context(() => { // all your GSAP animation code here }); return () => ctx.revert(); // <- cleanup! }, []); This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background. Here is a fork of your demo: https://stackblitz.com/edit/gsap-react-basic-f48716-ztn5zt?file=src%2Fhome.js Finally I strongly suggest you to go through our GSAP & React resources to learn more about correctly using GSAP in React projects: https://gsap.com/resources/React/ Hopefully this helps. Happy Tweening!
  3. Rodrigo
    Hi, I'm not seeing any issues with the Draggable instance in your codepen demo. Are you sure that the demo is actually reproducing the problem you're seeing? The demo doesn't have any scroll whatsoever so the instances with the ScrollTo Plugin are doing nothing actually 🤷‍♂️ Happy Tweening!
  4. Rodrigo

    GSAP and Next.js

    Rodrigo replied to krystln's topic in GSAP

    Hi @krystln and welcome to the GSAP forums! The issue here is that you're not setting the correct ids for the wrapper and content elements. By default ScrollSmoother looks for this DOM structure: <body> <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> <!-- position: fixed elements can go outside ---> </body> This is what you have in your demo: <div id="scroller-wrapper"> <div id="scroller-wrapper"> </div> </div> You have to use either the default setup (see the first code snippet) or tell ScrollSmoother the specific element or selector for the content. We have some base examples for using ScrollSmoother in Next apps: https://stackblitz.com/edit/nextjs-efumgr This one uses the app router: https://stackblitz.com/edit/stackblitz-starters-lq58ww Hopefully this helps. Happy Tweening!
  5. Rodrigo
    Hi @sammekekko and welcome to the GSAP forums! Thanks for being a business user and supporting GSAP! 💚 Yeah, this seems more a requirement of the i18n API more than anything, basically something (callback or some reactive property) that tells you when the language switch is completed in order to create the animations again. I don't have time now to create a full example of this, but my guess is that these type of packages don't create a full re-render of the components, meaning that they don't remove the current DOM elements and replace them with new ones. As far as I can remember i18n packages just replace the content of those DOM elements (based on JSON files that contain the texts for each language). Are you 100% sure that the watcher you have in place is working? I mean have you added some console logs in it in order to check if the watcher is actually running? Maybe you can setup a watcher for the locale route instead: https://i18n.nuxtjs.org/api/composables#uselocaleroute Also digging a bit more into this I found this: https://i18n.nuxtjs.org/guide/runtime-hooks Here is an example of how is used: https://stackblitz.com/edit/nuxt-starter-avudph?file=pages%2Findex.vue,plugins%2Fi18n.ts You could use that with a global composer or directly from the nuxtApp instance in your component. Hopefully this helps. Happy Tweening!
  6. Rodrigo
    Hi @mquint and welcome to the GSAP Forums! The main issue is that you are working with React and you're not using GSAP Context: https://gsap.com/docs/v3/gsap/methods/gsap.context() Adding this to your animations.js file: export default function animate() { gsap.registerPlugin(ScrollTrigger); const tl = gsap .timeline({ scrollTrigger: { ... } }) // ... instances here return tl; } And then making this change to your App.js file: useLayoutEffect(() => { const ctx = gsap.context(() => { timeLine.current = animate(); }); return () => ctx.revert(); }, []); Seems to work as you expect. Finally I strongly recommend you to check the resources in this page: https://gsap.com/resources/React Hopefully this helps. Happy Tweening!
  7. Rodrigo
    That is because the start point of your ScrollTrigger instances. Honestly I'd stick with the solution Jack provided but if you want to use reset maybe this approach could be useful: https://codepen.io/GreenSock/pen/poqGXZE Hopefully this helps. Happy Tweening!
  8. Rodrigo
    Hi, You were missing the onThrowUpdate callback to run the same logic you already have in your onDrag callback: onThrowUpdate : Function - A function that should be called each time the InertiaPlugin tween updates/renders (basically on each “tick” of the engine while the tween is active). This only applies to the tween that gets generated after the user releases their mouse/touch - the function is not called while the user is dragging the element (that’s what onDrag is for). By default, the scope of the onThrowUpdate is the Draggable instance itself, but you may define an callbackScope if you prefer, just like any other tween. Here is a fork of your codepen: https://codepen.io/GreenSock/pen/gOZqNXE Hopefully this helps. Happy Tweening!
  9. Rodrigo
    Hi, Maybe you are using React or another UI framework like Vue, Svelte? If so you could check GSAP Context: https://gsap.com/docs/v3/gsap/methods/gsap.context() We have a series of collections of templates for different frameworks on Stackblitz. React: https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters Vue: https://stackblitz.com/@GreenSockLearning/collections/gsap-vue3-starters Svelte: https://stackblitz.com/@GreenSockLearning/collections/gsap-svelte-starters Also check this example by @mikel https://codepen.io/mikeK/details/yLMrwrK Other than that, there is not a lot we can do without a minimal demo that clearly illustrates the issue. Happy Tweening!
  10. Rodrigo
    Be sure that the elements are there when the arrays are created, I mean right after you create the array do a console.log(), maybe they're not present at the moment the animation is being created, especially considering the fact that you are using a third party package to split your text. You should look into that package's API in order to find out when the elements are ready, it could take some time. Happy Tweening!
  11. Rodrigo
    Honestly I couldn't tell you without dissecting your code line by line and following step by step what's happening. Unfortunately we don't have the time resources to do that. In a quick glance what I can see is that you have this two methods initCard and TextSlideUp. In both you are creating ScrollTrigger instances that use the same trigger, both have invalidateOnRefresh: true and maybe the animations attached to those could be targeting the same elements, so that's where I'd look first, maybe try to create all animations in one go and in a single timeline, if possible. Also create those ScrollTrigger instances in the order they appear on the screen. Hopefully this helps. Happy Tweening!
  12. Rodrigo
    Hi, Besides echoing the need of a minimal demo I can notice that you are using React but you are not using GSAP Context. When working with React/Next, always use GSAP Context: https://gsap.com/resources/React Also you are not passing a dependencies array to your effect hook, that means that the code inside of it will execute on every re-render of that component: useLayoutEffect(() => { const ctx = gsap.context(); return () => ctx.revert(); // <- Cleanup!! }, []);// this runs only when the component mounts Hopefully this helps. Happy Tweening!
  13. Rodrigo
    Hi @Don AW and welcome to the GSAP Forums! Thanks for being a Business user and supporting GSAP! 💚 Is not quite clear to me what exactly you're trying to do. The code in the demo you provided is working exactly as it should. I don't see any problems with the markers. Keep in mind that you are telling ScrollTrigger that the animation should start when the top of the trigger hits the top of the viewport, so the markers being at the top is exactly where they should be. As for the pinning there are two problems in your code. If you want the next element to wait and not show in the viewport while the element you're using as trigger is still pinned then removed the pinSpacing: false option from your config object. That basically tells ScrollTrigger that the element should remain in that position but the content after the element being pinned should not be pushed down. You are pinning an element in your component that is not the outmost parent. That causes the element being pushed in an uneexpected way. Here is a fork of your demo: https://stackblitz.com/edit/nextjs-lhgtnk?file=pages%2Findex.js,components%2FStylists.tsx Finally when using GSAP in React/Next always use GSAP Context: https://gsap.com/resources/React Hopefully this helps. Happy Tweening!
  14. Rodrigo
    Hi @gringo_pablo and welcome to the GSAP forums! Take a look at these examples for inspiration: https://codepen.io/GreenSock/pen/qBawMGb https://codepen.io/GreenSock/pen/mdVyPvK Hopefully this helps. Happy Tweening!
  15. Rodrigo
    Hi, I strongly recommend you keep using GSAP Context/MatchMedia when working with React/Next. What you could do is to just kill the loop instances by hand in the cleanup phase: useLayoutEffect(() => { const ctx = gsap.context(() => {}); const loopOne = verticalLoop(/*...*/); const loopTwo = verticalLoop(/*...*/); return () => { ctx.revert(); loopOne.kill(); loopTwo.kill(); }; }, []); I couldn't tell you exactly what the issue is here, but is quite specific to some minor update in React or something in React's build process and a specific part of the loop function, nothing more. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE. In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once. Here's the structure: // typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start. useLayoutEffect(() => { let ctx = gsap.context(() => { // all your GSAP animation code here }); return () => ctx.revert(); // <- cleanup! }, []); This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background. We strongly recommend reading the React information we've put together at: https://gsap.com/resources/React/ Hopefully this helps. Happy Tweening!
  16. Rodrigo
    Hi, I don't have time to go through all the logic you have there, but normally this boils down to the calculations made in order to set the correct scroll point for each slide. For that is better to use the ScrollTrigger instance associated with the horizontal tween. Since that tween has ease: "none" that makes it super easy by using the number of panels and the scroll amount between the start and end points. Here is a super simple example: https://codepen.io/GreenSock/pen/eYbxbEK Hopefully this helps. Happy Tweening!
  17. Rodrigo
    Hi @mbisht and welcome to the GreenSock forums! We totally understand the relevance of React/Next in web development, but we also acknowledge other frameworks and vanilla projects as well. Because of that we work tirelessly to keep GSAP framework agnostic so every developer out there can have fun and creating amazing UIs with it. As mentioned in this thread, this is just the nature of how HTML/CSS/JS works: As you can see from that article we do our best to give our users the simplest and most robust solution possible. Sometimes that can be a bit more complicated or cumbersome, but that is due to the way some specific frameworks do their thing. Happy Tweening!
  18. Rodrigo
    Hi, Have you tried with the tick() method in order to make sure that everything is updated properly before creating/running the Flip animation? https://svelte.dev/docs/svelte#tick Happy Tweening!
  19. Rodrigo
    Hi, I think you might have stumbled into a bug here. Maybe a regression from a previous version. In the mean time please use version 3.11.5: https://stackblitz.com/edit/vitejs-vite-xnt3mj?file=src%2FApp.jsx Sorry for the inconvenience, we'll keep you posted in this thread! Hopefully this helps. Happy Tweening!
  20. Rodrigo
    Hi, Sorry to hear about the inconvenience. I'm not in front of my computer now and testing on my android phone it works as expected. I scroll down until I finish that section's animations, thenI go to the photography page, then I click on ACCUEIL to go back to the home page and I can see all three elements on the Mes expériences part ?‍♂️ Finally there's not much we can do to debug a live site, so I can't tell if you've refactored the code usin GSAP context properly or not. Sorry I can't be of more assistance. Good luck with your project! Happy Tweening!
  21. Rodrigo
    Hi, I don't have time to go through all your code so instead I came up with, what at least I consider, a good starting point for this: https://codepen.io/GreenSock/pen/GRPwbzo Hopefully this helps getting you started. Happy Tweening!
  22. Rodrigo
    Hi @Youness-ma and welcome to the GreenSock forums! Maybe this example by @Carl can help: https://codepen.io/snorkltv/pen/ExVEOPa He made a blog post and youtube video about this demo as well, where He clarifies every aspect of this concept: https://www.snorkl.tv/greensock-staggers-with-seamless-loops/ Hopefully this helps. If you keep having issues, please create a minimal demo that clearly illustrates the issue you're having. Happy Tweening!
  23. Rodrigo
    Hi, Maybe something like this: https://codepen.io/GreenSock/pen/rNoQgrW Keep in mind that the start and end points strings are two different text elements (could be letters or numbers) separated by a single space. Your setup has an extra space: start: 'top +=' + (cumulativeHeight) + ' 10%', end: 'bottom +=' + (cumulativeHeight + slide.clientHeight) + ' 10%', See how you have top[space]+=cumulativeHeight[space]10%? It should be top+=cumulativeHeight[space]10%. Most likely that extra space was causing this. Hopefully this helps. Happy Tweening!
  24. Rodrigo

    Swoosh Slider

    Rodrigo replied to zurakobakhidze's topic in GSAP

    Hi, You are right, that's a lot of code there! Unfortunately we don't have the time resources to comb through all that code and find a way to improve it and/or provide free general consulting. There are plenty of examples in the forums of content sliders. These are just a few: @PointC https://codepen.io/PointC/pen/YRzRyM GreenSock collection: https://codepen.io/GreenSock/pen/jOQXYzV https://codepen.io/GreenSock/pen/vYQbZYy https://codepen.io/GreenSock/pen/JjrWXNq https://codepen.io/GreenSock/pen/QWGXdyd Even though their codes are not identical they follow a similar pattern in how to move from one slide to another. Loop or no loop in the code, that's pretty much the key in these scenarios. Hopefully this helps. Happy Tweening!
  25. Rodrigo
    Hi, When it comes to performance and optimization, there is an argument to be made about everything. Whether or not making such argument makes sense or is worth making it, that's an entirely different thing. When it comes to performance is always a good idea to test, test, test. If you see something that is not working then try a different approach. Blake's approach is great and should work really nice regardless of the UI framework you use (React, Vue, Svelte, Alpine, etc). Just be sure that you append the fragment to an element that will be removed when the route changes (the view is unmounted) or manually do so in the cleanup phase of the effect hooks. As for specific React performance issues, normally those could arise in this cases because you are tying something to the state in order to create the elements, updating some state property constantly (causing a bunch of re-renders). Other than that any performance problem will happen regardless of the framework (if you are using one). Is using a document fragment in React something that can be done? Sure why not. Again if you are careful about it it shouldn't cause any issues. Maybe some React purists will consider you a blasphemous, but those are React purists being React purists (see the first paragraph and instead of performance use react best practices) ?‍♂️ Finally you are using GSAP Context in your effect hook but you are not reverting it in the cleanup phase of your effect hook: useLayoutEffect(() => { const ctx = gsap.context(() => {}); return () => ctx.revert(); // <- easy cleanup! }, []); Take a look at the resources we have in this page: Hopefully this helps. Happy Tweening!
66
67
68
...
271
Page 67 of 271  
×
×
  • Create New...