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 nevo, It's impossible to tell what's going on from a code snippet, especially as this sounds more like a CSS issue. Can you make a minimal demo showing the issue? Just fork this CodeSandbox template. https://codesandbox.io/s/gsap-react-starter-ut42t
  2. As a timeline. gsap.timeline() .to("#MyObject", { x: 100 }) .to("#MyObject", { x: -100, repeat: -1, repeatDelay: 1, yoyo: true }, "+=1") A Pen by GreenSock (codepen.io)
  3. If that's a different scrolling element than the main window, you would need to use the scroller property.
  4. GSAP is an animation engine, and doesn't do any rendering. Right now you are using HTML/CSS for rendering. For that warp effect, you would need to use a WebGL renderer like PixiJS or Three.js and probably a custom shader. GSAP could then animate whatever properties your WebGL objects/shader provides. Just follow the first demo you posted. Notice the use of forEach to create a ScrollTrigger for each element, and how it's getting the duration for each element from a data attribute... <div id="del2" class="delayed-section" data-scrub="0.2"> const scrub = gsap.to(imageAnim, { progress: 1, paused: true, ease: "power3", duration: parseFloat(section.dataset.scrub) || 0.1, // <-- reads data-scrub from element overwrite: true }); Using a different duration for each element is what creates the parallax effect.
  5. Welcome to the forums @dukman LitElement uses a shadow DOM, so GSAP's selector engine won't be able to find it, at least not directly. You should use the shadowRoot query selector you just showed.. gsap.to(this.shadowRoot?.querySelector('.active'), { ... }) Or some of the query decorators. https://lit.dev/docs/api/decorators/#query If you need to select a bunch of different elements, GSAP's selector utility can come in handy. https://greensock.com/docs/v3/GSAP/UtilityMethods/selector() Here's a demo showing the selector utility inside a vanilla web component... https://codepen.io/osublake/pen/084c410320bcaed334a50760a45ab0ab
  6. Delay works, but I don't see that in your original code. Of course, delay will only work on the first run, and not repeats. You can use both if you want, but that type of animation really should be a timeline.
  7. Your GSAP code is valid, but you can't do a scrolling animation if there are no scrollbars. ScrollTrigger works by scrolling. But I don't know if that is your issue because you didn't provide a demo showing the issue. angular gsap (codepen.io)
  8. Just be careful with that code. It's going to call refresh every time there is a re-render. You might want to add a console.log in there just to test and make sure it's not being called a lot.
  9. Hi MrBodean, Sounds like you just need to make a Timeline and use the position parameter for your delays.
  10. Welcome to the forums @spirconi Can you make a demo on CodeSandbox showing the problem? And did you try useLayoutEffect and make sure the component you are pinning is not fragment?
  11. GSAP can do everything AfterEffects can. At its core, AfterEffects is animating stuff just like GSAP via interpolation. The only difference is that complex motion graphics might be a little easier to create with AfterEffects because you have a GUI. But with enough time and skill, you can pull off some amazing stuff with just code. 😉 https://codepen.io/chrisgannon/pen/VjWWZO
  12. If you need help, please provide a minimal demo showing the issue. There are a bunch of different ways to select elements in Angular... https://stackoverflow.com/a/35209681/2760155
  13. Hey @wobwobwob Would you mind checking this out? The demo in the docs has also been updated with these changes. Resize problems - Smooth Scroll with ScrollTrigger Natively (codepen.io)
  14. Thanks for the demo! We'll look into this.
  15. Welcome to the forums @Prathap ScrollTrigger works fine in Angular. If you need help seeing what the issue is, please make a minimal demo on CodeSandbox.
  16. OSUblake

    Multi-part slider

    I wouldn't approach that like a typical slider. Yes, there is a slider in the background layer, but then you would have absolutely positioned text elements over the background slider that aren't children of a particular slide. It might easier if you focus on the text part first, get those animating first, and then worry about the slider background layer last.
  17. Welcome to the forums @hongjunbae It's possible, but I don't know how you are trying to resize it. Do you think you can fork demo and show what you've tried.
  18. Hi @GSAP Ted That could certainly be done with GSAP. And GSAP can animate WebGL too. It works almost exactly the same, but instead of animating an element, you would animate a WebGL object, like a mesh or sprite. But those animations look like they might perform ok without WebGL, so I would start with some good old HTML and CSS first.
  19. Hey @jxy That's very strange. What browser/OS are you seeing that in? And do you see any errors in the console? It's working perfectly fine for me... So you would import like this... import { gsap } from "gsap"; import { CustomEase } from "gsap/CustomEase"; gsap.registerPlugin(CustomEase); Unless you are using next.js, which doesn't support ES Modules at the moment, so you would have to import the UMD files. import { gsap } from "gsap/dist/gsap"; import { CustomEase } from "gsap/dist/CustomEase"; gsap.registerPlugin(CustomEase);
  20. Yep. Function based values are explained on the Tween docs.
  21. Welcome to the forums @rt861 Your demo doesn't work, nor does your video. I noticed that you are using ScrollMagic and react-gsap, both of which are not GSAP products so we don't officially support them over here. I would highly recommend to ditch ScrollMagic and use ScrollTrigger. ScrollTrigger can do everything ScrollMagic can and a lot more. And of course we support ScrollTrigger as we made it. If you're new to GSAP and JS, I would honestly advice against starting out with React. It's going to be hard to learn any DOM and GSAP fundamentals as you're going to be forced into a particular coding style and have to understand how GSAP fits into React's lifecycles. I think it would be much easier if you start out with a vanilla website, like on CodePen, and then start experimenting with making an exploding div. Once you have the explosion down, it will be really easy to hook it up to ScrollTrigger. The basics for exploding stuff is pretty ease to do using random values. gsap.to(".particle", { x: "random(-500, 500)", y: "random(-500, 500)", scale: "random(0.2, 0.5)", rotation: "random(-720, 720)", duration: "random(1, 2)" }); A little more advanced for inspiration.... SVG explode from center (codepen.io)
  22. Hi Jack, Your updateMapper function is adding additional animations to your timeline when it resizes. You can just clear the timeline out and start again. Timeline - Draggable (codepen.io)
  23. Welcome to forums @nutfordesign Everything looks fine for me. The only thing I notice is that scrollbar size changes on load, but it doesn't affect anything. Is that what you're referring to?
  24. Welcome to the forums @Annejan223 In the future, please don't contact people via direct message asking for help on question you just posted. We answer every question on the forum. Look closer at your syntax. You have Trigger:'home' when it should be trigger:'home'.