Jump to content
GreenSock

Rodrigo last won the day on February 1

Rodrigo had the most liked content!

Rodrigo

Administrators
  • Posts

    3,247
  • Joined

  • Last visited

  • Days Won

    199

Rodrigo last won the day on February 1

Rodrigo had the most liked content!

Profile Information

  • Gender
    Male
  • Location
    Santiago - Chile

Recent Profile Visitors

35,455 profile views
  1. 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!
  2. 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!
  3. 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!
  4. 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!
  5. 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!
  6. 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!
  7. 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!
  8. 🥳 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!
  9. 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!
  10. 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!
  11. 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
  12. 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!
  13. 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!
  14. 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!
  15. 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!
×