Jump to content

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

Cassie last won the day on May 5

Cassie had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Cassie

  1. https://tympanus.net/codrops/2021/05/04/dynamic-css-masks-with-custom-properties-and-gsap/
  2. I'm afraid I can't help with the React side of things, but this one is a horizontal scrolling demo. Maybe that's enough to kick start you? https://codepen.io/GreenSock/pen/YzygYvM
  3. The SVG filters in canvas bit was what I was into. Mega cool.
  4. Woooah. That paint on heat effect is amazing
  5. Ooooh, these are such tidy demos. Great job @akapowl 🥳
  6. Glad I could help! Good luck with it. ☺️
  7. You can make this timeline last a longer 'amount of time' or scrolling distance, by moving the end marker further down the page.
  8. Hi there - this is quite an overcomplicated approach. The best way I find to approach scroll animations is to create a timeline that animates how you want it to - and then hook that timeline up to the scroll. Here, take a look at this example - the first text fades out, then immediately afterward the next text fades in and up, and at the same time ( '<' ) the images swop out using opacity. https://codepen.io/cassie-codes/pen/1d5548ccffebad7019b6936af6bd8f56?editors=0010 The process I tend to lean on is - Position everything nicely from the start, layout is key! - Plan out a
  9. Hi! Still active. I was just sleeping 😴 This is what you're instructing the timeline to do. When you click a submenu item you're adding tweens to one main timeline, then when you toggle you're playing or reversing this timeline. You can set tl.progress(0) if you want the timeline to instantly be set to the start without reversing https://greensock.com/docs/v3/GSAP/Timeline/progress() My gut feeling here is that you're trying to solve something with one GSAP timeline that would be best solved by thinking in states. You don't want one timeline playing through and
  10. Hiya! MotionPathPlugin is definitely not what you need, you're on the right track with rotations though! You'd need to be rotating the items depending on their position in the slider. Here's a good place to start if you want to create scroll based animations https://greensock.com/docs/v3/Plugins/ScrollTrigger I would recommend starting by creating a timeline that animates the items the way that you need and then attaching that to a ScrollTrigger. Let us know how you get on!
  11. No need for aria roles if you're using correct markup. Which you are 😊 The only thing I'd change is opacity:0 instead of autoAlpha as opacity:0 doesn't hide anything from screenreaders. Then, good to go! Nice accessible animation.
  12. Animation isn't necessarily unfriendly to screenreaders. It's about making reasoned choices that are correct for that specific project. Whacking a load of unnecessary text in the DOM or changing structural markup is certainly more likely to have ramifications than some data attributes. I've encountered bugs with screenreaders reading unstyled markup and ignoring display none before.
  13. Yeah, I'd love to see. I'm really fascinated by this. It sounds like crazy sci-fi tweening.
  14. Ah, I see. I'm afraid I'm not going to be able to help here. Maybe @OSUblake or @Rodrigo will be able to help?
  15. Ah! I missed the RTL aspect of this, thanks for spotting that @akapowl
  16. I don't have personal experience of this so I will bow out to anyone else that wants to help, but I didn't want to leave you hanging. I did a bit of googling and stumbled on this thread on the three.js discourse site - does this help at all? https://discourse.threejs.org/t/interpolate-between-different-poses/15202/4 https://jsfiddle.net/fqcs6epr/
  17. This is a lovely solution. Nice and screenreader friendly too. 🙌
  18. Hey there! For future reference, we can usually help more effectively if you provide a minimal demo, codepen is great for this. If you haven't used codepen before, here's a post explaining how. What your code is currently saying is 'end when the bottom of the element hits the center of the viewport'. If you want to move the end position up higher in the viewport you could say end: 'bottom 20%' This is saying - 'end when the bottom of the element hits 20% of the way down the viewport' demo... https://codepen.io/cassie-codes/pen/3a4e504f3715095c7191026b24a7979f
  19. This is actually good, if you get it working in a simplified environment you're halfway there - then you can try and implement it and step through any issues caused. You can definitely target SVG paths in codepen. If you have one of your attempts we'd be happy to take a look, getting comfortable with codepen is such a HUGE help. (source, ex designer who learnt how to code making SVG heavy banner ads on codepen)
  20. Hi there! This post is from a couple of years ago now, so you may not get a response. We recommend using the official scroll plugin now - ScrollTrigger. The docs are really thorough, but shout if you need any help.
  21. Hi Davsev, Firstly, I see you're using scrollMagic, we at GreenSock don't recommend ScrollMagic. Instead we recommend the official scroll plugin: ScrollTrigger! It's better in every way. Here's a demo that should help. https://codepen.io/GreenSock/pen/YzygYvM Happy tweening!
  22. Hiya, There's quite a lot to parse here so bear with me! First things first: You're using an older version of GSAP. We definitely recommend that you use GSAP 3. Secondly, what is the expected behaviour of the delays and what is happening for you? Could you break down the GreenSock part for me a little?
  23. Hey there! We can usually help more effectively if you provide a minimal demo, codepen is great for this. If you haven't used codepen before, here's a post explaining how.
  24. Potentially like this? https://codepen.io/cassie-codes/pen/6e3fbf7346033d3b27b62a49d01d12f2?editors=0110 You can sequence tweens on a timeline and then add a scrolltrigger to that timeline.