Jump to content
GreenSock

Dipscom last won the day on July 21 2022

Dipscom had the most liked content!

Dipscom

Moderators
  • Posts

    1,640
  • Joined

  • Last visited

  • Days Won

    62

Everything posted by Dipscom

  1. 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
  2. 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); } } }
  3. 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.
  4. So. Not only a zombie, who's already deadly enough but, a zombie with a gun on its hands. Dragging itself relentlessly after me.
  5. Talk about bringing a gun to a knife fight. Sheesh, some people...
  6. 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.
  7. '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
  8. 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.
  9. 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?
  10. Dipscom

    variable target

    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?
  11. 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.
  12. 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" });
  13. 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.
  14. 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.
  15. 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.
  16. Hi Mitul, Welcome to the forums! Have you checked out the documentation on ScrollTrigger and the associated examples? I feel what you are asking for is already there. https://greensock.com/docs/v3/Plugins/ScrollTrigger#demos And here's a collection of demos: https://greensock.com/st-demos/ Happy tweening!
  17. Hey Ben03! Welcome to the forums! (If nobody has already told you that). I'd say your issue here is scoping AND wrongly set up gsap code. My recommendation to you is to extract the animation code to an external function and import it on each of your components that need it, not in the Vue app file. That way you can use the lifecycle methods to run the code as needed instead of watching the route. As for the GSAP code, I'm not even sure what is it that you are trying to do, there is quite a bit of logic before the tweening bit that confuses me. You could create an external function that takes in the editable parameters and it returns the timeline that is needed. I feel that would simplify your code big time and make it more readable.
  18. Hey Krisxtina, If I understand correctly what you are trying to achieve, you need to have the ScrollTriggers associated with the sections you want them to control, not the whole timeline. Alternatively, you might want to use completely different timelines and have the ScrollTriggers associated with each one. What you can't have is dynamic enable and disable of the scrubbing on a ScrollTrigger as far as I know.
  19. First, why did you downgrade GSAP to use v1.x.x? That's super, super, super old. I'd advise against that. From this exchange that we are having I can only conclude that your question really is "how can I create a smooth scroll without using GSAP's ScrollSmoother"? Because it's super simple using GSAP. Ultimately, your question has nothing to do with GSAP, there's very little we can do to help you here as we're limited on the amount of support offered because there is only a small group of volunteers and an even smaller GSAP team. Howerver, you're in luck as I was curious enough to see how does Locomotive scroll works. See here what a Locomotive setup looks like: https://codepen.io/dipscom/pen/rNdwzQQ/17b6d25ee70ea34d37ab2a0e666937b1 Notice you need to add some CSS as well as the JS package for the library. Right, you should be good to go. Remember we won't be fixing your issues here. We will only be able to help you with GSAP-related issues. Happy tweening!
  20. Hey Charlyta! Thanks for simplifying your example, it's much easier to reason now. I see you are using Locomotive Scroll - I have zero experience with it but had a quick look at their documentation and noticed some discrepancies on your setup to theirs. I think you are setting things up wrongly. I can't say exactly what though. What do you mean by "a simple scroll using grid"? Do you mean you want the scrolling to be smooth? If that's the case and you don't want to be (or can't afford) a Club Greensock member, you'll have to read into Locomotive Scroll documentation because the issue is likely to be with its setup.
  21. When using GSAP, yes. You target the scope of the variable you want to use, in this case the div and you tween the variable itself. No need to use the ::before.
  22. Sorry, it seems we've posted over each other. Let me know if the above post helps you at all.
  23. Oh and to actually answer your question: You would set a CSS variable on the attribute you want to animate and tween the CSS variable. // In your CSS you'd set something like: /* div:before { transform: translateX(var(--move-x)); } */ // In your JS you'd then: gsap.to("div", { "--move-x": "33px" });
  24. Hey Jo! Animating pseudo elements is tricky as they are generated content and not in the DOM. Do you have a very pressing reason why it must be a pseudo-element? Is it not possible to add a new div tag after in the DOM yourself?
  25. Always happy to help. Is there a particular effect that you are after? There are several examples for ScrollTrigger on the docs section. Maybe something there might help you or one member might have a tip or two for you here.
×