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. Hey there! We can usually help more effectively if you provide a minimal demo, codepen is great for this. It's very hard to understand what the issue is from code snippets alone. When you post a demo - could you also explain what you mean by 'the animation still bugs' You are animating elements and using the same element as the trigger which can cause buggy behaviour, it's best not to animate the trigger element! I often use containing elements as triggers instead. Also - maybe this post will help you with best practises.
  2. No probs pal. 🥳 Look forward to seeing what you make
  3. Hi pal! You can simplify your approach down quite a lot though by using staggers and just targeting the class rather than looping around. If you're looking for smoothness maybe try a different ease, or a different duration? 'sine' is often nice and smooth. https://codepen.io/GreenSock/pen/poeGmqw?editors=0010
  4. Thanks for these really thorough explanations Paul. You're such an asset to these forums. ☺️
  5. You can use transforms (x, y, xPercent, yPercent, rotate) etc to move elements around. https://codepen.io/cassie-codes/pen/2d11cc626340b774c81d6f029722fcf0?editors=1010 Path animations are quite complex, but a lot of fun to dig into. I find they're often overkill for small icon animation though and you can achieve the same visual effect using clever opacity fades between shapes. If you want to go that route, we have a plugin for shape morphing - This is also a good thread should you want to try and animate points by hand. Good luck!
  6. Oooh, this is a fun challenge. I'm up against it a bit today but if no one grabs this I'll loop back round later and give it a whirl!
  7. Ah, this is wonderful. Thanks pal. Please keep me updated to your progress. We can add it to our learning center!
  8. I have a magic mouse I'm afraid - so that's similar to a touchpad I think
  9. Hiya! Welcome. If you're just starting out we recommend using our scroll plugin - ScrollTrigger - ScrollMagic isn't actually actively worked on anymore and ScrollTrigger is set up to work perfectly with your GSAP animations.
  10. That looks like maybe locomotive scroll for the fluidness, maybe some webGL on the images, masking, cursor tracking and hover events as well as dragging and snapping. There's a *lot* going on in that slider, I'm afraid it's a little beyond the abilities of the forums to put together in a demo. What you have is a good start though. Is there a particular bit you're trying to mimic?
  11. You need to add the correct resources in the resources panel in your pen settings. You were using GSAP, but loading tweenMax. You also didn't have jQuery loaded. You can type the name of the library you need in the search or paste in CDN links. Here you go - this one's got what you need. https://codepen.io/GreenSock/pen/zYZypdN?editors=1111 I don't know what this is but it's definitely nothing to do with GreenSock!
  12. I'm afraid I'm struggling to understand this pal. Can you put together a minimal demo for us? Thanks!
  13. Hi pals, looks like there was a little server hiccup with our cloud service provider. Could you try again and let me know how you get on? It should be fixed now.
  14. Sorry about this pal. Obviously if any of us were to spot an issue within the code snippet you provided we would point it out! It's not imperative that you provide a demo, however a lot of issues are incredibly hard to spot without a look at the context the problem is occurring within, and this problem falls into this category. We also don't only offer help to Club GSAP members. These forums are for everyone that needs help.
  15. I'll take a look into it. Sorry about this folks. Hang tight!
  16. First things first: TweenLite is an older version of GSAP. We definitely recommend that you learn and use GSAP 3. Looks like there's a lot of webGL stuff going on here. There's a little shader/distortion playground on codrops which will probably be a nice place to start https://tympanus.net/Development/WebGLDistortionConfigurator/?default=true
  17. Getting comfy with browser dev tools is always a good bit of advice. Thanks @iDad5 ☺️
  18. So what I'd probably do is try to narrow down the issue. Can you apply a simple tween to a DOM element, without CSS vars, using the custom wiggle? If you can then try with CSS vars, then with a pseudo element, then you'll know where the issue is. I suspect it's an issue with including customEase or customWiggle? Let me know how you get on!
  19. I usually set up one scrubbed timeline and then lots of smaller triggers for the elements that need to be animated in with a duration. The timelines don't have to be nested or triggered by the main timeline - they can just be triggered by elements coming or leaving the viewport. Look forward to seeing your demo, this sounds like a fun project.
  20. SCSS variable and CSS variables shouldn't 'clash' - they achieve different purposes. CSS custom properties are evaluated by the browser at runtime. SCSS variables aren't, think of CSS vars as a bridge between CSS and Javascript.