Jump to content
Search Community

Rodrigo last won the day on March 27

Rodrigo had the most liked content!

Rodrigo

Administrators
  • Posts

    6,318
  • Joined

  • Last visited

  • Days Won

    274

Everything posted by Rodrigo

  1. Hi @Cossetteqc, I dug a little regarding this and SvelteKit doesn't have an option to transpile ES Modules. The alternative would be to install and configure Vite's Babel plugin in your Vite config in order to use ES Modules: https://www.npmjs.com/package/vite-plugin-babel Considering the fact that you can safely use the UMD modules from the dist folder in the GSAP package, that seems like the easiest and simplest route, just check if window is defined in order to register the GSAP plugins on the client and not when the code runs in the server. So we strongly recommend this approach and exhaust every possible alternative with this in mind before digging into the whole Vite/Babel config option just for simplicity's sake, nothing more. Happy Tweening!
  2. Sorry, I read your last post a few times but I'm afraid I don't understand what you mean. Please provide a minimal demo that clearly illustrates the problem. For example your last demo has this: tlCards.to(slide, { x: () => -(slide.clientWidth - slide.clientWidth), ease: 'none', duration: 1, }); Can you see the problem here? You have this slide.clientWidth - slide.clientWidth which equals to zero, so nothing happens. I strongly suggest you to get something working like this first: https://codepen.io/GreenSock/pen/GRLZbYr Just forget about ScrollTrigger and get the animation working as you want/need first, then add ScrollTrigger back to the mix. Probably including ScrollTrigger is adding an extra layer of work that you don't have to worry about right now. Focus only in the animation and then add ScrollTrigger, that is the easy part. Happy Tweening!
  3. Hi @smpa01 and welcome to the GSAP Forums! The reason you're seeing this is because you have this: gsap.to(this, { rotation: 360, duration: 2, ease: "none" }); Basically what happens is that the first time you click the element GSAP gets it's rotation and is 0, the it tweens it to 360, creating the animation. Then any subsequent click GSAP does the same, except this time the element's rotation is already 360 so GSAP tweens the rotation from 360 to 360, so nothing happens. This seems to work the way you intend: let rotation = 0; const rectTwoG = d3 .select("#rectTwo") .append((_) => rectOne.clone(true).node()) .attr("id", "two") .attr("y", function (d, i) { const y = parseFloat(this.getAttribute("y")) + 100; return y; }) .attr("stroke", "green") .style("pointer-events", "all") .on("click", function () { rotation += 360; gsap.to(this, { rotation: rotation, duration: 2, ease: "none" }); }); Hopefully this helps. Happy Tweening!
  4. Hi @pihu and welcome to the GSAP Forums! You can have a look at the Lottie + ScrollTrigger helper function: https://gsap.com/docs/v3/HelperFunctions/helpers/LottieScrollTrigger Happy Tweening!
  5. I'm not 100% sure I understand what you're asking but for what I can infer you're trying to create an horizontal pin, so the cards that are moving horizontally pause at some point while scrubbing? If so, that can't be done, horizontal pinning is not supported when using vertical scrolling, you are scrolling in the Y axis but you want to pin on the X axis. ScrollTrigger simply can't manage that. The demo pins an element vertically, inside that element a bunch of panels are animating on the X axis but the scroll is still vertical (on the Y axis). In order to mimic horizontal pinning you have to pause that animation on the X axis, the one that moves the cards. Here is the previous demo using ScrollTrigger: https://codepen.io/GreenSock/pen/oNOLGrJ Happy Tweening!
  6. Hi, You're making one of the most common ScrollTrigger mistakes, which is nesting a ScrollTrigger on a child instance inside a Timeline: https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens Regardless of the approach you use, what you're doing right now is bound to create logical issues as explained. Happy Tweening!
  7. Hi, Nope, you can use h1 (or any other heading as well) without any issues: https://codepen.io/GreenSock/pen/VwNjbRg Hopefully this helps. Happy Tweening!
  8. Hi, I've read your post a few times and checked the demo and honestly I don't see where is the issue here, everything is working as expected, maybe I'm missing something here 🤷‍♂️ If you could be a bit more explicit about what is happening that you don't want to happen we'll be able to provide some help. Happy Tweening!
  9. Hi, Maybe something like this: https://codepen.io/GreenSock/pen/ZEZOLMq Happy Tweening!
  10. Hi, I think the issue here stems from the approach you're using. Why not use a single GSAP Timeline to control all your accordion and then tie that to a ScrollTrigger? I don't have time to make everything for you but this is the timeline at least: https://codepen.io/GreenSock/pen/GRLZbYr Hopefully this helps. Happy Tweening!
  11. Hi, You can have as many ScrollTrigger instances as you want/need, just be super careful about creating them in the order they appear on the screen. Unfortunately without a minimal demo there is not a lot we can do to help you. You can fork this codepen in order to create a small demo that clearly illustrates the issue you're having, no need for your entire project, just a few colored divs. Using a framework/library like React, Vue, Next, etc.? CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: React (please read this article!) Next Svelte Sveltekit Vue Nuxt I don't see why not, but it might be safer to use percentages since ScrollTrigger makes all the calculations based on the viewport's height and is 100% reliable. Personally I always use percentages without any issues: ScrollTrigger.create({ trigger: ".my-element", start: "top top", end: "+=250%", }); // This will end when the scroll position has moved 2.5 times // the height of the viewport after the start point, since is // a relative value because of += Hopefully this helps. Happy Tweening!
  12. Hi, Did you tried creating the ScrollSmoother instance and your page's ScrollTriggers after the loader is completed and you toggled the display property on your main container element? let smoother; let pushUpContainer = document.querySelectorAll(".pushUpText"); fillerAnimation.to(fillerContainer, { width: "198px", duration: 6, onComplete: () => { /* Using "display:none" breaks scrolltrigger */ gsap.set(mainContainer, { display: "block" }); smoother = let smoother = ScrollSmoother.create({ wrapper: ".smooth-wrapper", content: ".smooth-content", smooth: 3.5, effects: true }); pushUpContainer.forEach((container) => { let textElements = container.querySelectorAll("h2 ,p"); let tl = gsap.timeline({ defaults: { yPercent: 30, duration: 1.5, opacity: 0, ease: "power1.inOut" }, scrollTrigger: { trigger: container, start: "top 80%", markers: true, toggleActions: "restart none none reset" } }); tl.from(textElements, {}); }); } }); I'd try something like that. Hopefully this helps. Happy Tweening!
  13. Love the plumber analogy @akapowl, your post earned a Gif!
  14. Hi, Two things: Why are you putting a scrub value if there is no animation to be scrubbed? There is no need for that IMHO. You can resort to the toggleActions config instead of using callbacks: toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". So your ScrollTrigger instance can be re-written like this: ScrollTrigger.create({ trigger: ".box", start: "center center", end: "center 49%", toggleActions: "play none none reverse", }) See? Nice, simpler and concise. Hopefully this helps. Happy Tweening!
  15. Hi, Since you have an array with all the sections that you loop trough to create the ScrollTrigger instances, you can store those ScrollTrigger instances in another array, in order to loop through and refresh just those: const stArray = []; sections.forEach(() => { navLinks.forEach((item, index) => { const rect = item.getBoundingClientRect(); stArray.push(ScrollTrigger.create({ trigger: section, start: `top ${rect.y}`, end: `bottom ${rect.y + rect.height}`, scrub: 1, toggleClass: { targets: item, className: "text-black" }, markers: true })); }); }); Then in your code: $("ul li.dropdown").on("click", function () { $(this).toggleClass("show-dropdown-menu"); stArray.forEach((st) => st.refresh()); }); Happy Tweening!
  16. Have you tested this code while dragging your finger up/down? What happens after the timeout is done? If it works it works... 🤷‍♂️ Happy Tweening!
  17. Hi, There is definitely something else in your demo causing this. I updated our demo to use ScrollSmoother and as you can see is working as expected: https://codepen.io/GreenSock/pen/gOyPBgY Hopefully this helps. Happy Tweening!
  18. Hi, I've been fiddling with this demo for a bit and resized the window to a bunch of different width/height combinations and I don't see the blue parts anywhere, maybe I'm missing something here but this seems to work as expected 🤷‍♂️ Happy Tweening!
  19. Hi, I believe that the logic you're using in your Draggable instance could be the cause of all this. Honestly if you want to snap and you're using the Inertia Plugin, why not let the plugin do the heavy lifting for you? Is super simple: https://codepen.io/GreenSock/pen/bGJpOoQ When using the Inertia Plugin you can add a snap callback in your Draggable config object, that particular function has one parameter, the end value calculated by the Inertia Plugin. You can use that in combination with the snap utility method and it will always land in a card. Hopefully this helps. Happy Tweening!
  20. Hi @jlin, I read your post a few times and checked your demo and unfortunately I can't seem to understand what's the issue you're having. What exactly you mean with this? What button values? Happy Tweening!
  21. Hi @Cossetteqc and welcome to the GSAP Forums! Sorry about the delay but we also need some rest and leisure in our lives, considering that you posted on a Saturday afternoon, thanks for understanding and for your patience. I just created a new SvelteKit app in my local machine and used this approach without any issues: import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; if (typeof window !== 'undefined') { gsap.registerPlugin(ScrollTrigger); } I even ran the lint, check and build commands without any issues and my build preview is working as expected. Can you create a minimal demo in Stackblitz that clearly illustrates the issue. Here is a simple demo that uses ScrollTrigger: https://stackblitz.com/edit/sveltejs-kit-template-default-unljf6 Hopefully this helps. Happy Tweening!
  22. Yeah, you should do that here after toggling the class: $("ul li.dropdown").on("click", function () { $(this).toggleClass("show-dropdown-menu"); ScrollTrigger.refresh(); }); Finally is worth noticing that this is not going to work: const navLinks = gsap.utils.toArray(".nav-link"); navLinks.addEventListener("click", (event) => { }); The navLinks constant is an array and you can't attach an event listener on an array: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array Happy Tweening!
  23. Hi, This seems to work the way you expect: const tl = gsap.timeline({ scrollTrigger: { trigger: ".get_started_main", start: "center center", pin: ".wrapper", scrub: true, markers: true, onLeave: (self) => { const start = self.start; self.scroll(start); self.kill(); self.animation.progress(1, true); ScrollTrigger.refresh(); window.scrollTo(0, start); }, } }); Here is a fork of your demo: https://codepen.io/GreenSock/pen/gOyPBgY Hopefully this helps. Happy Tweening!
  24. Hi, The second approach is the one that will work actually. This is a React pattern (although is also used in Svelte as well): onMounted(() => { // rest of your code return () => console.log("this doesn't work in Vue"); // this won't be executed when the component is unmounted }); Finally there is no need to turn the GSAP Context instance into a reactive property using ref(): let ctx; onMounted(() => { ctx = gsap.context(() => {}); }); onUnmounted(() => { ctx && ctx.revert(); }); Hopefully this helps. Happy Tweening!
  25. Keep in mind that the mousemove event can be added to any DOM element: https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event Also take a look at the demos by @nico fonseca and @akapowl in this thread As for the path manipulation you can play with the d attribute on an SVG path in order to create the bezier based on the mouse position: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d But be aware that is in no case a simple endeavor since you'll have to create the beziers by hand on the mousemove event and apply those to the d attribute in the path element. Another option is to create animations using the MorphSVG Plugin and control them based on the mouse position: https://gsap.com/docs/v3/Plugins/MorphSVGPlugin Happy Tweening!
×
×
  • Create New...