Jump to content
GreenSock

Dipscom last won the day on July 21

Dipscom had the most liked content!

Dipscom

Moderators
  • Posts

    1,637
  • Joined

  • Last visited

  • Days Won

    62

Dipscom last won the day on July 21

Dipscom had the most liked content!

About Dipscom

Profile Information

  • Gender
    Not Telling
  • Location
    London

Recent Profile Visitors

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