JONATHANMAYEA

Thank you elegantseagulls for taking the time to actually read "and understand" how simple of a question this was. Sadly that wasn't the fix I was looking for but I did indeed figure it out by applying a pin: false and a start: "top bottom-=300px" instead of what I initally had which was pin: true and a start: "top top".

No Cassie, sorry I'm not able to create a demo Codepen. I'm using a .json file as a Lottie animation and have scroll trigger on it. The pen is quite a bit larger than 1MB. There must be another way.

Hello everyone. I'm very new to GSAP and I've been trying to figure out how to make this Scroll Trigger began animating following the "first image" (drips) I have attached here. The second image is of a skateboard deck at the beginning of it's entry animating with Scroll Trigger. The problem is, the decks don't start animating until the "first image" (drips) has completely exited the top of the viewport creating a large non fluent gap of blank space. I feel like I've tried so many different things which were nothing short of guessing. I've tried to figure this correction out over the entire past month before reaching out to you guys here. All I'm trying to achieve is the Scroll Animation begins animating and following the "first image" (drips) from the bottom of the view port and becoming pinned once it reaches the full height of the viewport where it will finish the animation before exiting the viewport. Which I have the pinning and exiting like I want it. I just can't seen to be able to get it to follow the "first image" (drips) from the bottom. The animation is at 22BOARDCO.COM. It's on the Homepage about midway down. Begins with one spinning skateboard deck followed by two more coming in from the left side of the viewport . Here is the code I have so far. Can anyone please help me with this little adjustment? Thank you guys so much for your time. function LottieScrollTrigger(vars) {let playhead = {frame: 0},target = gsap.utils.toArray(vars.target)[0],speeds = {slow: "+=2000", medium: "+=1000", fast: "+=500"},st = {trigger: target, pin: true, start: "top top", end: speeds[vars.speed] || "+=2000", scrub: 0.3},animation = lottie.loadAnimation({container: target,renderer: vars.renderer || "svg",loop: false,autoplay: false,path: vars.path});for (let p in vars) { // let users override the ScrollTrigger defaultsst[p] = vars[p];}animation.addEventListener("DOMLoaded", function() {gsap.to(playhead, {frame: animation.totalFrames - 1,ease: "true",onUpdate: () => animation.goToAndStop(playhead.frame, true),scrollTrigger: st}); // in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes ScrollTrigger.sort(); ScrollTrigger.refresh();}); return animation;} "first image" (drips) "second image" (beginning of animation)

Hello, I have a scroll animation on my websitethat is a .json file. Animation was made in Blender then exported via After Effects using the extension Bodymovin. I’ve been very interested in starting with GSAP but I’m having a hard time spending money on something I’m not even sure will do the job. I’ve installed the GSAP url on my Shopify site but no clue what to do next. Which is why now, I’m willing to lay a fee to get this wrapped out using three.js and GSAP perhaps. Or does GSAP and three.js work with .json files? I’m the Lead Designer here at The Berrics in Los Angeles and I’m very intrigued by coding and web animations doing a lot of reading and learning as I can. Can anyone please help me. The quality I have up in my site is hideous. Please help me. 22boardco.com *** scroll animation is towards bottom of homepage***

Well you see Cassie, that’s kinda why I’m here in this thread , in hopes of finding someone and to see what kind of fee would it take to do this for me and show me how they did it. Studying the code abs learning that will come in time . I’m trying to prevent wasting anymore time seeing as I’m on a tight deadline for this. Like I even ask myself, “ I wonder if I could copy and paste the majority of the animation from the data inside the .json file with making necessary adjustments. But I’m pretty sure that won’t be the case. Once someone was able to get this in place if they were able to, then just briefly ran thru the steps with me. Not teaching me the code in depth or anything , I can get that understanding over time. This is sorta why I even mentioned money in the first place. I need someone to do it for me, and show me how they did it.

Yes Iam one to ask question as someone teaches. I have a skateboard brand that I design myself through and through. And over the course of the past year , I was noticed on Instagram and invited out here to Los Angeles where I became Lead Designer here at The Berrics. @berrics @22boardco @jonathanmayea Yes, Iam trying to figure out how to recreate animations from json files I create. This is where I must start. But it doesn’t stop there. Once I began understanding the possibilities, buckle up.

Indeed Iam trying to learn how this works. And apply is as a major tool in my creativity. I have been racking my brain, trying to get this scrolling animation flawless but no matter what I do, I just can’t seem to find a solution . Quality is everything to me. And honestly man, I don’t really have much money to to throw anywhere. What I can tell you is as I’m chasing my dreams , I’ve found myself making it to the pinnacle of a industry, only to discover the end of the rainbow isn’t always what it seems . With tons of eyes on me and a innovator of my craft, I’ve searched and searched for other other tools to add to my arsenal. And I want to believe I’ve found one here with GSAP. If this can be applied to my scrolling animation, and be the very thing to smooth it out flawlessly, I will then certainly invest a lot of time and dedication into learning this craft and mastering it on levels that have never been seen.

Hello, I have a scroll animation on my website that is a .json file. Animation was made in Blender then exported via After Effects using the extension Bodymovin. I’ve been very interested in starting with GSAP but I’m having a hard time spending money on something I’m not even sure will do the job. I’ve installed the GSAP url on my Shopify site but no clue what to do next. Which is why now, I’m willing to lay a fee to get this wrapped out using three.js and GSAP perhaps. Or does GSAP and three.js work with .json files? I’m the Lead Designer here at The Berrics in Los Angeles and I’m very intrigued by coding and web animations doing a lot of reading and learning as I can. Can anyone please help me. The quality I have up in my site is hideous. Please help me. 22boardco.com *** scroll animation is towards bottom of homepage***