[What am I doing wrong with the bouce?]

I want to just have like a horizontal list of images on the page, and have them just happily (slightly) moving up and down like a wave left to right (or randomly). I have a function on y to give each item it's position orders, but I'd like that calculated on every cycle, not just once at the beginning. 

 

It's kind of aggressive right now lol, I want it to be a friendly ease like each is a happy little image moving y +10->-10 every cycle.

 

Can someone point me in the right direction?

See the Pen bGMWJNK by stevescott (@stevescott) on CodePen

[Is there a good tutorial on animating things in on scroll?]

10 hours ago, GreenSock said:

Yep, @marquizzo is exactly right. 

 

Is this more like what you were looking for?: 

 

 

 

Yep, thats exactly what I was going for, I didn't see the video, it's quite detailed though, love it

 

Thanks again!

[Is there a good tutorial on animating things in on scroll?]

(messing around, still not getting the syntax I don't think)...

 

 

It's like a tailwind 2 col grid of images (not on the codepen...), on scroll like as they become visible on the page, I'd like to start animating the opacity in. But with this sample it's more like, when the div scrolls into view, maybe 200px from the bottom it THEN starts the opacity animation. I assume it's with my "top center" but I'm not sure what the docs are referring to as "the scroller" I assumed the page...

 

        let destination = document.querySelectorAll('.destination');

        destination.forEach(group => {
            gsap.to(group, {
                opacity: 1,
                ease: "power3.out",
                duration: 1,
                scrollTrigger: {
                    trigger: group,
                    start: "top center",
                    toggleActions: "play none none none"
                }
            })
        });

One thing I'm trying to avoid is having partial opacity items just chilling in the viewport waiting to move up to animate. Kinda just want it to be when the item is popping in from the bottom on scroll, just go ahead and start that animation.

 

Does that make sense?

See the Pen zYWZemZ by stevescott (@stevescott) on CodePen

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

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...?

 

 

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

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?

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

Apologies! 

 

So here's a demo of what I mean... ideally just a translate so it kind of gets larger, then shrinks, but I don't need help so much with the ANIMATION as much as the why doesn't it work part...

 

See the Pen jOzVxmJ by stevescott (@stevescott) on CodePen

 

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

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