Steve Scott

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?

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

(messing around, still not getting the syntax I don't think)... https://codepen.io/stevescott/pen/zYWZemZ 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?

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

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?

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... https://codepen.io/stevescott/pen/jOzVxmJ

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