Jump to content

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


  • Posts

  • Joined

  • Last visited

About anieves

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

anieves's Achievements

  1. Thanks @OSUblake this did it!! For future reference in case anyone's experiencing the same issue: https://greensock.com/docs/v3/Installation#npm-club
  2. Hello @Cassie thanks for the quick reply!! I found the issue, I had installed gsap from npm before, and it was cached. So when I installed later via the .tgz file it was still referencing the one from npm. Now, that's solved but I'm getting another issue 😕 I was able to pin it down to the the Scrolltrigger import. So I commented it to validate this issue, but I get another errror: Details about my setup: I'm using Nuxt: ^2.15.8 node: v14.17.6 I've wasted a lot of time figuring this out, would appreciate some help 😕 Here's the source for my page: <template> <main> <section class="hero py-0 relative grainy has-animation"> <div class="hero__container"> <div class="hero__container__content relative z-10"> <h1 class="animated">Hero text goes here</h1> <a href="#about" class="btn text-center"> button label </a> </div> <img src="/images/hero-woman.png" alt="Woman floating wearing a vr headset" /> </div> </section> </main> </template> <script> import { gsap } from 'gsap' import ScrollTrigger from 'gsap/ScrollTrigger' import { SplitText } from 'gsap/SplitText' export default { name: 'IndexPage', async asyncData({ $prismic, params, error, app }) { const homepage = (await $prismic.api.getSingle('home')).data return { home: homepage, } }, mounted() { this.animateElements() }, methods: { animateElements() { const animationWrappers = document.querySelectorAll('.has-animation') if (animationWrappers.length) { // Registering plugins gsap.registerPlugin(ScrollTrigger) gsap.registerPlugin(SplitText) const timelines = [] animationWrappers.forEach((element) => { if (element.id) { const tl = gsap.timeline({ scrollTrigger: { toggleActions: 'restart none none reverse', trigger: `#${element.id}`, start: 'top 85%', markers: true, }, }) const mySplitText = new SplitText(`#${element.id} .animated`, { type: 'words,chars,lines', }) const chars = mySplitText.words // an array of all the divs that wrap each character tl.to(`#${element.id} .animated`, 0, { className: '+=animation-container', opacity: 1, overflow: 'hidden', }).staggerFrom( chars, 1, { opacity: 1, y: 100, rotationY: 10, rotationX: 10, transformOrigin: '0% 50%', ease: 'power2.easeOut', }, 0.01 ) timelines[element.id] = tl } }) } }, }, } </script> Let me know if this is enough details, if not i can also provide the repo link. Thanks again!!!
  3. Hello! I've been playing with GSAP on codepen, specifically with the SplitText plugin. Everything works fine in the codepen, Im using a cdn that i found online. But when I install locally via npm, using the gsap-bonus.tgz, it doesnt find the SplitText plugin import { SplitText } from 'gsap/SplitText' Was this plugin deprecated or renamed? Thanks in advance! PS: In the codepen, I'm also trying to achieve the same effect for the split text being used in the following h4 element but on the p tag <h1 class="animated">hello there im animated</h1> I've added an overflowY: hidden to the h1 tag. But its not an optimal solution for when there's more than one lines of text. Was wondering if anyone had any insight as to how to achieve this the GSAP way. <--- Was able to achieve this by adding overflow hidden to inner div elements Thanks in advance!!