pbj

I've got a fun little animation going but stuck in that it does not excute a smooth transition from one color to another. It just abruptly transitions. In the codepen I've split the text by line, and then animation each word within the line(s) with the intention of giving them the appearance of fading each word in after another. While the general approach is working as expected the words within each respective line will not fade from one color to another (or 0 → 1 opacity, either for that matter). I've tried to add tailwind transition classes but that seems to break the entire animation all together.

Seems to have been resolved

Currently trying to get an idea going for an animation. Duplicated the started template from GSAP's CodePen and included a started Timeline with ScrollTrigger but noticed its automatically erroring. I haven't done anything too major but saw console log errors. Could there be an issue with the core library? Uncaught TypeError: Cannot read properties of undefined (reading 'left') ScrollTrigger.min.js:10 Uncaught TypeError: r.revert is not a function

I've attempted to review other forums and while I see how the solution was created in the other codepens. What I'm not sure about is *why* its working and that seems to be my missing piece for the infinite looping vertical images I'm attempting to create. Effectively copied the codepen from 10/5/21 and it works but i cannot figure out how to get the loop to occur seamlessly without any particular jumping.

May be a another dumb question but is there any particular way to update a paid package? It's as simple as yarn upgrade gsap

Hopefully this is relatively as straight forward as the title suggests. Using yarn as our package manager and running gsap.matchMedia() fails with the following error gsap.matchMedia is not a function Curious if there is something particular we need to do? To things: 1. Apologies if formatting is off, for some reason it's not liking my code! 2. Will work in a MVP use case to help offset any testing. My file in Vue.js import scrollTo from "../../mixins/scrollto"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export default { name: "FaqAccordion", mounted() { this.initScrollTrigger() }, methods: { initScrollTrigger() { let mm = gsap.matchMedia(); mm.add("(min-width: 768px)", () => { this.faqs.forEach((faq, index) => { const el = document.querySelector(`[data-nav="${faq.handle}"]`); ScrollTrigger.create({ trigger: `#${faq.handle}`, start: "top 50%", end: "bottom 50%", scrub: 1, markers: true, onEnter: ({ progress, direction, isActive }) => { console.log('on enter:: ', faq) this.removeActiveClasses() el.classList.add('bg-cactus', 'text-white') }, onEnterBack: () => { console.log('on enterback:: ', faq) this.removeActiveClasses() el.classList.add('bg-cactus', 'text-white') }, onLeave: ({ progress, direction, isActive }) => { console.log('on leave:: ', faq) el.classList.remove('bg-cactus', 'text-white') }, }); }) }) } }, };

@Cassie This is super helpful! Thank you. Appreciate you being my SVG guardian angel right now

@Cassie Sorry to ask this again, in your last comment you said: The key answer here is that the destination path was up at the top of the SVG, and you need to move it to the bottom. Is this a literal position in the SVG?

Ahhh okay. I gotcha. I'll keep poking around and re-read the article I was under the impression that article (and tool) just "sort of worked" in that it would translate a path from absolute to relative and then *booom* animation galore! Thank you nonetheless for the quick help!

Hey Cassie! This is incredibly helpful! I wanted to confirm one thing: creating a relative path enabled you to then animation correct? Meaning → You had to create a relative SVG to then manipulate in an editing tool, then manipulate with SVGMorph? We have a few areas where we'll need to do this so wanted to make sure we're doing it correctly!

Trying to figure out how to allow the bottom of the SVG to be anchored to the bottom of a div. This feels like a mix of CSS + GSAP issue so happy to be told to go figure it out What's happening now is this animation works perfectly, *except* it transitions from top down to bottom, but we need the opposite. The ideal flow for this animation is that once the user interacts with the page the circular "cutout" transitions into a flat line.

Hmm still no luck here. I've tried: 1. Switching our loading to server side (thinking maybe that was the trick) but nope. 2. Loaded in UMD modules but nope. 3. Moving around when we register the plugin, either within the JS export or without the mounted call. At a loss here.

Adding to this. Looks like my plugins aren't being registered even though that code is in there

Banging my head a bit. I've got a few Scroll Trigger based animations on the home page of a site and it works flawlessly when in local development. It isn't until we've deployed to a production/staging environment does it break. Effectively what's happening is when we load the site on production/staging all animations run immediately. Not sure if its a component mounting issue (which would mean its not a GSAP issue) or if something is being compiled/computed differently in a live environment? Each section is setup as follows: 1. Define the animation/scroll trigger in the `mount` lifecycle hook 2. Use `$refs` to pass elements into the animation. <template> <div id="vid-container" class="h-screen w-screen bg-white"> <video @loadeddata="loaded" class="w-full fixed inset-0 duration-500 transition-opacity opacity-0" :class="{'opacity-100': videoLoaded}" src="https://player.vimeo.com/external/611257045.hd.mp4?s=785a9d52ed5d188f762436b1bb618493f784d3f5&profile_id=174" autoplay loop muted preload></video> <svg ref="mask" class="mask absolute w-full h-full" > <mask id="mask"> <rect width="100%" height="100%" fill="white"></rect> <text font-family="Bagnard, serif" font-weight="500" x="50%" y="49%" class="origin-center " text-anchor="middle" transform="scale(15)" > <tspan x="50%">Freelance</tspan> <tspan x="50%" dy="1em">Founders</tspan> <tspan style="font-size: .5rem" x="50%" dy="2em"> ↓ </tspan> </text> </mask> <rect id="bg" width="100%" height="100%" fill="#fff"></rect> </svg> </div> </template> <script> import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { CSSRulePlugin } from "gsap/CSSRulePlugin"; if (process.client) { gsap.registerPlugin(ScrollTrigger, CSSRulePlugin); } export default { data() { return { videoLoaded: false, } }, mounted() { console.log('hero mounted') let width = window.innerWidth let speed = 350 //pixels per second let endX = width let duration = endX / speed let ease = "sine.inOut" let intro = ''; if (this.$refs.mask) { this.$nextTick(() => { intro = gsap.timeline({ onComplete: () => {}, scrollTrigger:{ trigger: this.$refs.mask, start: "bottom 100%", end: "bottom 50%", pin: true, scrub: true } }); intro.to(this.$refs.mask, { scale: 5, opacity: 0, duration: 5, ease: ease }, 'intro') } ) } }, methods: { loaded() { this.videoLoaded = true; } } } </script> Staging link example: https://freelance-founders-hgc9zjyrf-progresslabs.vercel.app/ FYI - Working on a minimal example to post here shortly.