Jump to content
Search Community

balocreation

Members
  • Posts

    17
  • Joined

  • Last visited

balocreation's Achievements

  1. Thanks, I have fixed it... I add extra class to the element I want to pin, then adjust the start and end value... const faqsContent = gsap.timeline({ scrollTrigger: { trigger: ".faqs", start: "top center", end: "bottom top", scrub: 1 } }); faqsContent.from(".faqs-img", { scale: 1.5 }); faqsContent.to(".faqs-mask", { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" }, 0); faqsContent.to(".faqs-mask", { duration: 1, scale: 1 }); gsap.from(".faqs .card", { y: 50, opacity: 0, duration: 1, stagger: 0.25, ease: "expo.out", scrollTrigger: { trigger: ".faqs", pin: ".sticky", pinSpacing: false, start: "top 70px", end: "bottom bottom", scrub: 1 } });
  2. Thanks, I have fixed it. const createSplits = () => { Array.from(document.querySelectorAll(".section-heading")).forEach(el => { if(el.motion) { el.motion.progress(1).kill(); el.split.revert(); } el.split = new SplitText(el, { type: "lines,words,chars", linesClass: "split-lines" }); el.motion = gsap.from(el.split.chars, { scrollTrigger: { trigger: el, toggleActions: "restart pause resume reverse", start: "top 100%", end: "bottom top" }, y: "0%", opacity: 0.2, duration: 0.02, rotationX: -0, ease: "none", stagger: { amount: 0.8, from: "start" } }); }); } ScrollTrigger.addEventListener("refresh", createSplits); createSplits();
  3. That is not what I wan't to do, I want it to pin + the image animation.
  4. Please help me with the code snippet, I've tried all my possible best, I don't get it.
  5. Hello, I want to create infinite testimonial scrolling, but is not working...
  6. Hello, I want to pin the image while the FAQs is still scrolling, I've tried pin and pin spacing is not working.
  7. Hello, I want to reveal the text colour with split text on scroll with scroll trigger just like the one on https://www.bequant.com/. I can split the text but I don't get the reveal. Thanks in advance.
  8. Smile, I will join club greensock, but currently I'm learning GSAP its not fr production. Thanks for this ultimate library.
  9. No I didn’t, the code pen is a demo from @PointC which is made with ScrollTrigger, SplitText and SmoothScroller. I want to do it with ScrollTrigger only.
  10. Hello, I want to achieve the text color reveal with scroll trigger only.
  11. It didn't work perfectly, the next section create spaces on scroll.
  12. Thanks, it now work perfectly... I really appreciate.
  13. I can't click or hover on html elements. Example: I can't toggle an accordion.
  14. Hello everyone, I'm new here and new to GSAP. I want to animate the overlay and loop the overlay animation on scroll.
×
×
  • Create New...