Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Cassie last won the day on June 13

Cassie had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Cassie

  1. Hiya Neeraj. If you were to get a GreenSock business license, both devs would be registered under the one email address so you could use the instructions from this page to install - https://greensock.com/docs/v3/Installation#ZIP There's no sort of npm setup per person - Our licensing model is based on an honor system, we respect our users and trust that's reciprocated in return. ☺️
  2. Hey pal, do you have time to put together a little codesandbox? If you put a simple demo together outlining the issue clearly I can forward it on to some nuxt peeps for advice. We should definitely be able to find a better solution than a timeout.
  3. Ahaha, no worries pal! 🥳 Glad we got there in the end, this was a fun one.
  4. I think you may want import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger);
  5. Sure thing! They're starting and ending at different points on the path - If you want them to start off and end at the same places but go in opposite directions you'll want to use the same values but negative for one and positive for the other. Your timelines are doing basically the same thing for both groups of cards too, so you can abstract it out into a function to save accidentally changing one and breaking the symmetry ☺️ I changed the cards to circles so I could see where they are on the path better. https://codepen.io/cassie-codes/pen/75a75c683d37bf51921e4f10cd9d9a2a
  6. Hi there Kamran! If you'd like help with this, could you post a minimal demo of what you've tried and what you're struggling to understand? We'd love to help you figure this out but we don't have the capacity to create custom animations from scratch. If you're stuck with where to start, try the scrollTrigger docs or the scrollTrigger demos ----- If you would like the solution coded for you, I recommend heading over to our freelance jobs board and posting there.
  7. You were originally moving them around the motion path in the same direction, between the same start and end points, and just offsetting the alignment. That's why it wasn't symmetrical.
  8. Yep, I understand that - I took the opacity and scale out so it was easier to see what was going on. I just fixed the motion path direction so it was symmetrical. You'll still need to align them how you'd like and add the opacity and scale back in.
  9. It's not wrong necessarily! There's no wrong solutions. If it works and that's how you want to approach it that's ok - I just think I would have approached it with transforms. Motion paths might make it easier really! I think this is what you're after? https://codepen.io/cassie-codes/pen/7b02fff60c68d94f50176c10ba40bfe4?editors=0010
  10. Looks like you're trying to animate 'to' the same values as your SVG path already has. So you're not seeing anything. If you change it to 'from' and draw SVG to '0%' you'll see them animating 'from' 0% to your initial values (which are the same as '0% 100%') Also - GSAP uses querySelector under the hood so you can do this! gsap.from('svg line', { duration: 1.5, delay: 0.3, drawSVG: "0%" });
  11. I'd probably just use y, scale and opacity. I'd steer clear of the filters too, they're really tough on performance.
  12. I'm not quite sure what motion path is doing here? It seems like an over-complication, you could surely do this with simple scales and y transforms?
  13. A code demo please - not a video. I can't tell what you're doing with your code just by looking at pictures!
  14. Pleasure! Also, I assume it's your little one in your profile pic? That expression is *perfect* for debugging questions. It's been cracking me up.
  15. Hi, could you post a demo? it's very hard to tell what's happening from a screenshot. Thanks.
  16. Jack's in a different time zone to me but I'm sure we can figure out what's going on when he's up and about!
  17. Ok, cool. This sounds like it's time to tag in @GreenSock Thanks for being so helpful and patient while we worked through this.
  18. Okie dokes! Right. Lets narrow it down. Does this work? https://codepen.io/cassie-codes/pen/b2f06db0e4d7ad2e57188fc7c907e793
  19. If you change the container to position absolute does it work? By everywhere do you mean 'on android devices' as I'm on IOS and it's ok on both safari and chrome.
  20. https://codepen.io/cassie-codes/pen/c3d65bb34fdc8f61e3be2993d75b7e36 If you try this - does it work? And if not - if you change the container to absolute positioning instead of fixed, does that work?
  21. We'll figure it out! What browser are you using on android?
  22. https://codepen.io/cassie-codes/pen/c3d65bb34fdc8f61e3be2993d75b7e36 Give that a go and let me know. I think it's flexbox/implicit heights and widths breaking things. You've got flex on everything and then position absolute and fixed thrown in with percentage heights. so it's likely things are collapsing.
  23. Ah, I misunderstood. I thought the positioning of the nav was broken. I wanted to check whether it was still broken without draggable or whether it was purely a CSS thing. It still sounds like a CSS bug. I know setting explicit heights on flex children instead of flex-grow can cause some issues on android. What happens if you use floats for layout instead of flexbox?