Jump to content
Search Community

Newb, can't figure this out, or if it's even possible...

Steve Scott test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Using inertia with vue 3. I have a chunk of text about 3/4 down the page (scrolling) not visible on initial load.

 

<div>
  Oh look at this <span class="font-serif">thing</span> moving on scroll
</div>

What I WANT to do is like animate the "THING" span to translate out and get larger and maybe shake when it scrolls into the middle of the screen.

 

I've watched a lot of GSAP youtube videos with Vue and I'm trying to do this, but as a non-expert I just feel lost as to where to even start.  I can do simple GSAP things, but like my transition events are just called right on page load, and never again (on enter). Do I need scroll triggers, or like... I don't even know 😕

 

 <transition appear @before-enter="freeBeforeEnter" @enter="freeEnter">
                <div>
                    <img src="/images/mypic.jpg"/>
                </div>
            </transition>

 

    const freeBeforeEnter = (el) => {
      //Called right away on page load...
        console.log("Before enter");
        el.opacity = 0;
    }
    
    const freeEnter = (el, done) => {
      //Called right away on page load...
        console.log("enter");
        gsap.to(el, {
            duration: 3,
            opacity: 1,
            ease: 'power3.out'
        });
    }

 

Thanks

Steve

Link to comment
Share on other sites

Hey Steve! Welcome to the forums. And to GSAP!

 

I'm not a Vue guy, and it's super difficult to troubleshoot without a minimal demo but I'd suggest you just focus on the basics initially and then get it working in Vue. Here's a super quick demo I whipped up for you: 

 

See the Pen QWmGQJG by GreenSock (@GreenSock) on CodePen

 

And yes, you'd need some ScrollTriggers (if I understand your goal correctly)

 

If you're still having trouble, just post your attempt here as a minimal demo (in CodePen or CodeSandbox) and we'll do our best to answer any GSAP-specific questions. You can click the "fork" button in the lower right corner of that CodePen I provided above, and then edit away to your heart's content. 

 

Have fun!

  • Like 1
Link to comment
Share on other sites

  • Solution

Oh! That's because you're trying to apply transforms to a <span> (display: inline) element which browsers won't do. It has nothing to do with GSAP. You can actually look in Dev Tools and see that GSAP does indeed apply the CSS styles appropriately, but browsers won't render transforms on display: inline elements. So just change it to display: inline-block. 

 

Does that answer your question?

 

See the Pen xxWRjBd by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Eugh, yeah that's right I bloody knew that. I didn't even think to check the element in dev tools, I was just looking at my debug stuff in the console!

 

Thanks so much, so the CustomWiggle stuff, that's all the pro upgrade license?

Link to comment
Share on other sites

7 hours ago, GreenSock said:

Exactamundo. CustomWiggle is a membership benefit of Club GreenSock. You could kinda fake a rough wiggle (not nearly as smooth) by using keyframes with an Array of values. But of course CustomWiggle is way cooler ;)

 

Enjoy!

 

Where's the details on how the license works?  Is it a file that needs to exist on the site, private npm repo...?

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...