Jump to content

Rodrigo last won the day on February 1

Rodrigo had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Rodrigo

  1. I can only think of two possibilities: The margin of the <p> tags and the collapsing margins in the box model spec: https://www.w3.org/TR/CSS2/box.html#collapsing-margins By the time the from instance is instantiated the height of the element is not it's natural height, maybe set a timeout in order to wait for a few ms (at least 20 so is more than 1 tick from GSAP). Happy Tweening!
  2. Hi @phil21 and welcome to the GreenSock forums! Thanks for the simple example, that made it super easy! 🥳 The main issue in this cases is to get the start position and width of the element and since the side handles are inside the containers keeping them in place is super easy. I made this example in codepen since I didn't had time to go through the whole React setup, but porting it to React shouldn't be too complicated. Also this considers the left handle but setting up the right one should follow a similar logic: https://codepen.io/GreenSock/pen/YzjdjWp Sorry I wasn't able to come up with a full solution, but hopefully this is enough to get you on the right handle-track . Let us know if you have more questions. Happy Tweening!
  3. Hi, ScrollSmoother is not in the file you're using: <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script> That is not a GreenSock tool so that's why you're getting that error. The library you're pointing to is this: https://github.com/gblazex/smoothscroll-for-websites ScrollSmoother is a bonus plugin that comes with a Club GreenSock membership: https://greensock.com/scrollsmoother/ You can still test it in your local environment installing the gsap-trial package: https://www.npmjs.com/package/gsap-trial Also you can try it in Codepen forking this: https://codepen.io/GreenSock/pen/aYYOdN Hopefully this clear things up. Happy Tweening!
  4. Hi, I'm not seeing any flickering in both Firefox and Chrome on Ubuntu 20 and 22. What specific browser and OS is giving you this trouble? What I could suggest is to add the will change property to the figure element: #section1 figure.block1{ width: 100%; height: 100%; will-change: transform; } Another option would be to animate the images instead of the figure tag, I don't know if that could help but just typing things that I'd try. Add the will change property to the smooth content container: #smooth-content { will-change: transform; } Make the scroll amount for the images animation shorter, maybe a faster animation could translate into less or no flickering. Finally if nothing works try the next release of ScrollTrigger: https://assets.codepen.io/16327/ScrollTrigger.min.js Hopefully this helps. Happy Tweening!
  5. Hi @bugsMaker and welcome to the GreenSock fourms! There is no issue in creating different ScrollTrigger instances for each animation as long as they don't animate the same properties. Here is a super simple example: https://codepen.io/GreenSock/pen/BaPvVzK Let us know if you have more questions and remember to include a minimal demo. Happy Tweening!
  6. Hi, Just follow the installation instructions here: https://greensock.com/docs/v3/Installation#npm-club In the same page you can watch the video in the middle : Hopefully this clear things up. Let us know if you have more questions. Happy Tweening!
  7. Absolutely, just use either session or local storage, whichever makes more sense to you. I believe both have the same API so implementation should be the same. I would create a method to store in a single object all the possible animation variables for zoom, pan and rotation passing the specific object for each event. For example if you pan, then pass an object with the x and y coordinates. If you zoom the viewbox values for that specific zoom level. Finally if you rotate the rotation angle. When you refresh the page read if there's any value stored, if there is just apply it using a to or set instance (depending if you want to implement them immediately or animate the implementation). In my limited experience with this API, when working with session/loca storage simplicity is the key, in order to prevent complex write/read operations when you're using it. Hopefully this helps. Happy Tweening!
  8. Hi, Without a minimal demo is hard to know exactly what you're trying to do. The only suggestion I could offer is to create another ScrollTrigger instance for the element that covers half of the screen and toggle a boolean using ScrollTrigger onEnter/Back and onLeave/Back callbacks and check that boolean in the onUp and onDown callbacks of the other ScrollTrigger. Let us know if you have more questions. Happy Tweening!
  9. I think it could be related to the calculations being made in order to set the new height. I think the best approach (if you don't want to use the Flip approach) would be to wrap everything that has padding and margin inside an element that doesn't and animate that element's height. That element of course should be the one with overflow hidden. Hopefully this clear things up. Happy Tweening!
  10. Hi @Nikos Xenakis and welcome to the GreenSock forums! First thank for being a Club GreenSock member and supporting GreenSock! The main issue is that you're looping through all the texts in all the cards. What you should do is select all the texts for each card in your loop and then use those to create the instances inside each section's timeline: cards.forEach((card, index) => { const cardTexts = card.querySelectorAll(".pinned-img-fade-card__text"); const animationTimeline = gsap.timeline({ scrollTrigger: { trigger: card, start: "top 15%", end: "+=240%", toggleActions: "restart none restart none", markers: true, scrub: true, pin: true } }); cardTexts.forEach((text) => { animationTimeline.fromTo( text, { opacity: 0 }, { opacity: 1, ease: "none", repeat: 1, yoyo: true } ); }); }); Here is a live example: https://codepen.io/GreenSock/pen/ZEjVpMy As for the spacing between elements using pin: true, that comes with the territory I'm afraid. What you could do is make each card's height 100vh so you don't get that feeling like this: https://codepen.io/GreenSock/pen/NWMZrbj Another option you could explore is pin the entire section and switch the images and animate the text, like this: https://codepen.io/GreenSock/pen/YzyqVNe Hopefully this helps. Let us know if you have more questions. Happy Tweening!
  11. You can create a React Context instance and use that to communicate with the components as discussed in this thread: Here you can check the live example: https://stackblitz.com/edit/nextjs-hcqury?file=pages%2F_app.js,components%2Flayout-wrapper.js,context%2FSmootherContext.js,pages%2Findex.js Happy Tweening!
  12. No, what you can do is create an element that has the same position and dimensions that it has in the next page, create the Flip animation and once that is complete make the page transition. You cannot create a Flip animation (or any animation for what matters) for an element that is not in the DOM yet. Hopefully this clear things up. Happy Tweening!
  13. Hi, As I mentioned before this seems more related to when the ScrollTrigger instances are created more than anything else. As soon as I wrapped the method you're using to create the animations inside a timeout it works: https://stackblitz.com/edit/nextjs-fkstzp?file=pages%2F_app.js,pages%2Findex.js,components%2FIntro.js,components%2FOverview.js What you need is a way to communicate to the child components that the ScrollSmoother instance is created. Another option could be, seeing that you have everything in just one page, to conditionally render the components after the ScrollSmoother instance is done. Happy Tweening!
  14. Hi, I insist that this is the perfect job for the Flip plugin. I wouldn't create and add a new element in the DOM just have an empty element and update the src of the image in that target element and leave the rest for Flip. https://greensock.com/docs/v3/Plugins/Flip Take a look at this examples: https://codepen.io/GreenSock/pen/XWKLYWe https://codepen.io/GreenSock/pen/MWyGoxZ https://codepen.io/GreenSock/pen/QWNZgWX Hopefully this helps. Happy Tweening!
  15. Hi @juanadie and welcome to the GreenSock forums! First thanks for being a Club GreenSock member and supporting GreenSock! In this case is better to check the ScrollTrigger start/end points for each timeline and feed that value to the ScrollTo plugin: const timelines = [timeline1, timeline2, timeline3, timeline4, timeline5]; const links = gsap.utils.toArray(".link"); let currentIndex = 0; const gotoSection = () => { const targetSt = timelines[currentIndex].scrollTrigger; gsap.to(window, { scrollTo: { y: targetSt.start, autoKill: false }, duration: 1 }); }; links.forEach((link, i) => { link.addEventListener("click", (e) => { e.preventDefault(); currentIndex = i; gotoSection(); }); }); const prevBtn = document.getElementById("prev"); prevBtn.addEventListener("click", () => { if (!currentIndex) return; currentIndex -= 1; gotoSection(); }); const nextBtn = document.getElementById("next"); nextBtn.addEventListener("click", () => { if (currentIndex === links.length - 1) return; currentIndex += 1; gotoSection(); }); Here is a live example: https://codepen.io/GreenSock/pen/zYLMdwP That example uses the start point of the ScrollTrigger instance so it'll take you to the start of the timeline. If you want to go to the end of the timeline just use this in the gotoSection method: const gotoSection = () => { const targetSt = timelines[currentIndex].scrollTrigger; gsap.to(window, { scrollTo: { y: targetSt.end, autoKill: false }, duration: 1 }); }; I used the start point since it makes more sense to me as a user to go to the start of a section instead of the end when clicking an anchor link. Hopefully this helps. Let us know if you have more questions. Happy Tweening!
  16. 🥳 For now you'll have to use that file either by linking to it or download it and use it directly on your projects. Right now we don't have a release date for 3.11.5, sorry. Happy Tweening!
  17. Hi, Can you test the next release of ScrollTrigger and let us know how it works: https://assets.codepen.io/16327/ScrollTrigger.min.js Happy Tweening!
  18. Hi, The problem could stem from this: if (location.pathname === "/") { /* all your code is in here */ } All your code is contained inside that conditional block, including the prevent default method, so if the current path is not the root one nothing inside that block will be executed. If you keep having issues remember to include a minimal demo. Happy Tweening!
  19. No worries, you've been dealing with your white whale for a few days(🐋), so we can let this slip this time The final position of the icon is related to the calculations being made, so you'll have to check into that in order to get the heights and positions in order to find the correct value. Also I think you should give the Flip plugin a whirl in this one, maybe that could help: https://greensock.com/docs/v3/Plugins/Flip Happy Tweening
  20. Hi @EddieGreen and welcome to the GreenSock forums! Thanks for being a Club GreenSock member and supporting GreenSock! It's a bit hard to follow the code you pasted in your post but based on the error you're getting, you are creating a circular reference which means that you are trying to Stringify an object that has a reference to itself inside: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value I would recommend you to start really simple, with a button and a method to store something simple in the session storage and then start adding complexity to it until it breaks. Then you'll find what is causing the issue and how. Let us know if you have more questions. Happy Tweening!
  21. Just an FYI, we created a version in Vue3 as well, in case anyone is interested in that: https://stackblitz.com/edit/vitejs-vite-tn1wsx Happy Tweening!
  22. Hi @Alan Brown and welcome to the GreenSock forums! First thanks for being a Club GreenSock member and supporting GreenSock! I removed the link for your example since you pushed your .npmrc file with your private npm token in it. Please remove that and instead use the gsap-trial package in Codesandbox and Stackblitz. When you updated the example add another post in this thread with the new URL. This is happening only in the intro.tsx file or in every component you have? Where exactly are you creating your ScrollSmoother instance? I couldn't find that anywhere in your code. Can you please narrow this down to the component(s) that are actually giving you problems? Is really hard to fish issues in such a large app and we don't have the time resources to comb through a large code base like yours. If possible isolate the section(s) where this is happening and create a codepen example just for that. It would be good to isolate just the methods you're using for creating the text animations. You can use this Codepen template: https://codepen.io/GreenSock/pen/aYYOdN The only thing I can tell you right now is that you should create your ScrollSmoother instance first and then create the ScrollTrigger instances. Is also worth noticing that React render child components first and then the parent. Since is most likely that a parent is holding the ScrollSmoother instance you should be able to communicate to the child elements that the ScrollSmoother instance is ready. If you prefer you can use this starter template for using Next with ScrollSmoother and just add the component and methods that are giving you problems: https://stackblitz.com/edit/nextjs-efumgr Happy Tweening!
  23. Hi, The issue with the missing section at the bottom is more related with the paddings and how the height is being set. The flash in the animation is due to the fact that you have this in your elements: .accordionCard{ transition: all .5s; &__question{ transiton: all .5; } } This basically means that both CSS and GSAP are fighting for animating the same properties, so as soon as GSAP applies some styles to the element CSS starts animating that particular change. See the issue? It's a really bad practice to use transition all in your css. Is better to set a specific property and be sure that it doesn't collide with something being animated by GSAP. Finally I think is better to use Flip for this type of scenarios: https://codepen.io/GreenSock/pen/RwBqKvB If you want the Back out easing you'll have to tinker with the code in order to create a Flip instance for each animation, but I just wanted to illustrate how easy it is to do this with Flip. Happy Tweening!
  24. Hi, GSAP has a Lottie/ScrollTrigger helper function to simplify this: https://greensock.com/docs/v3/HelperFunctions#lottie Here is a live example: https://codepen.io/GreenSock/pen/QWdjEbx Hopefully this helps. Let us know if you have more questions. Happy Tweening!
  25. Hi, Here is the example: https://stackblitz.com/edit/vitejs-vite-w9jxwd I'm using everything inside the useLayoutEffect and the GSAP Context instance to add a method for changing the section, for simple and easy cleanup. Take a look at it and if you have any doubts let us know. Happy Tweening!