Dipscom

If it works for you and you're happy with the code, all is well. There isn't anything intrinsically wrong with adding animations on the mounted() hook depending on the context, obviously. So, if it works, job's d

Right, I see, you've copied my example and tried to adapt it to using SplitText. You are using an outdated syntax and are missing a few little bits. Have a look at the SplitText docs as well. You will see there is already a ton of functionality there. I recommend you also read the get started section in the site here so you can be familiar with the current GSAP syntax. Finally, below is your code refactored to achieve a pleasant animation. The key points there are: Add a class to each split letter, creating a "dictionary" of tweens, storing an "index" reference of the dictionary entry on each letter as a data-attribute and checking to see if the element hovered over has said dictionary reference and if the tween is playing new SplitText(".wtg", {charsClass: "letter"}); const element = document.querySelector('.wtg'); const letters = gsap.utils.toArray(".letter"); const tweens = {}; element.addEventListener('mouseover', onMouseOver); letters.forEach((letter, index) => { tweens[index] = gsap.to(letter, {yPercent: -50, yoyo:true, repeat:1, paused: true}); letter.dataset.tween = index; }) function onMouseOver(event) { const trg = event.target; if(trg.dataset.tween) { tween = tweens[trg.dataset.tween]; if (!gsap.isTweening(trg)) { tween.play(0); } } }

Hey @kennyopr! Can you show a reduced case of what you have achieved? Because, there are several ways to split the text and I'm not quite following what you are saying here.

So. Not only a zombie, who's already deadly enough but, a zombie with a gun on its hands. Dragging itself relentlessly after me.

Talk about bringing a gun to a knife fight. Sheesh, some people...

Well, then, there's some homework for you. There should be all of the pieces needed on that example for you to adapt to your needs.

'Ello! Allow me to butt in. Sometimes one just finds the idea enticing enough to do the work for others. Bear in mind there are several ways to skin a cat and this is one. Also, bear in mind I did get carried away and added other bells and whistles that are not within the question here BUT, I do hope the code is written in such way that everyone can reason around it. And as per request, it's a GSAP-based solution. Enough rambling. https://codepen.io/dipscom/pen/wvmrNpe/326ea45a277aa98cd3df85553f2ede48?editors=1010

Hey Thomas, I've forked your pen and had a look here on my phone as well as my desktop (I know you said it works smoothly on desktop). I've added <meta name="viewport" content="width=device-width, initial-scale=1"> to the header and loaded on my Android but saw no laggy behaviour. I understand you said you saw it on iOS. I don't have an iPhone or iPad to hand now but I'll have one tomorrow. I shall check and report back but, I'll be very, very, very surprised to see any laggy behaviour on that Pen.

Hi Thomas! Welcome to the forums! Tell me, are you experiencing such laggy behaviour with the example pen you have provided or is it a different application with very large images layered on top of each other and/or many looping animated elements on the DOM?

Before offering further comments, can I ask a question? What do you expect to happen if the user clicks on button 1 and then, clicks on button 2 or 3?

What do you mean by "what about orange and purple panel animation its different"? If you want a different animation, you create a different tween. If you want the same, you can just repeat the example given and change the necessary offsets.

You need to work out the offset for the start trigger because as you are faking a horizontal scroll, all elements are on the same horizontal line so, all lines are triggering immediately. // --- RED PANEL --- gsap.from(".line-1", { scrollTrigger: { trigger: ".line-1", scrub: true, start: "1000 bottom", // This is based on the offset you defined on the fake horizontal scroll divided by the number of sections you have end: "1000 top", }, scaleX: 0, transformOrigin: "left center", ease: "none" });

Hey Sam, Great that you've made an account and have started recreating your project but, alas, I feel you might have already gone overboard. You don't need all of those elements and libraries to test the functionality you are having issues with. In fact, you want to remove all of it. Like I said before, all you need is a simple box in the 3D environment and scrollTrigger. Nothing else. Then, you can more easily work out what to do. You stated at the start of the thread that you were having issues making the object scale on scroll so, let's focus on that. Not on loading external models, bootstrap, jQuery, popper and what not. You are not looking to recreate you whole project in Codepen. So, create a simple scene. One cube, no lights, a basic material, one basic perspective camera, no textures or images, no models, just that. Then, add scrollTrigger to it and see if you can cause the cube to scale when scrolling.

Have you got any accounts on any of the online code editors? You don't need to use CodePen if you prefer to use a different one. If you don't then, I recommend creating an account. If you have no preference, create a free account in CodePen and I'll show you how to set it up to use ThreeJs with it. The only thing I won't do is download your files and set your own project up in my machine. Too laborious.

Hi Sam, Welcome to the forums! I'm afraid it's quite hard to figure out what is going on from a screenshot and a video recording. There are many, many things in code that could be affecting it. The best way to find your problem and help us to help you is to create a minimal reproduction of your issue. You can use CodePen or any online code editing platform of your choice. The simpler the better, in your case, just a box inside of the 3D viewport scaling on scroll. That way, we'll be able to see what is going on and offer suggestions. Who knows, you might even work out what is causing it by creating the reduced example.