Jump to content

Search the Community

Showing results for tags 'nuxt3'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 6 results

  1. Hello, could you please help me. I'm trying to attach tweens to timeline in Nuxtjs like that: tl.value = gsap.timeline({..}); and tl.value.to({...}); but animation not playng, but onStart event fires and tl.value.duration() returns 1. But if I use chain like tl.value = gsap.timeline({..}).to({..}) it's works fine. Here is simple example: https://codesandbox.io/p/sandbox/mystifying-waterfall-i2cwtp?file=%2Fpages%2Findex.vue%3A1%2C1 . Thank you!
  2. Hi everyone, I'm actually discovering Nuxt 3, and am trying to manage page transitions with GSAP. I'm sorry if my questions also concern Nuxt (and not only GSAP), but I hope to find answers on this forum, which brings together a community of creative people. On the documentation, I saw we can animate page transitions with class names and CSS. But, I'm wondering if a transition manager like Highway exists to use GSAP with my website (e.g. onEnter, onEnterCompleted, onLeave, and onLeaveCompleted functions). My ideal goal would be to animate a page transition and to animate an intro (not the same animation). I do not have a CodePen to share, but here's an illustration of what I'd like to achieve : When the user navigates to the About page, the square goes to position B. And when the user returns to Home, the square goes to position A. References of websites I saw using Nuxt and GSAP (that do not use CSS class names like on the Nuxt documentation) : https://www.heights.agency https://fix.studio https://www.humanastudio.com Thanks for helping… Lucie
  3. Hello, I want to use GSAP in design system based on Nuxt 3 (https://github.com/d0rich/nuxt-design-system) for my personal projects. So I configured CI/CD pipeline, which publish this design system on NPM. The idea was to install free GSAP if you have no configured authorization for private registry. Problems started when I tried to install a private package on Netlify for test deployment (and later I have created small GitHub Action for test). I tried to install free GSAP with postinstall script (https://github.com/d0rich/nuxt-design-system/blob/master/fallbackDependencies.mjs), so I thought the problem was in it. And actually, first iterations of this script were really problematic, but later I made it work. What was strange, it worked only in GitHub Actions. Netlify wasn't able to install private repository because of error 403. I thought "OK, I will never use Netlify, because it is glitchy" (it seems I was wrong). Then I made postinstall script really simple, so it worked on both GitHub Actions and Netlify. And I thought it was the end of adventure. Previous steps took for about 3 days to solve. And results were differently strange in different time. Now I finished new update for my design system and I see that test in GitHub Action is failed, Netlify failed again. I rerun GitHub Action with test for previously successful commit - it also failed. Successful commit: https://github.com/d0rich/nuxt-design-system/commit/087ea7a9bb31062a54da4090880ad97a560f2e74 Successful test: https://github.com/d0rich/nuxt-design-system/actions/runs/4524606995/jobs/7968554631 Failed test: https://github.com/d0rich/nuxt-design-system/actions/runs/4526640545/jobs/7971949177 Installation from private repository worked differently in same environments, but in different time. So now I 90% sure that problem is in GSAP private repository, not in GitHub Actions or Netlify. Are there some limitations for single token? Can you please find the source of the problem? help me to deal with it?
  4. I create a simple demo for this issue. https://stackblitz.com/edit/nuxt-starter-nsqfvz?file=pages/index.vue I use scrollTrigger in gsap.matchMedia(), 1. if I add the "pin" in home page (pages/index.vue), 2. and then go to other pages (pages/page2.vue) 3. resize with different breakpoint it will show this kind of error, Uncaught TypeError: trigger.revert is not a functio After I back to the home page, the scrollTrigger will not work anymore. And seems the scrollTrigger should be killed in "onUnmounted" ? Thank you~~~
  5. I'm very new to GSAP and trying to practice with a very simple horizontal scroll. I've been using this example as a guide with a few changes to make it work with Nuxt3/composition API. https://codepen.io/GreenSock/pen/YzygYvM I'm also working with Tailwind but this isn't working the the CodePen, so I've included the style section too. In my actual app, the site isn't scrolling horizontally and just scrolls down a very tiny amount (like half of the one) and that's it. How do I get it to scroll horizontally? The example has a vertical scrollbar but mine only has horizontal? Have I missed something here? I've recorded my screen to show you what's actually going on on my screen because the CodePen doesn't seem to be representing this in the same way. Video in link below: https://drive.google.com/file/d/1iB5rQiR58bd0EjQyoXuwC-sUAb6Y1Sii/view?usp=sharing Thanks in advance for any help!
  6. Intro: Theres probably not a simple anwser to this but I wanted to see if someone more gsap experienced than me knew of some cool trick that could help me before I go on to do some overly complicated way of solving my issue. Whatver the case, thanks to anyone who is willing to give my issue a shot one way or another. Context: So, I want to create a component builder that lets users drag and drop blocks in place. As part of this I am using GSAP Draggable to drag and drop an element. The riddle im stuck on at the moment is I want the element to snap into place when its dragged over an area that can receive it. The simple solution is to just use the hitTest() function to detect if eligeble element is hit and then get either the points off that element to use in the livesnap, or get the transforms to match that element or something like that. Problem is that in a more complex example, for my use case, I dont actually want to manually create a uniqe function for every possible snappable area since there might be a lot. The ultimate solution would be if I could somehow dynamically fetch whatever snappable element we have hit. But as far as I can tell, from the docs, the hitTest() doesnt actually return the hit element, it just returns a boolean which kinda forces me to do something uniqley for each individual element that can get hit. Question: Is there a straight forward way to dynamically get whatever element I hit with the hitTest()? Codepen: Ive provided a codepen that acts like a massive simplification of what I am trying to do just to narrow it down to exactly what I am asking and making easy to experiement with solutions. Hope that makes it simpler to understand.