Jump to content
GreenSock

OSUblake last won the day on November 19 2022

OSUblake had the most liked content!

OSUblake

Administrators
  • Posts

    9,196
  • Joined

  • Last visited

  • Days Won

    705

Everything posted by OSUblake

  1. I don't know if this is related, but you should always include bother wrappers inside React, so GSAP doesn't have to insert the wrapper element. React doesn't like it when the DOM is manipulated like that. <div id="smooth-wrapper"> <div id="smooth-content">My Content</div> </div>
  2. You posted a demo that does that, so I'm not sure what you're expecting as far as help goes. There's even more examples to learn from here... https://greensock.com/docs/v3/Plugins/ScrollTrigger#demos And here... https://greensock.com/st-demos/ And here... ScrollTrigger How-To Pens - a Collection by GreenSock on CodePen
  3. For those looking to integrate ScrollSmoother with Nuxt, here's a solution that builds off some of the work by @Born05 in this thread. CodeSandbox: https://codesandbox.io/s/gsap-scrollsmoother-nuxt-pbhmeh?file=/layouts/default.vue All you have to do is include the GSAPScrollSmoother and put whatever content you want inside of this. <GSAPScrollSmoother :vars="{ smooth: 2, effects: true }"> <Nuxt /> </GSAPScrollSmoother> You'll be able to access the ScrollSmoother in any page/component using this.$scrollSmoother, and can use any of the methods available, for example. this.$scrollSmoother.paused(true); let velocity = this.$scrollSmoother.getVelocity(); There are also a couple of extra methods available. $scrollSmoother.parseEffects() Call this to get ScrollTrigger to parse and create effects that are declared with data attributes, (data-speed and data-lag). $scrollSmoother.killEffects() Call this to kill all the ScrollSmoother effects. You will typically need to call this when navigating to a new page. $scrollSmoother.refresh() Refresh the ScrollSmoother and all ScrollTriggers. You should call this when navigating to a new page if you don't call .parseEffects() There are really only 2 files you need to be concerned about. The GSAPScrollSmoother.vue component file, and the nuxt.config.js file. The nuxt.config.js has some pageTransition callbacks in there that you may need to adjust to your project. And if you plan on using this in your own project, be sure to change all the gsap-trial imports to gsap, otherwise you won't be able to deploy it. Example usage on a page... export default { mounted() { // if you don't have any effects, use this.$scrollSmoother.refresh() instead this.$scrollSmoother.parseEffects(); this.myAnimation = gsap.timeline({ scrollTrigger: { ... } }) }, beforeDestroy() { // kill any ScrollTriggers you created this.myAnimation.scrollTrigger.kill(); // kill the effects that were created this.$scrollSmoother.killEffects(); } }
  4. Hi @Lambdaka Can you verify that it's resolved here? I removed some code just to focus on that one ScrollTrigger. A Pen by GreenSock (codepen.io)
  5. Oh, I don't know your issue right now Lambaka as it only seems to break around a certain width. Still looking at it.
  6. Hi jens, Your issue should be fixed now if you clear the cache in your demo and try again.
  7. Have you used ScrollTrigger before? You would need kill your triggers inside beforeDestroy. beforeDestroy() { ScrollTrigger.getAll().forEach(t => t.kill()) } And I said I would make a component later. Please be patient.
  8. Welcome to the forums @Viktor111 That type of stuff is done with a physics engine, like maybe matter.js. https://brm.io/matter-js/
  9. You can create it however you want. The demo I posted above has the ScrollSmoother in the layout page, but I'm updating in the index page, because that's where the elements are. You have to keep in mind how Vue/Nuxt works. Children are mounted before the parent, so that's why I put the observer in there to wait for the parent to mounted.
  10. Hi @Lambdaka If you can setup a minimal demo, that would be great just so we can verify that your issue is the same as the one posted above and not something else we need to look at.
  11. I'll post back later with a component for ScrollSmoother that might make this easier for you. One thing to keep in mind for effects is they are ScrollTrigger instances, so you should kill them when navigating to a new page. And to get ScrollSmoother to parse data attributes, you can run this on after navigating to a new page. That will search the DOM for any elements that have a data-speed or data-lag attribute, and create an effect. smoother.effects("[data-speed], [data-lag]", {});
  12. It might help to use the ModifiersPlugin to wrap the elements while they're animating instead of when they start. https://codepen.io/GreenSock/pen/QEdpLe
  13. I'm not sure I understand your question. The horizontal animation is controlled by the start and end properties of your ScrollTrigger. If you want it to move slower, you can increase the end value.
  14. It's hard to a answer question like that without a demo. I did notice that you are using version 3.10.3, which was just released, so maybe that fixed the issue. And you don't have to define a trigger. Without one, it will use the body.
  15. You need to make sure that it exists. It clearly shows what is it in the demo. panelsContainer = document.querySelector("#panels-container")
  16. Just copy and paste what have you. The only difference in the CodeSandbox is that you import from gsap-trial instead of gsap. Everything else should match up with your local environment. There is no need to use that nuxt gsap module, nor do we officially support using it. import { gsap } from "gsap-trial"; import { ScrollTrigger } from "gsap-trial/ScrollTrigger"; import { ScrollSmoother } from "gsap-trial/ScrollSmoother"; mounted() { gsap.registerPlugin(ScrollTrigger, ScrollSmoother); ScrollSmoother.create({ ... }) }
  17. Hi Peter, It's very hard to answer a question like this without seeing your setup. How did you install GSAP, and can you verify that the MorphSVGPlugin is inside the gsap folder in your node_modules folder?
  18. Did you put your scripts before the closing the body tag? It's very hard to answer a question without seeing the problem. I would suggest clicking the export button on the CodePen if you need to see how to set up a web page.
  19. OSUblake

    Gsap "Flip" grid

    You can also specify what elements should be absolute. There are times where you might need to include the container as part of the Flip animation, but have the elements inside of it be absolute. Grid Shuffle (codepen.io)
  20. Welcome to the forums @jens./ Thanks for bringing this up. Please standby while we investigate.
  21. So what do you need help with? The demo you posted seems to be working fine.
  22. Welcome to the forums @synthwavenomad I can't reproduce that issue. I'm wondering if maybe your setup doesn't allow ES modules. Have you tried importing the UMD modules from the dist folder? import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import { ScrollSmoother } from "gsap/dist/ScrollSmoother";
  23. Hi Animati, You need to use relative values otherwise it's just going to move to the delta value. y: "+=" + -self.deltaY,
×