Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

OSUblake last won the day on October 23

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Hi Nick, It's easier to just recreate the timeline. So something like this. The box doesn't stay red because I'm clearing the props because you are using from tweens, but it's animating the new element. A Pen by GreenSock (codepen.io)
  2. Hi @MikeGajdos Here's a more in depth article on creating reusable animation components... Creating Reusable Animation Components with React and GSAP | by Nathan Sebhastian | Bits and Pieces (bitsrc.io) The part about fragment is for advanced usage, and I wouldn't worry about that if you're new to React. The fragment is only needed if you don't want your animation component to create a wrapper element. Instead you would wrap the children with a fragment, like this... return ( <>{children}</> ); But it's gets more complicated than that because you need to get a ref the children. Here are some demos that didn't make the final cut of the article, but show how to get refs for children inside a fragment. Using a custom ref function... https://codepen.io/GreenSock/pen/XWRqrjY This demo also uses a custom ref function, but the bounds are passed in via a ref. https://codepen.io/GreenSock/pen/qBmYEjx Again, if you're new to React, I would focus more on article I linked to. The demos I just posted might better suited someone who plans on making a library for other people to use.
  3. Hi Ak89, There's a nice video helper function in here... Although it's not going to make your video smoother. I just replaced your video with this video, and it plays fine, so the issue is with your video. https://assets.codepen.io/39255/output_960.mp4 Is the div actually scrollable, or do you just want to use a mouse wheel to scrub the video? If it's not scrollable, then you should use wheel events.
  4. What was wrong with using the onComplete callback? It shouldn't be too hard to figure out the index of the element that is snapped. Some pseudo code. snap: { snapTo: 1 / 33, duration: 0.5, onComplete: (scrollTrigger )=> { let index = Math.round(scrollTrigger.progress * 33); let currentElement = arrayOfMyElements[index]; } },
  5. Welcome to forums @joshahayes It looks like that site is using GSAP, but not ScrollTrigger. It's most likely using wheel events to drive the animation, kind of like this, although this demo is more linear. https://codepen.io/BrianCross/pen/PoWapLP
  6. Thanks! The first post can be a little weird because it's expecting a CodePen url. This looks more like a router/CSS issue because it will briefly show both pages at the same time, so overflow is kicking in. You could try setting the outgoing page like this. gsap.fromTo( node, { position: "absolute", top: 0, left: 0, opacity: 1, }, { opacity: 0, duration: 1, } ); Instead of doing that, I usually just set overflow-y to scroll on the body. body { font-family: "Poppins", sans-serif; overflow-y: scroll; } The reason for that is if you have 1 page that doesn't have scrollbars but then you transition to a page that does, it will cause a layout shift by the width of the scrollbar, so I'd prefer having a visible scrollbar over a layout shift.
  7. The body height is only 100%, so there is nothing to scroll. If you make your body taller, you'll see it working.
  8. That's just a data attribute selector, and it isn't specific to GSAP. It's the same you would use in CSS. https://css-tricks.com/almanac/selectors/a/attribute/ The string tilde ` and the ${} is a template literal, which is just JavaScript, so again, it's not specific to GSAP. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals It could be re-written like this. tl.to('.article[data-number="' + number + '"]', { duration: 1, opacity: 1 })
  9. Welcome to forums @_ayushagrawal It's hard to say what's going on without seeing a minimal demo. You can make one on CodeSandbox. Thanks!
  10. It should be fine, but a better option might be to make sure the images take up the required amount of space so it doesn't cause layout shifts when an image loads. I thought browsers automatically do that when you have width and height attributes on an image, but it doesn't seem to be working in this case. 🤷‍♂️ Another way to make your images responsive while preventing layout shifts would be to use the padding-bottom trick. https://stackoverflow.com/a/51496478/2760155
  11. Hi @Vlad Tw I'm not sure about the textarea, but for the image, when I add an onLoad listener like this, it seems to work as expected. Does that fix it for you? <img src="..." onLoad={() => ScrollTrigger.refresh()} />
  12. There is no ScrollTrigger property on a timeline, it should be scrollTrigger with a lowercase s. And also make sure you're using the latest version, 3.8.
  13. Anonymous functions aren't hoisted.
  14. Hi @Charlyta Is this what you're trying to do? Gasap data attribute (codepen.io)
  15. Hi @Vlad Tw I followed your instructions and could not reproduce the problem during development or with a build. This is my repo. https://github.com/OSUblake/gatsby-scrolltrigger npm install npm run develop go to localhost:8000 Maybe someone else can clone that and see if they are seeing any issues because I'm at a lost. I wonder if it's just something with your environment. Have you tried it on another computer?
  16. You just need to make your ScrollTrigger inside an effect. const { camera } = useThree(); useEffect(() => { // animate camera with scroll trigger }, [])
  17. I'll do a build following the instructions you provided and will report back later. 😉
  18. That's all it takes. Right now it might be confusing, but eventually you will have an AHA! Moment and everything will start clicking. It's happened to all us. 😁
  19. Hi Drymy! Have you looked at our React Guide? One thing you should never do is create a timeline outside of a hook, especially with ScrollTrigger as the element won't be defined. Second, never put ScrollTrigger in the defaults object as that will make a ScrollTrigger for every child animation. See the most common ScrollTrigger mistakes, especially the one about nesting. Third, I wouldn't use ID's for elements. Check out the selector utility in that React Guide. If you're using ScrollTrigger, add invalidateOnRefresh: true to it, and use functions to calculate the values. This should help you get started. useLayoutEffect(() => { let tl = gsap.timeline({ scrollTrigger: { trigger: ".start", start: "top top", end: "+=500", markers: true, invalidateOnRefresh: true } }); tl.to("#fallingMoog", { opacity: 1, x: 30, y: () => 395, // calculate your value rotation: "+=720", duration: 2, ease: "bounce.out" }); tl.to("#bubble1", { opacity: 1, x: -60, duration: 0.5 }); return () => tl.scrollTrigger.kill() }, []);
  20. It's hard to say what's going on without a minimal demo. An arrow function is just a function. Feel free to write like it this. .add(function() { bodyAni.timeScale(1) }, "<") Don't think in terms of JavaScript vs GSAP problems. Everything is a JavaScript problem as that's the language you are using and what GSAP is written in. We're more than happy help you solve GSAP related issues, but you need to keep the questions focused on one thing at time, and provide a simple demo showing just the issue, kind of like the demo Jack posted with a simple box animation. See the forums guidelines for the type of questions that don't belong here. Not sure what he meant by that. It was probably specific to something he was doing at the time. You can call whatever you want as many times as you want. If that animation has ended, then changing the timeScale won't do anything. change timeScale (codepen.io) Again, hard to say without seeing what you did. If you need to reference a timeline, then you're going to have to put it inside a variable first. Every time you call a function it's creating a new animation. let ani1 = bodyAnim(1.5) let ani2 = bodyAnim(4) let ani3 = bodyAnim(1) master.add(1) .add(faceAni(start), 0) .add(pupilAni(1), 0) .add(faceAni(perturbed), "+=1") .add(faceAni(quiz), "+=3") .add(faceAni(normal), "+=2") .add(ani2, "+=1") .add(faceAni(happy), "<") .add(ani3, "+=2") .add(faceAni(quiz), "<")
  21. Hi aki, You should always check the console for errors. Your code needs to be wrapped with a function. ScrollTrigger.matchMedia({ "(max-width: 300px)": function() { gsap.to(block, { xPercent: -100 * (block.length - 1), ease: "none", scrollTrigger: { trigger: container, start: "top top", markers: true, end: () => "+=2320", pin: true, scrub: 0.1, inertia: false, snap: { snapTo: 1 / (block.length - 1), ease: "linear" } } }) } }) // OR ScrollTrigger.matchMedia({ "(max-width: 300px)"() { gsap.to(block, { xPercent: -100 * (block.length - 1), ease: "none", scrollTrigger: { trigger: container, start: "top top", markers: true, end: () => "+=2320", pin: true, scrub: 0.1, inertia: false, snap: { snapTo: 1 / (block.length - 1), ease: "linear" } } }) } })
  22. Welcome to the forums @pyro23 This looks like it might be bug. Please standby while we investigate. Thanks!
  23. You can use the utility function for random values. https://greensock.com/docs/v3/GSAP/UtilityMethods/random() A JavaScript question would be like "How do I ___ when someone clicks this button?" or "How do I calculate x?" A GSAP question would be something related to GSAP's API, meaning it would be related to something that GSAP library provides.
  24. I made that demo long before the Flip Plugin came out, so I would recommend switching over to that as it can do a lot more. https://greensock.com/docs/v3/Plugins/Flip
  25. Well the ease might be messing it up some. You should probably have an ease of "none". And for the top one, it will probably just be a matter messing with the values until you find something that looks good. That's how a lot animations are, just a bunch of trial and error.