Jump to content

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

Cassie last won the day on July 24

Cassie had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Cassie

  1. Happens to the best of us! Thanks for the update.
  2. Heya Jakob! So you're saying - "hey GSAP, give me all the elements with a class of 'card-right', loop over them and for each loop assign that element to the variable cardlargeRight so I can do stuff to it" So you already have that card accessible through that variable name. There's no need to do another querySelector to get the card gsap.utils.toArray(".card-right").forEach(cardlargeRight => { let cardRight = cardRight.querySelector(".card-right"); } Also the following querySelector is very muddled. You're trying to find all elements with a class of card-right
  3. Hey there! Could you possibly put together a minimal demo for us? It's very hard to debug a live site. Thanks!
  4. Hey there Toby, How about something like this? Additional note - I assume you're trying to disable the button by changing pointer events - this is a pretty inaccessible pattern so I'd go for swopping out aria disabled instead and then styling that state in CSS. https://codepen.io/cassie-codes/pen/1f67c7c5ca16c6ac7aed2215845ac326?editors=0110
  5. Hey there gweatherson! Welcome to the forums. 🥳 You'll be needing to look into masking in order to achieve this effect. Here's a good thread to get you started
  6. Ahhh! I was away from my laptop today but this was playing on my mind. Just came back to it now and Jack's already beat me to it. I'm happy my instinct paid off though!
  7. Ah. I guess the line shouldn't be moving at a consistent pace in the background. It would take longer for the dot to traverse the big peak than the long horizontal section. You can use SVG paths as easing curves with custom ease.... maybe there's a solution there.
  8. Hey there Billy! Welcome to the forums. 🥳 this thread may help
  9. Sure - I think you'll be looking for something like this. Again - It's easier with minimal demos as we can actually check the code we're suggesting. ScrollTrigger.batch("[data-src]", { interval: 0.5, batchMax: 4, start: 'top bottom-=50px', onEnter: (targets) => targets.forEach( (el) => (el.src = el.getAttribute("data-src")), gsap.from(targets, { stagger: 0.5, duration: 0.5, opacity: 0, y: 50, ease: "power4.out", }) ), });
  10. Yeah. I get you! The default emotion is 'This thing works there and doesn't work here so it's broken' But code is logical. Stuff doesn't just break - it's always because we've added some styles, or some layout or something that conflicts. Debugging is 99% narrowing things down until you find the stray div/semicolon. Patience is probably the most useful tool for debugging really!
  11. Can you put together a minimal demo for us Fernando?
  12. Without a doubt, the best way to debug is by putting together a minimal demo. We don't just ask for demos because it's easier for us - 99% of the time when you narrow an animation down you'll find the issue. Pop together something on codepen - if you don't figure out the issue along the way - we'll have a look for you.
  13. This is a great demo to learn from 🥳
  14. Maybe Jack has a more in depth understanding but from my experience it's very inconsistent. Sometimes one of them will help, sometimes none of them do - sometimes they help in one browser and not in another. Sometimes they help in one browser and then that browser updates and they don't help anymore. None of them should be necessary really - they're hacks and workarounds.
  15. Hey there fernandofas! Why not use ScrollTrigger? It would certainly make your life easier ☺️
  16. This sounds like sticking duct tape over an issue rather than fixing it - but as long as you're happy with that as a solution.
  17. There's a lot more calculations involved with morphing than something like an opacity fade or transform - It also won't be hardware accelerated. That being said, if you haven't noticed any jankiness or performance issues - you're probably ok. Animation performance issues are very visible!
  18. Hey there Mark! Your 'end' trigger was set to when the bottom of that section hit the bottom of the viewport - this was actually occurring before your start trigger (when the top of the section hit the top of the viewport) I've changed your end values to +=4000px which gives you a lot more time for scrolling. ☺️ https://codepen.io/cassie-codes/pen/4b79d15bd32e1e360b067bed980fd13c
  19. Thanks for doing that Tomáš, Codepen is a lot easier for us to help though - I can't change things in your github repo so it's pretty difficult to work out what the issue is. Everything you need to set up a demo is in this minimal demo link. It's nice and simple. From a cursory look I don't know what is causing your issue, but you're repeating a lot of code unnecessarily - both in your SCSS and your JS. You could use scrollTrigger.batch() to handle this, and you don't have to apply the same styles separately to every item in the grid. Pop it into a codepen and we'll help guide you
  20. This will definitely be a useful place to start - https://greensock.com/docs/v2/Utilities/SplitText
  21. Hey there deepak21saini! Welcome to the forums. 🥳 I'm happy to give you some pointers - what have you tried so far? Have you read our getting started article or taken a look at the docs?
  22. Hey there Tomáš! Welcome to the forums! I'm afraid it's impossible to debug this without looking at the code you've written - could you possibly put together a minimal demo over on codepen to illustrate the issue?