jingqi_fan

// FIGURED IT OUT I was calling new SplitText everytime the value "fadein" changes which caused a bunch of deeply nested <span> tags and messed up the animation. Hello, I've followed this thread https://greensock.com/forums/topic/23007-importing-plugins-in-nuxt/ to install gsap from gsap-bonus.tgz and import the premium plugin, SplitText, like below in a component file: // in Heading.vue import { gsap } from 'gsap' import { SplitText } from 'gsap/SplitText' if (process.client) { console.log('registered') gsap.registerPlugin(SplitText) } and added the code below in nuxt.config.js // in nuxt.config.js build: { /* ** You can extend webpack config here */ extend(config, ctx) {}, transpile: ['gsap'] } It seems that SplitText is imported correctly but when I try to animate text like below through a watcher(everytime fadein changes, the animation runs): // in Heading.vue watch: { fadein(val) { const tl = gsap.timeline() const chars = new SplitText('.sans', { type: 'chars' }) if (val) { tl.to(chars, { duration: 0.8, opacity: 1, ease: 'power2.out', stagger: 0.01 }) } else { tl.to( chars, { duration: 0.8, opacity: 0, ease: 'power2.out', stagger: 0.01 }, '+=0' ) } } } The HTML structure I have is like so: <div class="heading-inner"> <span class="sans">{{ data.area }},</span>&nbsp;<span class="serif">{{ data.country }}</span> </div>

@ZachSaucier wow thank you so much, I missed the itemHeight and wrapperHeight part! thanks again!!

Hello, I've tweaked the modifiers plugin demo to create an infinite autoscroll effect. My only problem is that I'm not sure how to transform each of the boxes in the codepen demo to go upward instead of downward. Right now each box is moving a positive y amount. I understand that I would need to change the y value of the boxes to negative for them to move up but every time I try to change it, the effect is no longer infinite, it gets cut off at every loop. I am guessing that I might not have a complete understanding of how the modulo operators work with negative numbers. Any help is appreciated. Thank you so much!! Codepen URL: https://codepen.io/jingqifan/pen/pXPOjO

Thank you! That’s worked!

Hello! Thank you all so much for the prompt response. Thanks for the timescale pointers and the codepen demo! I made another codepen based on the above demo: However, when I stop scrolling it stops very abruptly and it doesn't seem like its really binding to my scroll like it did in here in their selected clients section. The tween also seem to have a lag after my scroll happens. The animation wait a bit to speed up and then when I stop scrolling it waits a bit to set the timescale back to 1. Is there a way to respond to my scroll immediately?

Hi guys, I'm a newbie in GSAP. I modified the GreenSock's ModifiersPlugin: Seamless Loop Codepen in the hopes of getting close to the effect as seen in this website (if you scroll down a bit to the selected clients section of the linked page, you will see that the marquee on the site can be sped up relative to your scroll speed). Here's my Codepen: https://codepen.io/jingqifan/pen/xmYxOR?editors=1111 I tried to do that by calling my tweenmax function in the Jquery on scroll function with the updated variable "move", but the animation is quite janky and doesn't feel as natural as the one seen in index.studio/about. The marquee animation also doesn't reset back to the original slower speed after you scroll. Any help is appreciated for getting the effect as close to the reference website as possible. Just a single marquee will do. Thank you so much!