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. 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.
  2. 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.
  3. I'll take a look into it. Sorry about this folks. Hang tight!
  4. 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
  5. Getting comfy with browser dev tools is always a good bit of advice. Thanks @iDad5 ☺️
  6. 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!
  7. 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.
  8. 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.
  9. Sorry for doubling up on that @akapowl!
  10. trigger: "scroll-plane" isn't actually referring to anything because you've missed the class '.' out. Even if that was working - your scrollbar and sections have different start and end points, so they wouldn't be synced up. I've refactored it for you with some markers added so you can see what's happening. I've also popped the sections code into a loop so you don't have to write it out four times! https://codepen.io/cassie-codes/pen/91d8107ae1156ec61c2c1854a2e1efa4
  11. Hi there - you'll want to look into SVG paths and masking for this. This is a great article. https://www.motiontricks.com/svg-dashed-line-animation/
  12. Ah, yeah. pseudo elements are tricky. They're hard to target, so you're on the right track with the CSSRulePlugin. I usually animate CSS variables and let the values trickle down to the pseudo element - maybe that's a good route? https://codepen.io/cassie-codes/pen/4206bf480334c0e5784ebb3c9d64021c?editors=0110
  13. Cassie

    NPM Build Error

    Ah! Yeah, that's what was confusing me
  14. This sounds pretty complex. What if the user doesn't stop scrolling? Surely the text would just flash and then immediately hide? Maybe showing the text when you enter a section and hiding it when you leave or enter another section would make more sense? Pretty much anything is possible though - you just have to write the right code! This is why we ask for minimal demos. It's impossible to just give people code snippets without context.
  15. Hi there - we don't recommend using scrollmagic. We have our own scroll plugin - ScrollTrigger, it's better in pretty much every way and (obviously) works better with GSAP. Secondly, tweenMax is an old version of GSAP, so I'd recommend you use GSAP 3 instead. You can target the offset of the stroke directly with GSAP, you'll need to look into how SVG line animation works in order to acheive that. It won't be as easy or flexible as DrawSVG though. Good luck!
  16. It's possible but it won't be as flexible/easy to control or cross browser friendly. https://css-tricks.com/svg-line-animation-works/
  17. This bit's confusing me a little - do you have a timeline nested inside a master timeline? I can't imagine why a timeline would be snapping a completely unrelated timeline, could you put together a small reduced test case in codesandbox or codepen?
  18. Hey there! Hard to make recommendations without knowing what you'd like the text animation to look like. But maybe splitText would be a good place to start? - https://greensock.com/docs/v3/Plugins/SplitText If you want to sync up sound a nice simple way would be to use a library like howler.js and then use a callback in a timeline or tween to play a sound. Here's a little demo https://codepen.io/cassie-codes/pen/qBNQerW?editors=1111
  19. Cassie

    NPM Build Error

    Is this not to do with the fact that it's a codepen link then?
  20. Not at all a nonsense solution. You're almost there. ☺️ You can have multiple scrollTriggers, that's ok. So if you're just after an opacity fade on the first section you can do something like this. gsap.to('.blue', { opacity: 0, scrollTrigger: { trigger: '.red', start: "top bottom", end: "top top", markers: true, scrub: true, } }); Almost exactly what you wrote except I've swopped out the timeline for a tween as it's just one little fade. I've also set it outside of the loop and I'm using the '.red' section as a trigger to fade out the '.blu
  21. Sure that sounds very possible - what have you tried so far?
  22. Cassie

    NPM Build Error

    Hey @ferriss, Yep, you're right there, sorry about this. I assumed you were using bonus plugins - my mistake! We're aiming to release on Tuesday but if that's too late maybe @GreenSock can help in the interim?